skills.rest
shengmingzhishu
shengmingzhishuCOMMUNITY
Explore all skills by this author →
GitHub

vue-component-design

Designs Vue 3 components, Composables, and Pinia stores with defined contracts and boundaries.

Updated Aug 22, 2026
Search Tags:#design#frontend architecture#component design#pinia#composable#vue 3#props emits
One-click install
npx skills add https://github.com/shengmingzhishu/LeeCommonSkills --skill vue-component-design-shengmingzhishu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-component-design
Source: https://github.com/shengmingzhishu/LeeCommonSkills/tree/main/.rules-skills/vue-stack/.trae/skills/vue-component-design
Command: npx skills add https://github.com/shengmingzhishu/LeeCommonSkills --skill vue-component-design-shengmingzhishu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When adding or refactoring Vue 3 pages, components, Composables, or Pinia stores, teams often lack clear boundaries between UI, domain state, service requests, and routing, leading to tangled code and unclear contracts. This Skill produces structured design output before implementation begins. ## Core Features & Use Cases - Component Contract Definition: Defines Props, Emits, empty states, error states, and accessibility behavior for each component. - Layered Design Output: Produces L1 design cards for small features and L2 design plus API contracts for large features. - Boundary Clarification: Separates UI, domain state, service requests, and routing responsibilities, then hands off to vue-testing and vue-code-review for verification. - Use Case: When planning a new dashboard page with a Pinia store and several child components, use this Skill to generate the component boundaries, Props/Emits contracts, state ownership, file plan, and acceptance criteria before writing code. ## Quick Start Ask the AI to design a new Vue 3 feature, for example: design the components, Composable, and Pinia store for a user profile page with Props/Emits contracts and acceptance criteria.

Frequently Asked Questions about vue-component-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a Vue 3 component before implementing it?▼

Define the component's Props and Emits contract, its empty and error states, and its accessibility behavior first. Then clarify boundaries between UI, domain state, service requests, and routing before writing any code.

When should I use a Composable vs a Pinia store in Vue 3?▼

Use a Composable for reusable local logic tied to component lifecycle, and a Pinia store for shared domain state accessed across multiple components. The design output explicitly assigns state ownership to one or the other.

What is the difference between L1 and L2 design output?▼

L1 is a lightweight design card used for small features, while L2 is a full design document with API contracts used for large features. The choice depends on the scope of the page, component, or store being added or changed.

Does this work with Vue 2 or the Options API?▼

The design guidance targets Vue 3 with Composables and Pinia, which assumes the Composition API style. Vue 2 and Options API projects are outside its stated scope.

What happens after the component design is finished?▼

The completed design is handed off to the vue-testing and vue-code-review skills for verification. These downstream skills validate the implementation against the defined contracts and acceptance points.

Related Skills

Explore More Software Engineering Skills→
iptodaysiptodays

frontend-standards

Standardize Vue 3 frontend code quality and project structure.

Community
Advanced
githubgithub
38.5k

unit-test-vue-pinia

Write and review unit tests for Vue 3, Vitest, and Pinia codebases.

Official
Intermediate
Handy369Handy369

api-and-interface-design

Define contract shapes and boundary semantics for API and module interfaces before coding.

Community
Intermediate
TMHSDigitalTMHSDigital
2

mobile-component-patterns

Generate typed React Native components with StyleSheet or NativeWind and testing scaffolds.

Community
Intermediate