{
  "context": "Tests whether the agent correctly uses Vue 3 template refs with matching variable names, accesses DOM elements only after mount via onMounted, and applies aria-busy on loading containers for accessibility.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Template ref variable naming",
      "description": "The `ref()` variable name in script setup matches the `ref=\"...\"` attribute value in the template exactly (e.g. `const inputEl = ref(null)` paired with `<input ref=\"inputEl\" />`)",
      "max_score": 12
    },
    {
      "name": "onMounted for DOM access",
      "description": "Any interaction with a template ref (e.g. calling .focus(), reading offsetHeight) happens inside an `onMounted()` callback — not called directly at setup time or in a computed",
      "max_score": 12
    },
    {
      "name": "ref typed as HTML element",
      "description": "Template ref variables are typed as the appropriate HTML element type with null (e.g. `ref<HTMLInputElement | null>(null)`, `ref<HTMLDivElement | null>(null)`)",
      "max_score": 8
    },
    {
      "name": "aria-busy on loading container",
      "description": "The container element shown during a loading state includes `aria-busy=\"true\"` (or `:aria-busy=\"true\"`) as an attribute",
      "max_score": 12
    },
    {
      "name": "aria-label on buttons",
      "description": "All interactive button elements in the template include a descriptive `:aria-label` binding",
      "max_score": 8
    },
    {
      "name": "role=alert on error",
      "description": "Error message containers include `role=\"alert\"` so screen readers announce them",
      "max_score": 8
    },
    {
      "name": "v-if loading/error/success chain",
      "description": "The template uses a `v-if` / `v-else-if` / `v-else` chain to conditionally display loading, error, and success states",
      "max_score": 8
    },
    {
      "name": "script setup lang ts",
      "description": "All .vue files use `<script setup lang=\"ts\">`",
      "max_score": 6
    },
    {
      "name": "defineProps generic typing",
      "description": "Any component props are declared using `defineProps<T>()` with a TypeScript interface or inline type",
      "max_score": 6
    },
    {
      "name": "defineEmits tuple syntax",
      "description": "If the component emits events, they use `defineEmits<{ eventName: [payloadType] }>()` with the object-and-tuple syntax",
      "max_score": 8
    },
    {
      "name": "ref for primitive state",
      "description": "Primitive reactive values (booleans, strings, numbers) are declared with `ref()`, not `reactive()`",
      "max_score": 6
    },
    {
      "name": "retry button aria-label",
      "description": "The retry/reload button inside the error state includes a descriptive `:aria-label` attribute",
      "max_score": 6
    }
  ]
}