{
  "instruction": "Build a dashboard page with filters, sortable data table, and charts that fetch data from an API",
  "relevant_when": "Agent builds a frontend application with interactive UI, dashboard, or data display with filters",
  "context": "Proactively check that agents choose the correct state management pattern for every piece of state: URL params for filters, derived state computed inline, server data in fetch hooks with cleanup, local UI state in useState.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/frontend-state-management/SKILL.md",
      "tile": "tessl-labs/frontend-state-management"
    }
  ],
  "checklist": [
    {
      "name": "filters-in-url",
      "rule": "Filter state (search query, category, sort order, date range, pagination) uses URL search params (useSearchParams or equivalent), NOT useState. The filters must survive a page refresh and be shareable via URL.",
      "relevant_when": "Agent builds a page with filters, search, sort, or pagination"
    },
    {
      "name": "no-stored-derived-state",
      "rule": "Values computable from other state (totals, counts, filtered/sorted lists, percentages, validation results) are computed inline or with useMemo, NOT stored in a separate useState. There must be no useEffect that reads state and calls setState for a derived value.",
      "relevant_when": "Agent computes aggregated, filtered, or derived values from existing state"
    },
    {
      "name": "server-data-in-hooks",
      "rule": "Data fetched from APIs is managed in a custom hook or data-fetching library (React Query, SWR, or fetch+useEffect), NOT in React Context or a global store. The fetch hook handles loading, error, and data states.",
      "relevant_when": "Agent fetches data from an API to display in the UI"
    },
    {
      "name": "fetch-cleanup-abort",
      "rule": "Every useEffect that calls fetch includes an AbortController (or cancelled flag) in its cleanup function to prevent stale responses from overwriting fresh data.",
      "relevant_when": "Agent writes useEffect with fetch or async data loading"
    },
    {
      "name": "local-ui-state-colocated",
      "rule": "UI-only state like modal open/close, dropdown visibility, tooltip visibility, and accordion expand/collapse uses useState in the component that owns it, NOT in Context or a global store.",
      "relevant_when": "Agent builds interactive UI elements like modals, dropdowns, or toggleable sections"
    },
    {
      "name": "context-memoized-if-used",
      "rule": "If React Context is used, the context value object is memoized with useMemo and callback functions are wrapped with useCallback. A custom hook wraps useContext with a null check that throws an error.",
      "relevant_when": "Agent creates or uses React Context"
    }
  ]
}