What problem does it solve? React applications often suffer from scattered API calls, inconsistent cache invalidation, useEffect-based fetching, and loading states that cannot distinguish errors from empty results. This Skill enforces a layered data fetching architecture so reads, writes, and cache refreshes stay consistent across components, stores, and services. ## Core Features & Use Cases - Layered Fetching Architecture: Routes all API calls through service modules and store-level SWR hooks, keeping components free of direct client calls and useEffect fetching. - Cache Key and Invalidation Discipline: Defines shared key factories, matching read/refresh keys, and mutation flows that refresh affected lists and details after writes. - Async State Rendering: Uses AsyncBoundary and AsyncError patterns to correctly distinguish loading, first-load errors, settled empty results, and background revalidation failures. - Use Case: When migrating a component that fetches data in useEffect with local state, move the call into a service, expose a useFetchXxx store hook, and render through AsyncBoundary with proper error and retry wiring. ## Quick Start Refactor this component's useEffect fetch into a service call with a store SWR hook and render it through AsyncBoundary with error and retry handling.
