{
  "instruction": "Build a search page with a search input that queries /api/search?q=... as the user types (with debounce) and displays results in a list",
  "relevant_when": "Agent creates frontend components that fetch data based on user input",
  "context": "Proactively verify that agents handle all data states for search components, including loading during search, error on failed search, and no-results state.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/frontend-error-handling/SKILL.md",
      "tile": "tessl-labs/frontend-error-handling"
    }
  ],
  "checklist": [
    {
      "name": "search-loading-state",
      "rule": "Agent shows a loading indicator while search results are being fetched",
      "relevant_when": "Agent builds a search component that fetches results from an API"
    },
    {
      "name": "search-error-state",
      "rule": "Agent shows an error message (with retry or re-search option) when the search API call fails",
      "relevant_when": "Agent builds a search component that fetches results from an API"
    },
    {
      "name": "no-results-state",
      "rule": "Agent shows a 'No results found' message when the search returns an empty array, not a blank page or the loading state indefinitely",
      "relevant_when": "Agent builds a search component that displays a list of results"
    },
    {
      "name": "fetch-error-handling",
      "rule": "The search fetch handles both network errors (try/catch) and HTTP errors (res.ok check)",
      "relevant_when": "Agent writes code that calls fetch() for search"
    },
    {
      "name": "error-state-accessible",
      "rule": "Error messages use role=\"alert\" for screen reader accessibility",
      "relevant_when": "Agent renders error states in a search component"
    }
  ]
}