Vue component conventions

Use this skill for concrete, idiomatic Vue component work. Project-local instructions, AGENTS.md, lint rules, nearby components, and framework-specific skills take priority.

First pass

• Inspect the target component, its parent/children, and at least one similar nearby component before editing.
• Decide whether the change belongs in a component, composable, page, route, store, or test. Keep this skill focused on the component layer.
• Preserve public props, emits, slots, styling hooks, and visual behavior unless the requested task requires changing them.
• Reuse existing base components, dialog/overlay primitives, design tokens, and local composables before adding a new primitive.
• Keep static UI static. Do not introduce config arrays, v-for, extra computed state, or generic abstractions for a small fixed set of known elements.

Single-file component shape

• Match the local SFC block order; otherwise use <template>, <script>, <style>.
• Use <script setup lang="ts"> for component logic unless the project uses a different established pattern.
• Put exported types needed by other files in a separate non-setup <script lang="ts"> block above the setup block.
• In setup code, group imports, local types, compiler macros, state/computed/composables/hooks, then methods. Match the local macro order when one exists.