Shadcn Vue Skilld

What it does

This skill, Shadcn Vue Skilld, generates reusable UI components in Shadcn/Vue. It accelerates frontend development and promotes design consistency by leveraging prompts to create these components. The skill supports integration with Tailwind CSS (including version 4) and offers various new components and features for enhanced customization and functionality.

When to use it

• When you need to quickly generate reusable UI components in a Shadcn/Vue project.
• To ensure consistent design across your application by leveraging pre-built component structures.
• When integrating with specific libraries like VeeValidate or TanStack Form for form handling and validation.

Key capabilities

• Generates UI components using prompts.
• Supports Tailwind CSS version 4 integration and the @theme directive.
• Includes new components: Kbd, Button-group, Spinner, and a dedicated loading spinner component.
• Provides native v-model support for the NativeSelect component.
• Offers enhanced type safety for PinInput with custom value types.
• Adds data-slot attributes to primitives for granular styling.

Example prompts

• "Create a Shadcn/Vue button component with a primary style."
• "Generate a NativeSelect component with a v-model binding."
• "Build a Button-group component with three buttons: 'Save', 'Cancel', and 'Delete'."

Tips & gotchas

• Prefer CSS variables over utility classes for theming to enable dynamic adjustments.
• Be aware of breaking changes, particularly related to the Separator component (label props removed), vue-sonner updates, color space conversions to OKLCH, and NavigationMenuLink state changes.
• Avoid using the legacy Form component; instead, use VeeValidate or TanStack Form integrations for robust form handling.