shadcn
shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns.
Installation
SKILL.md
Comprehensive best practices guide for shadcn/ui applications, maintained by the shadcn/ui community. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
| 1 | Component Architecture | CRITICAL | arch- | | 2 | Accessibility Preservation | CRITICAL | ally- | | 3 | Styling & Theming | HIGH | style- | | 4 | Form Patterns | HIGH | form- | | 5 | Data Display | MEDIUM-HIGH | data- | | 6 | Component Composition | MEDIUM | comp- | | 7 | Performance Optimization | MEDIUM | perf- |
| 8 | State Management | LOW-MEDIUM | state- |
shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns. Source: thongdn-it/react-agent-skills.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/thongdn-it/react-agent-skills --skill shadcn- Category
- </>Dev Tools
- Verified
- —
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is shadcn?
shadcn/ui component library best practices and patterns (formerly shadcn-ui). This skill should be used when writing, reviewing, or refactoring shadcn/ui components to ensure proper architecture, accessibility, and performance. Triggers on tasks involving Radix primitives, Tailwind styling, form validation with React Hook Form, data tables, theming, or component composition patterns. Source: thongdn-it/react-agent-skills.
How do I install shadcn?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/thongdn-it/react-agent-skills --skill shadcn Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/thongdn-it/react-agent-skills
Details
- Category
- </>Dev Tools
- Source
- user
- First Seen
- 2026-02-01