{
  "instruction": "Build a product listing page that fetches products from /api/products and displays them in a grid with name, price, and image",
  "relevant_when": "Agent creates frontend components that fetch and display lists of data",
  "context": "Proactively verify that agents handle all data states (loading, error, empty, success) when building list pages, even when the user only asks for the display logic.",
  "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 indicator while the product list is being fetched",
      "relevant_when": "Agent builds a list component that fetches data"
    },
    {
      "name": "error-state-with-retry",
      "rule": "Agent renders an error message with a retry button when the product fetch fails",
      "relevant_when": "Agent builds a list component that fetches data"
    },
    {
      "name": "empty-state-handled",
      "rule": "Agent renders a meaningful empty state (e.g., 'No products found') when the API returns an empty array, rather than showing a blank grid or nothing",
      "relevant_when": "Agent builds a component that fetches and displays a list"
    },
    {
      "name": "error-state-accessible",
      "rule": "The error message container uses role=\"alert\" for screen reader accessibility",
      "relevant_when": "Agent renders error messages in frontend components"
    },
    {
      "name": "fetch-network-error-handled",
      "rule": "The fetch call is wrapped in try/catch or .catch() to handle network failures",
      "relevant_when": "Agent writes code that calls fetch()"
    },
    {
      "name": "fetch-http-error-handled",
      "rule": "Agent checks res.ok or res.status and handles non-2xx responses as errors",
      "relevant_when": "Agent writes code that calls fetch()"
    }
  ]
}