{
  "context": "Tests whether the agent writes Vue 3 components using script setup with TypeScript, properly types props and emits, handles async loading/error states in the template, and includes accessibility attributes on interactive elements.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Script setup with TypeScript",
      "description": "Every .vue component file uses `<script setup lang=\"ts\">` (not Options API, not plain `<script>`, not missing `lang=\"ts\"`)",
      "max_score": 12
    },
    {
      "name": "defineProps generic typing",
      "description": "Props are declared using `defineProps<T>()` with a TypeScript interface or type, not using the runtime object syntax like `defineProps({ prop: String })`",
      "max_score": 12
    },
    {
      "name": "defineEmits typed tuple syntax",
      "description": "Emits are declared using `defineEmits<{ eventName: [payloadType] }>()` with the object-and-tuple generic syntax",
      "max_score": 10
    },
    {
      "name": "One component per file",
      "description": "Each .vue file contains exactly one component definition (no multiple `<template>` blocks or multiple `<script setup>` blocks in a single file)",
      "max_score": 8
    },
    {
      "name": "v-if loading state",
      "description": "The template uses a `v-if` branch to display a loading indicator while data is being fetched",
      "max_score": 10
    },
    {
      "name": "v-else-if error state",
      "description": "The template uses a `v-else-if` (or equivalent conditional) branch to display an error message when the fetch fails",
      "max_score": 10
    },
    {
      "name": "role=alert on error",
      "description": "The error display element includes `role=\"alert\"` for screen reader accessibility",
      "max_score": 10
    },
    {
      "name": "aria-label on buttons",
      "description": "Interactive button elements include a descriptive `:aria-label` binding (dynamic or static) to improve accessibility",
      "max_score": 10
    },
    {
      "name": "v-else success state",
      "description": "The template uses a `v-else` branch to render the actual data content after successful fetch",
      "max_score": 8
    },
    {
      "name": "Retry button in error",
      "description": "The error state includes a button that triggers a reload/retry of the data",
      "max_score": 10
    }
  ]
}