CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/vue-best-practices

Vue 3 patterns — Composition API, composables, reactivity, component design,

97

1.33x
Quality

93%

Does it follow best practices?

Impact

99%

1.33x

Average score across 8 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-6/

{
  "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

tile.json