{
  "context": "Tests whether the agent proactively applies React best practices when building a form, without being told to. The task says nothing about noValidate, aria attributes, controlled inputs pattern, or validation -- the agent should apply these on its own.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Controlled inputs",
      "description": "All form inputs (name, email, bio) are controlled components with value bound to state and onChange handlers updating state.",
      "max_score": 10
    },
    {
      "name": "e.preventDefault on submit",
      "description": "The form submit handler calls e.preventDefault() to prevent page reload.",
      "max_score": 8
    },
    {
      "name": "noValidate on form element",
      "description": "The <form> element uses the noValidate attribute to disable browser-native validation popups in favor of custom React validation. The agent was NOT asked to add noValidate.",
      "max_score": 10
    },
    {
      "name": "Client-side validation with error messages",
      "description": "The form validates required fields and/or email format before calling onSave, rendering inline error messages in the component. The agent was NOT asked to implement validation.",
      "max_score": 12
    },
    {
      "name": "aria-required on required inputs",
      "description": "Required inputs have aria-required=\"true\". The agent was NOT asked about accessibility.",
      "max_score": 10
    },
    {
      "name": "aria-invalid bound to error state",
      "description": "Inputs have aria-invalid set to true when they have a validation error and false/undefined otherwise. The agent was NOT asked about accessibility.",
      "max_score": 10
    },
    {
      "name": "aria-describedby links to error element",
      "description": "Inputs use aria-describedby pointing to the id of their error message element when an error is present. The agent was NOT asked about accessibility.",
      "max_score": 10
    },
    {
      "name": "role=alert on error messages",
      "description": "Validation error message elements use role=\"alert\" so screen readers announce them when they appear. The agent was NOT asked about accessibility.",
      "max_score": 10
    },
    {
      "name": "Labels with htmlFor",
      "description": "Form inputs have associated <label> elements using htmlFor, not just placeholder text.",
      "max_score": 8
    },
    {
      "name": "Loading state during save",
      "description": "The form shows a saving/submitting indicator while the async onSave is in progress (e.g. disabled button with 'Saving...' text, spinner, or similar).",
      "max_score": 8
    },
    {
      "name": "TypeScript interfaces for props",
      "description": "Props and form data types are defined with TypeScript interfaces. No use of 'any'.",
      "max_score": 4
    }
  ]
}