vue-ui-engineeringlisted

# Vue Engineering Skill For the Simplified Chinese reference, read `references/zh-CN.md` when the user communicates primarily in Chinese or requests Chinese output. ## Purpose Produce predictable Vue behavior with explicit reactivity, clear state ownership, stable rendering boundaries, and accessible component APIs. ## When to Use Use for Vue components, composables, forms, routing, Pinia or Vuex stores, data fetching, Nuxt SSR and hydration, or render performance. ## Inputs - Component behavior and states - Vue and Nuxt versions, API style, and rendering model - Existing component, composable, store, router, and test patterns - Design and API contracts ## Outputs - Component and composable boundary plan - Explicit state ownership and typed Vue implementation - Behavior-focused tests and rendering notes ## Workflow 1. Identify Vue and Nuxt versions, Options or Composition API conventions, router, rendering mode, style system, and test stack. 2. Search for equivalent components, composables, stores, routes, data-fetching utilities, and tests. 3. Assign each state value to one owner: parent props, local reactive state, URL, store, or server cache. 4. Design typed props, emits, models, slots, and exposed interfaces while preserving one-way data flow. 5. Use computed values for pure derivation. Use watchers only for external synchronization, asynchronous orchestration, or imperative integration, and clean up stale work. 6. Preserve reactive connections. Copy props or s