create-component

To generate a new shadcn/ui component in a Next.js project, supply the component name to this skill. It validates your project setup, maps theme tokens, and outputs a production-ready scaffold with CVA variants and documentation.

Creating a React component with Tailwind CSS and CVA variants is automated by scaffolding a PascalCase file wired to your project's theme tokens. This ensures standardized, theme-consistent styling across your shared UI library.

Yes, this component generator works with an existing shadcn/ui setup. It verifies your current configuration and maps project tokens to CSS variables to ensure the newly generated component maintains visual consistency across your app.

The best way to standardize shared UI components across a team is to automate scaffolding with enforced project conventions. This approach generates consistent file structures, theme integration, and documentation stubs for every new component.

Yes, you can use this to scaffold a Next.js button with custom theme variants. Supplying the component name triggers generation of the scaffold, CVA wiring for variants, and integration with your project's mapped theme tokens.

Generated React components may not match the project theme if tokens are not properly mapped. This skill prevents that by validating the shadcn/ui setup and mapping project tokens to CSS variables before outputting the component scaffold.