Does it support React Server Components (RSC)?

Yes, the skill checks the isRSC flag in your project context to determine when the 'use client' directive is required for interactive components.

Can I use it with different icon libraries?

Yes, it identifies your configured iconLibrary (such as Lucide or Tabler) and ensures that all component imports and data-icon attributes use the correct library.

How does it ensure accessibility?

The skill enforces critical accessibility rules, such as requiring titles for Dialog and Sheet components and using semantic FieldGroup structures for form validation.

Can it add components from community registries?

Yes, it can search and add components from official and community registries, and it automatically fixes import aliases to match your local project structure.

How does this skill handle different Tailwind versions?

It automatically detects whether the project uses Tailwind v3 or v4 via the shadcn info command and adjusts configuration edits and theme blocks accordingly.

Shadcn/ui Management

Name: Shadcn/ui Management
Author: Undistraction

byUndistraction

0•

设计工具

Manages, styles, and composes shadcn/ui components using standardized CLI commands and industry best practices.

The shadcn skill transforms Claude into a specialized frontend architect focused on building and maintaining design systems with shadcn/ui. It handles the entire component lifecycle—from initializing projects and searching registries to debugging complex UI compositions and enforcing accessibility standards. By automatically detecting project-specific context such as Tailwind versions, React Server Component settings, and icon libraries, the skill ensures that every component added or modified aligns perfectly with your existing codebase and adheres to strict styling rules for consistent, production-grade interfaces.

主要功能

010 GitHub stars

02Enforcement of strict accessibility and ARIA standards for UI primitives

03Intelligent UI composition using existing components and built-in variants

04Real-time documentation fetching for accurate component API usage

05Automated component installation and updates via shadcn CLI

06Semantic color token management for consistent dark mode and theme support

使用场景

01Troubleshooting and fixing layout issues in forms, modals, and navigation menus

02Building complex, accessible dashboards by composing high-level UI blocks

03Refactoring custom Tailwind styles into standardized shadcn semantic tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add undistraction/ts-scaffold shadcn

For use in Claude.ai and ChatGPT