{
  "instruction": "Build a todo list component with add, toggle, and delete",
  "relevant_when": "Agent builds React components with lists and user interactions",
  "context": "Proactively check that agents apply React best practices when building interactive list components.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/react-patterns/SKILL.md",
      "tile": "tessl-labs/react-patterns"
    }
  ],
  "checklist": [
    {
      "name": "stable-keys-not-index",
      "rule": "Todo list items use a stable unique identifier (e.g. todo.id, generated UUID, or incrementing counter) as the key prop, NOT the array index. Using key={index} or key={i} on items that can be reordered, inserted, or deleted is a failure.",
      "relevant_when": "Agent renders a list of todo items with .map()"
    },
    {
      "name": "controlled-input",
      "rule": "The text input for adding todos is a controlled component with value bound to state and onChange updating state",
      "relevant_when": "Agent builds a form input for adding todo items"
    },
    {
      "name": "form-prevents-default",
      "rule": "The form submit handler calls e.preventDefault() to prevent page reload",
      "relevant_when": "Agent builds a form for adding todo items"
    },
    {
      "name": "input-validation",
      "rule": "Agent validates the input before adding a todo (e.g. prevents adding empty/whitespace-only items) and shows feedback",
      "relevant_when": "Agent builds a form for adding todo items"
    },
    {
      "name": "accessible-button-labels",
      "rule": "Interactive elements (delete buttons, toggle buttons) have accessible text content or aria-label so screen readers can identify their purpose",
      "relevant_when": "Agent builds interactive list items with action buttons"
    },
    {
      "name": "role-alert-on-errors",
      "rule": "Any validation error message uses role=\"alert\" so screen readers announce it",
      "relevant_when": "Agent displays form validation errors"
    },
    {
      "name": "aria-required-on-input",
      "rule": "The required todo input has aria-required=\"true\"",
      "relevant_when": "Agent builds a required form input"
    },
    {
      "name": "typescript-props-typed",
      "rule": "Component props are typed with TypeScript interfaces, not using 'any'",
      "relevant_when": "Agent writes React components with TypeScript"
    }
  ]
}