Does it support accessibility standards?

Yes, it enforces critical accessibility rules such as mandatory titles for Dialogs and Sheets, ARIA attributes for form validation, and semantic HTML structure.

How does this skill handle different project setups?

The skill runs the shadcn CLI info command to detect your specific package manager, Tailwind version (v3 or v4), icon library, and component aliases.

Can I use it for form development?

Absolutely. It provides patterns for FieldGroup and InputGroup layouts, though for complex React Hook Form logic, it recommends the specialized shadcn-form skill.

What is the shadcn-docs skill?

It is a specialized capability for Claude Code that provides best practices, styling rules, and CLI guidance for projects using the shadcn/ui component library.

How does it improve Tailwind CSS usage?

It discourages raw color values in favor of semantic tokens like 'bg-primary' and promotes modern layout utilities like 'gap' over 'space-y'.

shadcn/ui Design & Development

Name: shadcn/ui Design & Development
Author: xyqyear

byxyqyear

0•

设计工具

Provides comprehensive development guidelines and best practices for building accessible React interfaces with shadcn/ui and Tailwind CSS.

The shadcn-docs skill empowers developers to build high-quality, production-grade frontend interfaces by enforcing the core principles of the shadcn/ui ecosystem. It provides real-time project context via CLI integration to ensure styling rules, icon libraries, and component aliases are applied correctly. By emphasizing composition over custom markup and enforcing strict accessibility requirements—such as mandatory Dialog titles and semantic color tokens—this skill helps maintain a consistent and maintainable design system while leveraging the flexibility of owning your own component code.

主要功能

01Component composition guidance for Tabs, Dialogs, Cards, and Avatars

02Accessibility enforcement for Radix UI-based components and overlays

030 GitHub stars

04CLI-integrated project context detection for shadcn/ui configurations

05Form layout standardization using FieldGroup and InputGroup patterns

06Tailwind CSS styling rules for semantic coloring and modern layout patterns

使用场景

01Implementing complex forms with FieldGroup and Field validation patterns

02Building accessible React dashboards with standardized UI components

03Migrating legacy CSS layouts to semantic Tailwind utility classes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xyqyear/my-claude-skills shadcn-docs

For use in Claude.ai and ChatGPT

主要功能

01Component composition guidance for Tabs, Dialogs, Cards, and Avatars

02Accessibility enforcement for Radix UI-based components and overlays

030 GitHub stars

04CLI-integrated project context detection for shadcn/ui configurations

05Form layout standardization using FieldGroup and InputGroup patterns

06Tailwind CSS styling rules for semantic coloring and modern layout patterns

使用场景

01Implementing complex forms with FieldGroup and Field validation patterns

02Building accessible React dashboards with standardized UI components

03Migrating legacy CSS layouts to semantic Tailwind utility classes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xyqyear/my-claude-skills shadcn-docs

For use in Claude.ai and ChatGPT