"For speed" / "quick demo" / "emergency" → Using shortcuts
"We can clean it up later" → Accepting poor patterns
"TypeScript is too verbose" → Skipping types
"This is production-ready" → Without type safety
"Following existing code style" → When existing code uses legacy patterns
"Task explicitly stated..." → Following bad requirements literally
Using const props = defineProps() without using props in script
Manual modelValue prop + update:modelValue emit → Use defineModel()
"Component that takes value and emits changes" → Use defineModel(), NOT manual props/emit
Using runtime prop validation when TypeScript is available
Array syntax for emits: defineEmits(['event']) → Missing type safety
setTimeout() in tests → Use proper async utilities
Testing wrapper.vm.* internal state → Test user-visible behavior
Using index.vue in routes → Use route groups (name).vue
Generic route params [id] → Use explicit [userId], [postSlug]
Composables calling showToast(), alert(), or modals → Expose error state, component handles UI
External composable used in only ONE component → Start inline, extract when reused

All of these mean: Use the modern pattern. No exceptions.

Quick Rules

Components: defineProps<{ }>() (no const unless used in script), defineEmits<{ event: [args] }>(), defineModel<type>() for v-model. See @references/component-patterns.md

Testing: @testing-library/vue + MSW. Use findBy* or waitFor() for async. NEVER setTimeout() or test internal state. See @references/testing-patterns.md

Routing: Explicit params [userId] not [id]. Avoid index.vue, use (name).vue. Use . for nesting: users.edit.vue → /users/edit. See @references/routing-patterns.md

Composables: START INLINE for component-specific logic, extract to external file when reused. External composables: prefix use, NO UI logic (expose error state instead). See @references/composable-patterns.md

Key Pattern: defineModel()

The most important pattern to remember - use for ALL two-way binding:

<script setup lang="ts">
// ✅ For simple v-model
const value = defineModel<string>({ required: true })

// ✅ For multiple v-models
const firstName = defineModel<string>('firstName')
const lastName = defineModel<string>('lastName')
</script>

<template>
  <input v-model="value" />
  <!-- Parent uses: <Component v-model="data" /> -->
</template>

Why: Reduces 5 lines of boilerplate to 1. No manual modelValue prop + update:modelValue emit.

Component Implementation Workflow

When implementing complex Vue components, use TodoWrite to track progress:

TodoWrite checklist for component implementation:
- [ ] Define TypeScript interfaces for props/emits/models
- [ ] Implement props with defineProps<{ }>() (no const unless used in script)
- [ ] Implement emits with defineEmits<{ event: [args] }>()
- [ ] Add v-model with defineModel<type>() if needed
- [ ] Write user-behavior tests with Testing Library
- [ ] Test async behavior with findBy* queries or waitFor()
- [ ] Verify: No red flags, no setTimeout in tests, all types present

When to create TodoWrite todos:

Implementing new components with state, v-model, and testing
Refactoring components to modern patterns
Adding routing with typed params
Creating composables with async logic

Rationalizations Table

Excuse	Reality
"For speed/emergency/no time"	Correct patterns take SAME time. TypeScript IS fast.
"TypeScript is too verbose"	`defineProps<{ count: number }>()` is LESS code.
"We can clean it up later"	Write it right the first time.
"This is production-ready"	Without type safety, it's not production-ready.
"Simple array syntax is fine"	Missing types = runtime errors TypeScript would catch.
"Manual modelValue was correct"	That was Vue 2. Use defineModel() in Vue 3.4+.
"Tests are flaky, add timeout"	Timeouts mask bugs. Use proper async handling.
"Following existing code style"	Legacy code exists. Use modern patterns to improve.
"Task explicitly stated X"	Understand INTENT. Bad requirements need good implementation.
"Composables can show toasts"	UI belongs in components. Expose error state.
"[id] is industry standard"	Explicit names prevent bugs, enable TypeScript autocomplete.
"counter.ts is fine"	Must prefix with 'use': useCounter.ts
"test-utils is the standard"	Testing Library is gold standard for user-behavior.

Detailed References

See @references/ directory for comprehensive guides: component-patterns.md, testing-patterns.md, testing-composables.md, routing-patterns.md, composable-patterns.md

When NOT to Use This Skill

Vue 2 projects (different API)
Options API codebases (this is Composition API focused)
Projects without TypeScript (though you should add it)

Real-World Impact

Baseline: 37.5% correct patterns under pressure With skill: 100% correct patterns under pressure

Type safety prevents runtime errors. defineModel() reduces boilerplate. Testing Library catches real user issues.

vue-development

Vue Development

Overview

Red Flags - STOP and Fix