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 correctly destructures Pinia store state using storeToRefs (preserving reactivity) while destructuring actions directly, and places reactive side effects such as navigation and notifications in watch() rather than inside action functions.",
"type": "weighted_checklist",
"checklist": [
{
"name": "storeToRefs for state",
"description": "Store state refs and computed values are destructured from the store using storeToRefs() (e.g. `const { user, isAuthenticated } = storeToRefs(authStore)`) — not destructured directly from the store call",
"max_score": 12
},
{
"name": "Actions destructured directly",
"description": "Action functions are destructured directly from the store instance (e.g. `const { login, logout } = authStore`) — NOT passed through storeToRefs()",
"max_score": 10
},
{
"name": "watch() for navigation side effect",
"description": "The router redirect triggered by a state change (e.g. logout or session expiry) is placed inside a watch() callback, not inside an action function body",
"max_score": 12
},
{
"name": "watch() for notification side effect",
"description": "Any toast or notification triggered by a state change is placed inside a watch() callback, not inline within an action or lifecycle hook",
"max_score": 10
},
{
"name": "Setup Store syntax",
"description": "Any Pinia store defined in the solution uses the setup function syntax: `defineStore('name', () => { ... return { ... } })`, not the Options Store object syntax",
"max_score": 8
},
{
"name": "stores/ directory",
"description": "Store files are located in a `stores/` directory (e.g. `stores/cart.ts`, `stores/user.ts`)",
"max_score": 6
},
{
"name": "computed for derived values",
"description": "Values derived from store state (e.g. item count, total price, display label) are declared with `computed()` inside the setup store function",
"max_score": 8
},
{
"name": "Local ref for component-only state",
"description": "State used exclusively within a single component (e.g. a dropdown open/closed toggle, a search filter string) is declared with local `ref()` inside that component's script setup — not placed in the Pinia store",
"max_score": 8
},
{
"name": "script setup lang ts",
"description": "All .vue component files use `<script setup lang=\"ts\">`",
"max_score": 6
},
{
"name": "defineProps generic typing",
"description": "Any component props are declared with `defineProps<T>()` using a TypeScript interface or inline type",
"max_score": 6
},
{
"name": "aria-label on interactive elements",
"description": "All buttons and interactive elements in component templates include a descriptive `:aria-label` binding",
"max_score": 7
},
{
"name": "role=alert on error regions",
"description": "Any error message container in component templates includes `role=\"alert\"`",
"max_score": 7
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
vue-best-practices
verifiers