{
  "instruction": "Create a dashboard page that fetches analytics data from /api/analytics and displays it in cards showing total users, revenue, and recent signups",
  "relevant_when": "Agent creates frontend components that fetch or display data from APIs",
  "context": "Proactively verify that agents add loading, error, and empty states to dashboard components that fetch data, even when the user only describes 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 analytics data is being fetched",
      "relevant_when": "Agent builds a dashboard component that fetches data"
    },
    {
      "name": "error-state-with-retry",
      "rule": "Agent renders an error message with a retry button when the analytics fetch fails",
      "relevant_when": "Agent builds a dashboard component that fetches data"
    },
    {
      "name": "error-state-accessible",
      "rule": "The error state container uses role=\"alert\" so screen readers announce the error",
      "relevant_when": "Agent renders an error state in a dashboard component"
    },
    {
      "name": "empty-state-handled",
      "rule": "Agent handles the case where data is loaded successfully but contains empty or zero values, showing a meaningful message rather than blank cards or undefined",
      "relevant_when": "Agent builds a dashboard that displays fetched data"
    },
    {
      "name": "fetch-error-handling",
      "rule": "All fetch calls handle both network errors (try/catch or .catch()) and HTTP errors (res.ok check), not just the happy path",
      "relevant_when": "Agent writes code that calls fetch() or an API client"
    },
    {
      "name": "error-boundary-present",
      "rule": "Agent wraps the dashboard or its parent in a React ErrorBoundary (class component with getDerivedStateFromError), or for vanilla JS, includes a top-level try/catch around render logic",
      "relevant_when": "Agent builds a React dashboard page or a vanilla JS page with multiple data sections"
    }
  ]
}