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.
Installation and usage
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.
설치 후 터미널에서 다음 명령을 실행하여 이 스킬을 사용할 수 있습니다:
skills use frontend-components