component-builder

First check whether shadcn/ui already provides the component using npx shadcn@latest add [component-name]. If it exists, install or extend it rather than reimplementing. Otherwise define a TypeScript props interface, build the component with Tailwind classes, and add accessibility attributes.

Use Server Components by default and add 'use client' only when the component needs interactivity such as useState, event handlers, or browser APIs. A static feature card stays a Server Component, while a counter with buttons requires the client directive.

Place reusable primitives shared across domains in components/ui/, form-specific components in forms/, and domain-bound components in their capsule such as admin/, dashboard/, or marketing/. App-wide shells like error boundaries live at the component root.

Buttons need type and aria-label, decorative icons need aria-hidden, meaningful icons need role="img" with aria-label, and form fields need aria-describedby and aria-invalid linked to error messages with role="alert". Images require descriptive alt text.

Use the cn() utility imported from @/lib/utils to merge base classes with conditional or consumer-provided className props. This keeps components customizable while preserving default styling like rounded-lg border bg-card.