{
  "instruction": "Build a multi-field form (registration, settings, or profile editor) with validation, error display, and submission",
  "relevant_when": "Agent builds a frontend form with multiple input fields, validation, and submission",
  "context": "Proactively check that agents keep form state local, derive validation results instead of storing them, use object state or useReducer for 4+ fields, and include proper submission handling.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/frontend-state-management/SKILL.md",
      "tile": "tessl-labs/frontend-state-management"
    }
  ],
  "checklist": [
    {
      "name": "form-state-local",
      "rule": "Form input state (field values, touched state, errors) is managed locally in the form component using useState or useReducer, NOT in React Context or a global store.",
      "relevant_when": "Agent builds a form component"
    },
    {
      "name": "validation-derived-not-stored",
      "rule": "Form validation results (isValid, field-level errors for format/length checks) are computed from the current form values, NOT stored in a separate useState that could go out of sync. There must be no useEffect that watches form values and sets validation state.",
      "relevant_when": "Agent adds validation to a form"
    },
    {
      "name": "object-state-for-many-fields",
      "rule": "For forms with 4 or more fields, the agent uses a single state object or useReducer rather than individual useState calls per field. A generic update function handles field changes.",
      "relevant_when": "Agent builds a form with 4 or more input fields"
    },
    {
      "name": "submission-loading-state",
      "rule": "The form tracks submission state (loading/submitting boolean) to disable the submit button and show feedback during async submission, preventing double submission.",
      "relevant_when": "Agent builds a form that submits data to a server"
    },
    {
      "name": "error-display-after-submit",
      "rule": "Server-side or submission errors are displayed to the user with role=\"alert\" for accessibility. Errors are cleared when the user edits the relevant field.",
      "relevant_when": "Agent handles form submission errors"
    },
    {
      "name": "no-form-state-in-url",
      "rule": "Form input values mid-editing do NOT go in URL search params. Form state is ephemeral local state, not URL state.",
      "relevant_when": "Agent builds a form on a page that also has URL params"
    }
  ]
}