Skill included in the shadcn/ui repository: When an agent adds components, checks documentation, applies presets, or enforces brand guidelines in a project containing components.json, it first uses the shadcn CLI to read the project configuration and installed components, then builds the interface according to a fixed set of composition and styling rules.
skills.sh install count 127430 (+1516 / 24h)
Security Audit: Not audited
- Not yet scanned
Rationale
- Rules are listed item by item with correct and incorrect examples: className handles layout only, not overriding colors or fonts; use flex + gap instead of space-y-*; use FieldGroup + Field for forms; Dialog / Sheet / Drawer must have titles; buttons do not have isLoading, use Spinner composition instead
- Before writing components, run npx shadcn@latest docs <component> to get documentation and example links; when updating installed components, first use --dry-run and --diff to view differences before merging
- If the user does not specify which registry to add components from, ask first; do not guess; check hardcoded import paths in files installed from community registries
- skills.sh 24 hour installs 1516, cumulative 127430 (represents attention only)
Usage
- In projects containing components.json, requests involving shadcn are automatically triggered (user-invocable: false, cannot be manually invoked)
- Run shadcn@latest using npx / pnpm dlx / bunx according to the project's package manager; apply presets using init --preset <code> or apply <code>
Risks
- Not audited in this period, fixed C-level rating, install command not displayed
- The beginning of SKILL.md uses !`npx shadcn@latest info --json` to inject project information; in clients that support this syntax, the command is executed immediately upon skill loading, running the unfixed version @latest
- apply <preset> overwrites detected components, fonts, and CSS variables; components from community registries are third-party code