add-shadcn-component

To standardize shadcn/ui components in a Next.js application, this skill automates CLI installation and enforces architectural guardrails. It ensures consistent component architecture and strict adherence to design tokens across desktop dashboards and mobile kiosk interfaces.

The best way to customize shadcn/ui components is by creating domain-specific wrapper components. This architectural pattern prevents direct modification of generated UI files, maintaining strict adherence to project-specific design tokens and accessibility standards while allowing custom CVA-based variants.

You can add CVA variants to UI components for a mobile kiosk interface using enforced pattern templates. These templates provide custom CVA-based components alongside accessibility checklists to ensure consistent design tokens and appropriate touch targets for mobile kiosk interfaces.

Yes, this approach supports strict design token enforcement for Next.js frontend projects. It standardizes the integration of shadcn/ui components by enforcing project-specific configuration and architectural patterns, ensuring consistent design tokens across desktop and mobile interfaces without manual overhead.

You should use wrapper components to prevent direct modification of generated shadcn/ui files. This architectural guardrail solves the inconsistency and manual overhead associated with adding new UI components, ensuring your custom CVA-based variants and accessibility updates remain intact during future CLI integrations.