How does this skill interact with the shadcn CLI?

The skill intelligently detects your project's package manager (npm, pnpm, or bun) and uses the appropriate runner to execute shadcn CLI commands for adding, searching, or fetching documentation for components.

How does it handle component accessibility?

It enforces critical accessibility rules, such as requiring titles for Dialog and Sheet components and ensuring proper ARIA attributes and labels for all form inputs.

Does it support React Server Components (RSC)?

Yes, it monitors the project's 'isRSC' status and automatically applies the 'use client' directive to components that require state, effects, or browser-specific APIs.

Does it enforce specific styling rules?

Yes, it prioritizes semantic color tokens and flex gaps over manual hex codes or 'space-y' utilities to ensure a maintainable and themeable design system.

Can it help fix broken UI imports?

Absolutely. It uses your project's defined aliases to rewrite hardcoded import paths commonly found in third-party or community registry components.

Shadcn UI Manager

Name: Shadcn UI Manager
Author: blackgirlbytes

byblackgirlbytes

0•

Design Tools

Automates the management, styling, and composition of shadcn/ui components to build accessible, production-ready design systems.

The shadcn skill empowers Claude to handle the entire lifecycle of shadcn/ui development, from initial project setup to advanced component composition. It provides deep integration with the shadcn CLI to add, search, and update components while strictly enforcing best practices for Tailwind CSS styling, accessibility, and form validation. By analyzing project-specific context—including Tailwind versions, package managers, and React Server Component settings—this skill ensures that every UI element is correctly implemented, properly themed with semantic tokens, and accessible out of the box.

Key Features

01Full component lifecycle management including adding, searching, and updating registry items

02Direct integration with shadcn CLI documentation for real-time API and usage guidance

03Automated enforcement of accessibility standards for Dialogs, Sheets, and Form fields

040 GitHub stars

05Context-aware configuration for React Server Components (RSC) and custom import aliases

06Intelligent Tailwind CSS styling using semantic tokens and optimized layout patterns

Use Cases

01Scaling design systems by discovering and integrating community registry components with corrected import paths

02Building complex, accessible forms using standardized FieldGroup and validation patterns

03Refactoring legacy UI into shadcn/ui components while maintaining consistent styling and responsiveness

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add blackgirlbytes/team-starter-repo shadcn

For use in Claude.ai and ChatGPT

Key Features

01Full component lifecycle management including adding, searching, and updating registry items

02Direct integration with shadcn CLI documentation for real-time API and usage guidance

03Automated enforcement of accessibility standards for Dialogs, Sheets, and Form fields

040 GitHub stars

05Context-aware configuration for React Server Components (RSC) and custom import aliases

06Intelligent Tailwind CSS styling using semantic tokens and optimized layout patterns

Use Cases

01Scaling design systems by discovering and integrating community registry components with corrected import paths

02Building complex, accessible forms using standardized FieldGroup and validation patterns

03Refactoring legacy UI into shadcn/ui components while maintaining consistent styling and responsiveness