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.
Depois de instalar, você pode usar esta skill executando o seguinte comando no terminal:
skills use frontend-components