shadcn
shadcn/ui Patterns
Use shadcn as a composable source-based UI system, not as a black-box dependency.
Use This Skill When
- Setting up shadcn in Next.js or Vite.
- Building reusable UI primitives and design tokens.
- Implementing form/dialog/table workflows with shadcn components.
Core Contract
- Install only needed components.
- Centralize theme tokens and semantic styles.
- Prefer composition patterns over one-off custom wrappers.
- Keep accessibility defaults intact.
- Keep business logic outside UI primitives.
Implementation Workflow
1) Setup
- Initialize shadcn for current framework.
- Confirm alias paths and
components.jsonare correct. - Add baseline primitives (
button,input,dialog, etc.).
2) Theme and Tokens
- Define CSS variables for colors, spacing, radii.
- Keep component variants consistent with product semantics.
- Avoid ad-hoc style drift across screens.
3) Composition Patterns
- Forms: RHF + Zod + shadcn form primitives.
- Dialogs: controlled open state + focus management.
- Tables: server-state aware loading, empty, error states.
- Toasts: normalize success/error messaging patterns.
4) Quality Gate
- Keyboard support and focus traps verified.
- ARIA labels and roles validated.
- Component API consistency across feature modules.
Output Requirements for Agent
- Installation and config steps.
- Token/theming plan.
- Component composition pattern.
- Accessibility and testing checklist.
References
- Full setup commands, component examples, and advanced snippets:
references/guide.md
More from alicoder001/agent-skills
reasoning
Chain-of-thought reasoning, self-reflection, and systematic problem-solving patterns for AI agents. Use before any complex task to ensure logical and accurate solutions.
38typescript
TypeScript strict mode patterns, naming conventions, and type safety rules. Use when writing TypeScript code, defining types, or reviewing TypeScript projects. Includes generics, utility types, and best practices.
35collaboration
Multi-agent communication, task delegation, and coordination patterns. Use when working with multiple agents or complex collaborative workflows.
27solid
SOLID, DRY, KISS, and clean code principles for TypeScript applications. Use when designing scalable architecture, writing maintainable code, or reviewing code quality.
25security
Security best practices for web applications. Use when handling user input, authentication, or sensitive data. Covers XSS, SQL injection, CSRF, environment variables, and secure coding patterns.
22memory
Working memory management, context prioritization, and knowledge retention patterns for AI agents. Use when you need to maintain relevant context and avoid information loss during long tasks.
22