AGENTS.md — Vue 3

Composition API + <script setup> SFCs, following the official Vue Style Guide.

• Component names are multi-word (TodoItem), except the root App.
• One component per file; filename casing is consistently PascalCase or kebab-case.
• Reference components in PascalCase in SFC templates and self-close empty ones (<TodoItem/>).
• Prefer full words over abbreviations; name general-to-specific; prefix tightly-coupled children with the parent.
• Base/presentational components are prefixed Base, App, or V.
• Always give props detailed definitions (at least a type); never the bare-array form. Declare names in camelCase.
• v-for always has a :key.
• Never put v-if and v-for on the same element — filter via a computed property or move v-if out.
• Keep template expressions simple; move complex logic into computed properties or methods.
• Split complex computed properties into smaller single-purpose ones.
• Quote non-empty attribute values; one attribute per line on multi-attribute elements.
• Use directive shorthands (:, @, #) consistently — always or never.
• Scope component styles; only App/layout components may be global.
• Use shallowRef/shallowReactive for large immutable data; keep child props stable; use v-once/v-memo and list virtualization for perf-critical views.