frontend-components

Build and structure React components following the project's design system patterns with Next.js 16 App Router, React 19, and TypeScript. Use this skill when creating or modifying React components (*.tsx), implementing component variants with class-variance-authority (CVA), using the cn() utility for class merging, building reusable primitives (Button, Card, Input, Badge, Dialog, etc.), composing complex components from primitives, implementing Server Components vs Client Components, using the 'use client' directive, working with component props and TypeScript interfaces, or extending existing UI package components. This includes files in apps/blog/src/components/, packages/ui/src/primitives/, packages/ui/src/components/, and any file importing from @imkdw-dev/ui. Apply when creating new components, refactoring existing ones, or deciding between primitives and complex components.

// tip: Run this command in your terminal to install the skill