{
  "instruction": "Build a user profile page that loads the current user's data from /api/users/me and displays their name, email, and avatar",
  "relevant_when": "Agent creates frontend components that fetch or display data from APIs",
  "context": "Proactively verify that agents add comprehensive error handling to any frontend component that fetches data, even when the user only asks for the happy path.",
  "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 visible loading indicator (spinner, skeleton, 'Loading...' text, or aria-busy) while the API request is in progress, not a blank screen",
      "relevant_when": "Agent builds a component that fetches data from an API"
    },
    {
      "name": "error-state-with-retry",
      "rule": "Agent renders an error message with a retry button or retry action when the fetch fails, so the user can attempt recovery",
      "relevant_when": "Agent builds a component that fetches data from an API"
    },
    {
      "name": "error-state-accessible",
      "rule": "The error state container uses role=\"alert\" so screen readers announce the error to users",
      "relevant_when": "Agent renders an error state in a frontend component"
    },
    {
      "name": "fetch-network-error-handled",
      "rule": "The fetch call is wrapped in try/catch (or .catch()) to handle network errors (server unreachable, no internet) rather than letting the promise rejection go unhandled",
      "relevant_when": "Agent writes code that calls fetch() or an API client"
    },
    {
      "name": "fetch-http-error-handled",
      "rule": "Agent checks res.ok or res.status after fetch and handles non-2xx HTTP responses (4xx/5xx) instead of silently treating them as success",
      "relevant_when": "Agent writes code that calls fetch()"
    },
    {
      "name": "user-friendly-error-message",
      "rule": "Error messages shown to users are human-readable strings (e.g., 'Failed to load profile'), not raw Error objects, stack traces, or technical codes",
      "relevant_when": "Agent displays error messages in the UI"
    }
  ]
}