{
  "instruction": "Build an e-commerce application with product listing, shopping cart, search/filters, and user preferences",
  "relevant_when": "Agent builds a frontend application with a shopping cart, product catalog, search functionality, or user preferences",
  "context": "Proactively check that agents use the correct state pattern for each concern: URL for search/filters, Context for cart (cross-cutting, low frequency), local state for UI toggles, derived state computed inline, and optimistic updates for cart actions.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/frontend-state-management/SKILL.md",
      "tile": "tessl-labs/frontend-state-management"
    }
  ],
  "checklist": [
    {
      "name": "cart-state-appropriate-level",
      "rule": "Shopping cart state is managed at an appropriate shared level: either lifted to a common parent with props (for small apps) or in React Context with a custom hook (for apps where cart is accessed from many distant components like header, product pages, checkout). Cart state must NOT be in useState of a single component if multiple components need it.",
      "relevant_when": "Agent builds a shopping cart feature accessed from multiple parts of the app"
    },
    {
      "name": "cart-derived-values-computed",
      "rule": "Cart derived values (total price, item count, subtotals, tax, discount amount) are computed inline or with useMemo from the cart items array, NOT stored in separate useState variables.",
      "relevant_when": "Agent displays cart totals, item counts, or other values derived from cart contents"
    },
    {
      "name": "search-filters-in-url",
      "rule": "Product search query, category filters, price range, and sort order use URL search params (useSearchParams or query string), NOT useState. Users must be able to share a filtered product URL or refresh without losing filters.",
      "relevant_when": "Agent builds product search, category filters, or sort functionality"
    },
    {
      "name": "product-data-not-in-context",
      "rule": "Product listing data from the API is fetched in a custom hook or data-fetching library, NOT stored in React Context or a global store. Server data has different lifecycle needs (caching, revalidation) than client state.",
      "relevant_when": "Agent fetches product data from an API"
    },
    {
      "name": "optimistic-cart-updates",
      "rule": "When adding/removing items from cart triggers an API call, the UI updates optimistically (immediately) with rollback on failure, rather than waiting for the server response before updating the display.",
      "relevant_when": "Agent builds add-to-cart or remove-from-cart with server persistence"
    },
    {
      "name": "local-ui-not-global",
      "rule": "Component-local UI state (product quick-view modal, size selector dropdown, quantity picker, image gallery index) uses useState in the component, NOT in a global store or Context.",
      "relevant_when": "Agent builds product cards, detail views, or interactive UI elements"
    },
    {
      "name": "context-custom-hook-with-guard",
      "rule": "If React Context is used for cart or auth, it is wrapped in a custom hook (useCart, useAuth) that checks for null and throws a descriptive error if used outside the provider.",
      "relevant_when": "Agent creates React Context for shared state"
    }
  ]
}