What problem does it solve? React state frequently ends up in the wrong place: lifted too high so every input re-renders the page, kept too low so siblings cannot communicate, or pushed into a global store when a URL parameter would have sufficed. This Skill provides a strict decision tree that prevents useState-in-the-wrong-place sprawl. ## Core Features & Use Cases - Tiered decision tree: Evaluates state placement in priority order — URL search params, server ownership, local useState, lifted state, Zustand/Jotai stores, then React Query — defaulting to the highest tier that works. - Concrete code patterns: Shows correct and incorrect implementations for URL state with Next.js searchParams, Server Component data fetching, lifted state, and Zustand stores. - Anti-pattern detection: Flags common mistakes like storing form values in Zustand, mirroring server data in useState, and putting frequently-changing values in Context. - Use Case: When adding a filter to a product list page, the Skill directs you to URL search params instead of useState, so refresh, share links, and the back button all work. ## Quick Start Ask the agent where a new piece of React state should live, for example: where should I put the selected tab and filter values in my Next.js dashboard page?
