shadcn ui : Claude Skill Package

42 deterministic Claude AI skills for shadcn ui evergreen-2026. Covers component selection, variant API (cva), theming tokens (HSL v3 + oklch v4), copy-not-install paradigm, react-hook-form + zod composition, TanStack DataTable recipe, RSC boundaries, and 7 anti-pattern skills for production debugging.

Built on the Agent Skills open standard. Discoverable via npm-agentskills manifest and OpenAI Codex skill discovery.

Why This Exists

Without skills, Claude lacks deterministic guidance for shadcn ui patterns. Concrete examples will be filled in after Phase 5 skill creation.

Examples of guidance these skills enforce :

• shadcn ui is CLI-driven, NOT a library. Components are copied via npx shadcn@latest add <name>.
• Class merging ALWAYS via cn() helper (clsx + tailwind-merge), NEVER raw string concat.
• Form state ALWAYS via react-hook-form Controller + zodResolver, NEVER ad-hoc useState.
• Theming tokens use HSL space-separated CSS custom properties, NEVER comma-separated.

What's Inside

Category	Count	Purpose
core/	6	Architecture, CLI, stack, theming, registry, blocks
syntax/	18	Per-component API patterns (Button, Dialog, Sheet, Drawer, Form, Field, Select, Combobox, Command, DataTable, Sidebar, Chart, Calendar, InputOTP, and more)
impl/	7	End-to-end workflows (install, form validation, data-table recipe, theming, responsive modal, RSC boundaries, framework integration)
errors/	7	Anti-patterns + debugging (CLI sync mismatch, styling conflicts, Radix controlled state, form state, Tailwind v3 -> v4 migration, react-day-picker v9, cmdk version drift)
agents/	4	Validators (component selector, cva, form, RSC boundary)
Total	42

See INDEX.md for the complete skill catalog with descriptions and dependency graph.

Installation

Claude Code (recommended)

# Clone the full package
git clone https://github.com/OpenAEC-Foundation/shadcn-ui-Claude-Skill-Package.git
cp -r shadcn-ui-Claude-Skill-Package/skills/source/ ~/.claude/skills/shadcn/

As git submodule

git submodule add https://github.com/OpenAEC-Foundation/shadcn-ui-Claude-Skill-Package.git .claude/skills/shadcn

Via npm-agentskills standard

npx skills add @openaec/shadcn-claude-skill-package

Claude.ai (web)

Upload individual SKILL.md files as project knowledge.

Skill Structure

Every skill follows 3-level progressive disclosure:

shadcn-{category}-{topic}/
├── SKILL.md              # Main guidance (< 500 lines)
└── references/
    ├── methods.md        # Complete API signatures
    ├── examples.md       # Working code examples
    └── anti-patterns.md  # What NOT to do (with explanations)

YAML frontmatter uses folded scalar >, "Use when..." opener, and a Keywords: line with technical + symptom-based + plain-language terms for maximum discoverability.

Quality Guarantees

• Deterministic language : ALWAYS / NEVER, no "you might consider"
• Version-explicit code : every example annotated with applicable versions
• WebFetch-verified : all code-snippets validated against official docs
• CI/CD validated : frontmatter, line count, structure, language, em-dash checks on every push
• Compliance audit : score >= 90% required for releases

Companion Skills : Cross-Technology Integration

For projects combining shadcn ui with other AEC technologies, see Cross-Tech-AEC-Claude-Skill-Package.

Related Skill Packages (OpenAEC Foundation)

Package	Skills	Repo
Blender-Bonsai-ifcOpenshell-Sverchok	73	Link
Frappe	61	Link
Speckle	25	Link

See full list at OpenAEC-Foundation.

License

MIT : OpenAEC Foundation

Contributing

See CONTRIBUTING.md. Built with the Skill Package Workflow Template methodology.