Create Vue Components

What problem does it solve?

This Skill accelerates Vue 3 component development by providing best practices for Composition API, TypeScript, and Pinia integration, ensuring consistent, maintainable, and performant UI code.

Core Features & Use Cases

• Standardized Structure: Generate new Vue components following project-specific conventions.
• TypeScript Integration: Ensure type safety for props, emits, and reactive state.
• Pinia State Management: Seamlessly connect components to Pinia stores for global state.
• Use Case: You need to create a new TaskCard component. Use this skill to scaffold the component with the correct <script setup lang="ts"> structure, define props, integrate with useTaskStore, and apply design tokens for styling.

Quick Start

Create a new Vue 3 component called UserProfileCard with props for userId and readonly, and integrate it with a useUserStore.