Vue Coding Practices
Application skill for official Vue Style Guide ingest (awesome-guidelines). Generic JS: javascript-coding-practices. a11y: wcag-accessibility-practices. HTML/CSS: frontend-markup-practices.
Core Principle
Vue maintainability is tiered style guide discipline, Priority A prevents errors, Priority B naming keeps components discoverable, templates stay declarative, and parent-child state flows props down / events up.
When to Use / NOT
- Vue 3 SFCs, Options API or Composition API.
- Component library layout, eslint-plugin-vue setup, PR review on
.vue files.
NOT when:
- React/Svelte, use stack capsules in
skills/*-foundation.
- Pure JS utilities outside Vue,
javascript-coding-practices.
- Full app architecture (Pinia routing), Vue/Pinia foundation docs.
Workflow
- Essential (A), names, props, keys, styles (
vue-style-essential-errors.md).
- Naming/files (B), component tree conventions (
vue-style-components-naming.md).
- Templates (B/C), expressions, order, shorthands (
vue-style-templates-composition.md).
- Caution/verify (D), props/events, eslint (
vue-style-caution-verify.md).
Red Flags
- Single-word component name (non-App)
- Untyped
defineProps(['x']) in committed code
- v-for without
:key
- v-if and v-for on same element
- Unscoped styles on feature components
- Multiple components in one registration file
- Mixed PascalCase and kebab-case SFC filenames
- Unprefixed presentational
Button.vue
- Child name without parent prefix when tightly coupled
- Abbreviated component filenames (
UProfOpts.vue)
- v-model bound directly to prop field
- Mutating props or using
$parent for state
- Element selectors in
<style scoped>
- Complex expression chains in
{{ }}
- Mixed
v-bind: and : shorthands
- Unquoted HTML attribute values
Verification
- eslint-plugin-vue on changed
.vue files (Priority A rules as errors)
- vue-tsc / volar typecheck if TypeScript
- Vitest component tests on changed behavior
- Manual v-for key and scoped style spot check
- Capsule probes cited in review notes
References
awesome-guidelines/references/vue-style-learning-note.mdawesome-guidelines/references/vue-style-essential-errors.mdawesome-guidelines/references/vue-style-components-naming.mdawesome-guidelines/references/vue-style-templates-composition.mdawesome-guidelines/references/vue-style-caution-verify.md
Related skills
javascript-coding-practices, script block JS habitswcag-accessibility-practices, accessible Vue UItypescript-coding-standards, typed Vue + TS projects
1---2name: vue-coding-practices3description: Use when authoring or reviewing Vue 3 SFCs, Priority A multi-word components, typed props, keyed v-for, scoped styles, naming conventions, template simplicity, props-down/events-up, and eslint-plugin-vue.4---56# Vue Coding Practices78Application skill for official Vue Style Guide ingest (`awesome-guidelines`). Generic JS: `javascript-coding-practices`. a11y: `wcag-accessibility-practices`. HTML/CSS: `frontend-markup-practices`.910## Core Principle1112Vue maintainability is **tiered style guide discipline**, Priority A prevents errors, Priority B naming keeps components discoverable, templates stay declarative, and parent-child state flows props down / events up.1314## When to Use / NOT1516- Vue 3 SFCs, Options API or Composition API.17- Component library layout, eslint-plugin-vue setup, PR review on `.vue` files.1819**NOT when:**2021- React/Svelte, use stack capsules in `skills/*-foundation`.22- Pure JS utilities outside Vue, `javascript-coding-practices`.23- Full app architecture (Pinia routing), Vue/Pinia foundation docs.2425## Workflow26271. **Essential (A)**, names, props, keys, styles (`vue-style-essential-errors.md`).282. **Naming/files (B)**, component tree conventions (`vue-style-components-naming.md`).293. **Templates (B/C)**, expressions, order, shorthands (`vue-style-templates-composition.md`).304. **Caution/verify (D)**, props/events, eslint (`vue-style-caution-verify.md`).3132## Red Flags3334- Single-word component name (non-App)35- Untyped `defineProps(['x'])` in committed code36- v-for without `:key`37- v-if and v-for on same element38- Unscoped styles on feature components39- Multiple components in one registration file40- Mixed PascalCase and kebab-case SFC filenames41- Unprefixed presentational `Button.vue`42- Child name without parent prefix when tightly coupled43- Abbreviated component filenames (`UProfOpts.vue`)44- v-model bound directly to prop field45- Mutating props or using `$parent` for state46- Element selectors in `<style scoped>`47- Complex expression chains in `{{ }}`48- Mixed `v-bind:` and `:` shorthands49- Unquoted HTML attribute values5051## Verification5253- eslint-plugin-vue on changed `.vue` files (Priority A rules as errors)54- vue-tsc / volar typecheck if TypeScript55- Vitest component tests on changed behavior56- Manual v-for key and scoped style spot check57- Capsule probes cited in review notes585960## References6162- `awesome-guidelines/references/vue-style-learning-note.md`63- `awesome-guidelines/references/vue-style-essential-errors.md`64- `awesome-guidelines/references/vue-style-components-naming.md`65- `awesome-guidelines/references/vue-style-templates-composition.md`66- `awesome-guidelines/references/vue-style-caution-verify.md`6768## Related skills6970- `javascript-coding-practices`, script block JS habits71- `wcag-accessibility-practices`, accessible Vue UI72- `typescript-coding-standards`, typed Vue + TS projects
ryan-brosas