Does this skill support the Vue Options API?

No, this skill focuses specifically on the modern Vue 3 Composition API using the script setup syntax and TypeScript for better type safety and performance.

Is it compatible with Vite-based projects?

Yes, the skill includes patterns for component registration and auto-importing configurations that are compatible with Vite and unplugin-vue-components.

How does it handle component communication?

It implements standard patterns for Props (down), Emits (up), and Provide/Inject (deep tree) to ensure clean and predictable data flow between components.

Can it generate complex prop validators?

Yes, it includes patterns for runtime type checking, default values, and custom validator functions for complex data structures and business logic requirements.

Vue Component Patterns

Name: Vue Component Patterns
Author: TheBushidoCollective

byTheBushidoCollective

•

디자인 도구

Implements professional Vue 3 component architectures including type-safe props, emits, slots, and dependency injection.

The Vue Component Patterns skill provides Claude with a comprehensive framework for building reusable, maintainable, and type-safe Vue.js 3 components. By utilizing the script setup syntax and Composition API, this skill ensures that generated code follows industry best practices for prop validation, custom events, scoped slots, and provide/inject patterns. It is particularly useful for developers building complex UI libraries or scaling large Vue applications where component consistency and TypeScript integration are critical for long-term maintainability.

주요 기능

01Comprehensive Slot patterns including Scoped and Renderless components

0239 GitHub stars

03Advanced Runtime Prop validation and custom validator patterns

04TypeScript-first Prop and Emit definitions with withDefaults

05Type-safe Dependency Injection using InjectionKeys and Provide/Inject

06Flexible Component Registration strategies for Vite and Global environments

사용 사례

01Building robust Design System components with complex property requirements

02Managing deep-tree state communication without prop-drilling using reactive Provide/Inject

03Developing renderless components to share logic across different UI implementations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han vue-component-patterns

For use in Claude.ai and ChatGPT

Download Skill