{
  "instruction": "Build a todo list where users can add, toggle complete, and delete todos. Todos are stored via /api/todos (GET to list, POST to create, PATCH to toggle, DELETE to remove)",
  "relevant_when": "Agent creates frontend components with CRUD operations that call APIs",
  "context": "Proactively verify that agents handle errors for all CRUD operations, including optimistic update rollback and action-level error feedback, even when the user only asks for the functionality.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/frontend-error-handling/SKILL.md",
      "tile": "tessl-labs/frontend-error-handling"
    }
  ],
  "checklist": [
    {
      "name": "loading-state-shown",
      "rule": "Agent renders a loading state while the initial todo list is being fetched",
      "relevant_when": "Agent builds a component that fetches an initial list from an API"
    },
    {
      "name": "error-state-with-retry",
      "rule": "Agent renders an error state with retry when the initial todo list fetch fails",
      "relevant_when": "Agent builds a component that fetches data from an API"
    },
    {
      "name": "empty-state-handled",
      "rule": "Agent shows a meaningful empty state (e.g., 'No todos yet') when the list is empty, not a blank page",
      "relevant_when": "Agent builds a list component that fetches data"
    },
    {
      "name": "mutation-errors-handled",
      "rule": "Create, toggle, and delete operations have error handling (try/catch or .catch()) that shows feedback to the user when the action fails (e.g., toast, inline error)",
      "relevant_when": "Agent writes frontend code that performs create/update/delete API calls"
    },
    {
      "name": "optimistic-rollback-or-refetch",
      "rule": "When a mutation (toggle, delete) fails, the agent either rolls back the optimistic UI change or refetches the data, so the UI stays consistent with the server",
      "relevant_when": "Agent implements optimistic updates for toggle or delete actions"
    },
    {
      "name": "fetch-error-handling",
      "rule": "All fetch calls handle both network errors (try/catch) and HTTP errors (res.ok check)",
      "relevant_when": "Agent writes code that calls fetch() or an API client"
    }
  ]
}