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 defineModel() (the Vue 3.4+ preferred approach) when building custom input components that support v-model, and correctly handles form accessibility through label associations and aria attributes.",
"type": "weighted_checklist",
"checklist": [
{
"name": "defineModel usage",
"description": "Custom input components use `defineModel<T>()` to expose a two-way binding, rather than manually defining a `modelValue` prop and `update:modelValue` emit",
"max_score": 14
},
{
"name": "defineModel typed",
"description": "The defineModel call includes a type parameter (e.g. `defineModel<string>()`, `defineModel<number>()`) rather than being untyped",
"max_score": 8
},
{
"name": "No manual modelValue prop",
"description": "Custom input components do NOT declare a `modelValue` prop via defineProps for the purpose of v-model — defineModel handles this",
"max_score": 8
},
{
"name": "Form label association",
"description": "Form input elements are associated with labels using either `<label :for=\"id\">` paired with `:id` on the input, or using `aria-label` on the input element",
"max_score": 12
},
{
"name": "aria-label on buttons",
"description": "All button elements in the form component templates include a descriptive `:aria-label` binding",
"max_score": 8
},
{
"name": "role=alert on error",
"description": "Any inline validation error message container includes `role=\"alert\"` so it is announced by screen readers",
"max_score": 10
},
{
"name": "script setup lang ts",
"description": "All .vue component files use `<script setup lang=\"ts\">`",
"max_score": 6
},
{
"name": "defineProps generic typing",
"description": "Any props accepted by the custom input components (beyond the v-model) are typed using `defineProps<T>()` with a TypeScript interface",
"max_score": 6
},
{
"name": "defineEmits tuple syntax",
"description": "Any custom events emitted by the components (beyond the implicit model update) use `defineEmits<{ eventName: [payloadType] }>()` with the object-and-tuple syntax",
"max_score": 8
},
{
"name": "ref for local form state",
"description": "Any component-only state (e.g. focus indicators, show/hide password toggle, local validation message) is managed with local `ref()` inside that component's script setup",
"max_score": 8
},
{
"name": "v-model used in parent",
"description": "The parent form component binds the custom input components using `v-model` syntax (not manual :value and @update:modelValue props)",
"max_score": 12
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
vue-best-practices
verifiers