How does it handle icons from different libraries?

The skill identifies the specific icon library used in your project (e.g., Lucide, Tabler) and ensures all new components use the correct imports and data-icon attributes.

Can this skill fix my existing UI components?

Yes, it enforces critical rules for styling, form structure, and accessibility, such as adding missing ARIA labels or converting manual spacing to flex gaps.

How does the shadcn skill help with project setup?

It detects your components.json and package manager to automate initialization, preset selection, and the installation of UI primitives.

Does it support Tailwind CSS v4?

Yes, it detects the Tailwind version and adjusts how it handles CSS variables, using @theme blocks for v4 and tailwind.config.js for v3.

Shadcn UI Manager

Name: Shadcn UI Manager
Author: liminal-ai

byliminal-ai

0•

디자인 도구

Manages shadcn/ui components and design systems by automating installation, styling, and complex UI composition.

The shadcn skill enables Claude to act as an expert frontend architect for projects using shadcn/ui. It handles the entire component lifecycle, from project initialization and registry searches to debugging and styling. By injecting real-time project context—including Tailwind versions, icon libraries, and file aliases—the skill ensures that every component added or modified follows strict accessibility standards and semantic styling principles. It automates CLI workflows for adding components and fetching documentation, allowing for rapid, production-grade UI development without manual configuration errors.

주요 기능

01Real-time project context injection for Tailwind versions, icon libraries, and file-system aliases.

02Automated component installation and updates using the project's native package manager (npm, pnpm, bun).

03Enforcement of strict styling and layout rules including semantic tokens and accessibility requirements.

040 GitHub stars

05Smart UI composition for complex patterns like form validation groups, overlays, and data displays.

06Direct integration with shadcn CLI for documentation fetching, component searching, and diff previews.

사용 사례

01Scaffolding complex, accessible forms and dashboards using standardized shadcn/ui patterns.

02Managing and updating UI components from third-party or community registries with automatic import rewriting.

03Refactoring existing CSS or Tailwind classes to follow shadcn/ui semantic design tokens.

주요 기능

01Real-time project context injection for Tailwind versions, icon libraries, and file-system aliases.

02Automated component installation and updates using the project's native package manager (npm, pnpm, bun).

03Enforcement of strict styling and layout rules including semantic tokens and accessibility requirements.

040 GitHub stars

05Smart UI composition for complex patterns like form validation groups, overlays, and data displays.

06Direct integration with shadcn CLI for documentation fetching, component searching, and diff previews.

사용 사례

01Scaffolding complex, accessible forms and dashboards using standardized shadcn/ui patterns.

02Managing and updating UI components from third-party or community registries with automatic import rewriting.

03Refactoring existing CSS or Tailwind classes to follow shadcn/ui semantic design tokens.