Vue 3 patterns — Composition API, composables, reactivity, component design,
97
93%
Does it follow best practices?
Impact
99%
1.33xAverage score across 8 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent uses Pinia with the Setup Store pattern for cross-component state, places store files correctly, uses computed for derived values, uses watch for side effects, and distinguishes between Pinia shared state and local component ref() state.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Pinia for shared state",
"description": "Cross-component state (e.g. the authenticated user, session token, or user preferences that multiple components need) is managed in a Pinia store rather than in a single component or passed via props",
"max_score": 10
},
{
"name": "Setup Store pattern",
"description": "The store is defined using the Setup Store pattern: `defineStore('name', () => { ... return { ... } })` with a function body, not the Options Store object syntax `defineStore('name', { state: () => ({...}), getters: {}, actions: {} })`",
"max_score": 15
},
{
"name": "stores/ folder placement",
"description": "Store files are placed in a `stores/` directory (e.g. `stores/auth.ts`, `stores/user.ts`)",
"max_score": 8
},
{
"name": "computed for derived values",
"description": "Values derived from store state (e.g. display name, role label, permissions list) are declared with `computed()` inside the setup function rather than calculated inline or as plain functions",
"max_score": 12
},
{
"name": "watch for side effects",
"description": "Reactive side effects triggered by state changes (e.g. redirecting on logout, persisting to localStorage, showing a notification) use `watch()` rather than being embedded in action functions or lifecycle hooks",
"max_score": 12
},
{
"name": "Local ref() for component state",
"description": "State used only within a single component (e.g. a form field value, a toggle open/closed) is declared with local `ref()` inside that component's `<script setup>`, not added to a Pinia store",
"max_score": 10
},
{
"name": "Script setup on components",
"description": "All .vue component files use `<script setup lang=\"ts\">`",
"max_score": 8
},
{
"name": "defineProps generic typing",
"description": "Any component props are typed using `defineProps<T>()` with a TypeScript interface or inline type",
"max_score": 8
},
{
"name": "Store returns all used members",
"description": "The setup store's return object explicitly lists all state refs, computed values, and action functions that are used by components",
"max_score": 9
},
{
"name": "No reactive object replacement",
"description": "Reactive objects inside the store are never reassigned directly; mutations use property assignment or `Object.assign()`",
"max_score": 8
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
vue-best-practices
verifiers