Rules

Philosophy

These rules exist as a reference for humans. The goal is consistent, readable, and maintainable code through shared conventions.

AI agents can use these rules as context for code generation, refactoring, or code review. Some rules overlap with what linting and code formatting tools handle automatically. The goal is reducing post-generation fixes, especially those requiring manual intervention.

Vue SFC Structure

• Overview
• Template on the top
• Script setup with TypeScript
• Group script by logical concerns
• Multi-word component names

Props & State

• Overview
• Define props with TypeScript
• Define emits with TypeScript
• Destructure props
• Same name prop shorthand
• Prefer defineModel
• Prefer ref over reactive
• Prefer VueUse
• No Side Effects in Computed
• No Mutating Props

Template Directives

• Overview
• Keyed v-for
• Use of instead of in for v-for

Styles

• Overview
• Scoped styles

Composables

• Overview
• Call composables in setup context
• Use "use" prefix naming
• Return plain objects with refs
• Clean up side effects
• Composables vs utilities
• Organize by logical concern
• Accept flexible input types
• Single responsibility
• Async patterns
• Thin composables
• Progressive extraction