{
  "instruction": "Build a contact form with name, email, and message fields that submits to /api/contact via POST",
  "relevant_when": "Agent creates frontend forms that submit data to APIs",
  "context": "Proactively verify that agents handle form submission errors, validation, and loading states, even when the user only asks for the form layout and submission.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/frontend-error-handling/SKILL.md",
      "tile": "tessl-labs/frontend-error-handling"
    }
  ],
  "checklist": [
    {
      "name": "submit-error-handled",
      "rule": "The form submission is wrapped in try/catch or .catch() and displays an error message to the user when the API call fails",
      "relevant_when": "Agent builds a form that submits data to an API"
    },
    {
      "name": "submitting-state-shown",
      "rule": "Agent shows a submitting/loading state while the form is being submitted (e.g., disabled submit button, spinner, or 'Sending...' text)",
      "relevant_when": "Agent builds a form that submits data to an API"
    },
    {
      "name": "client-validation-present",
      "rule": "Agent implements client-side validation for required fields and shows inline error messages before attempting the API call",
      "relevant_when": "Agent builds a form with required fields"
    },
    {
      "name": "submit-error-accessible",
      "rule": "Form-level submission error messages use role=\"alert\" for screen reader accessibility",
      "relevant_when": "Agent displays form submission error messages"
    },
    {
      "name": "fetch-http-error-handled",
      "rule": "The form submission checks res.ok or res.status and handles server-side validation errors or other non-2xx responses",
      "relevant_when": "Agent writes form submission code that calls fetch()"
    },
    {
      "name": "user-friendly-error-message",
      "rule": "Error messages shown to the user are human-readable, not raw Error objects or stack traces",
      "relevant_when": "Agent displays error feedback in a form"
    }
  ]
}