Can I use custom Tailwind colors with this skill?

While Tailwind is used, the skill encourages using semantic CSS variables (like bg-primary or text-muted) to ensure the application remains themeable and visually consistent.

How are dialogs managed in this skill?

The skill strictly enforces the v-slot='{ close }' pattern for dialogs to avoid managing manual open/close refs, which simplifies the code and improves reliability.

Why does this skill prefix components with 'UI'?

The UI prefix (e.g., UIButton) is enforced to ensure consistency across the codebase and to clearly distinguish primitive library components from domain-specific feature components.

Does this skill support form validation?

Yes, it requires all forms to use vee-validate combined with Zod schemas, ensuring that every form has strict type-safety and robust validation logic.

Shadcn Vue Component Standards

Name: Shadcn Vue Component Standards
Author: JosephAnson

byJosephAnson

0•

Design Tools

Implements standardized Shadcn Vue component patterns, accessible form validation, and semantic theming for consistent frontend development.

This skill optimizes Claude's ability to build Vue.js interfaces using the Shadcn Vue library by enforcing strict architectural and accessibility patterns. It mandates the use of a 'UI' component prefix, semantic CSS variables for theming, and robust dialog patterns using scoped slots instead of reactive state refs. By integrating vee-validate and Zod for all form interactions and providing a clear directory structure for feature-based components, it ensures high-quality, maintainable, and production-grade code tailored for modern web applications.

Key Features

01Standardizes accessible dialog patterns using the v-slot scoped state management pattern.

02Implements robust form validation using vee-validate and Zod schemas by default.

03Provides organized folder structures and auto-import naming conventions for feature-based components.

040 GitHub stars

05Enforces 'UI' prefix naming convention for all Shadcn Vue components for codebase consistency.

06Promotes semantic theming using CSS variables instead of arbitrary Tailwind utility colors.

Use Cases

01Standardizing UI component architecture across large-scale frontend applications.

02Building accessible and type-safe forms in a Vue 3 composition API environment.

03Implementing consistent multi-theme support using semantic design tokens.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add josephanson/claude-plugin shadcn-vue

For use in Claude.ai and ChatGPT

Download Skill