shadcn-ui
shadcn/ui
When to Use
shadcn/ui is the default component and styling approach for all frontend projects. Always prefer shadcn/ui components (<Button>, <Input>, <Card>, etc.) over raw HTML elements or hand-styled Tailwind.
Use this skill for:
- Component installation, composition, and customization
- Theming with CSS variables (OKLCH color space)
- Form integration with react-hook-form + zod
- Accessible UI patterns (via Radix UI primitives)
Only skip shadcn/ui when a project explicitly uses a different component system (e.g., MUI, Chakra).
Installation and Setup
Initialize in a Next.js Project
More from michaelkeevildown/claude-agents-skills
neo4j-data-models
Neo4j graph data modeling patterns — node/relationship design, fraud detection schemas, and modeling best practices.
27neo4j-cypher
Neo4j Cypher query language reference — patterns, performance, fraud-domain queries, and Neo4j 5+ features.
13neo4j-driver-js
Neo4j JavaScript driver 6.x — connection setup, session management, impersonation security, transaction functions, type handling, and result-to-UI data mapping.
8git-workflow
Git workflow conventions — branching strategy, commit messages, PR workflow, and rebase vs merge.
7fastapi
FastAPI — route definitions, dependency injection, Pydantic models, middleware, and async patterns.
6agent-teams
Agent Teams workflow — parallel multi-agent development with stack-aware coordination (build-first for frontend, TDD for Python/Rust), feature doc lifecycle, file ownership, and quality gates.
6