The state-architecture lens for a frontend build — the heart of the system. Use after keel's skeleton works, when designing or auditing state, or when "it's out of sync" bugs keep appearing. The one shift: almost all frontend complexity comes from state having MULTIPLE COPIES (DOM, server DB, URL, localStorage) drifting apart — so the craft is to relentlessly CLASSIFY each piece of state into the one bucket that owns it, minimize the source of truth and derive the rest, and model hard interactions as explicit machines. Triggers on "state management", "Redux / Zustand / Context / signals / Jotai", "where should this state live", "derived state / single source of truth", "this keeps getting out of sync", "useEffect to sync state", "prop drilling", "should this be in the URL", "a form's state", "too many boolean flags / loading and error flags". The data-flow shift: the component tree and the data-dependency graph are different shapes, and every state tool is a bypass channel for when they disagree.
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryEngineeringStars0
About this skill
The state-architecture lens for a frontend build — the heart of the system. Use after keel's skeleton works, when designing or auditing state, or when "it's out of sync" bugs keep appearing. The one shift: almost all frontend complexity comes from state having MULTIPLE COPIES (DOM, server DB, URL, localStorage) drifting apart — so the craft is to relentlessly CLASSIFY each piece of state into the one bucket that owns it, minimize the source of truth and derive the rest, and model hard interactions as explicit machines. Triggers on "state management", "Redux / Zustand / Context / signals / Jotai", "where should this state live", "derived state / single source of truth", "this keeps getting out of sync", "useEffect to sync state", "prop drilling", "should this be in the URL", "a form's state", "too many boolean flags / loading and error flags". The data-flow shift: the component tree and the data-dependency graph are different shapes, and every state tool is a bypass channel for when they disagree.
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
The state-architecture lens for a frontend build — the heart of the system. Use after keel's skeleton works, when designing or auditing state, or when "it's out of sync" bugs keep appearing. The one shift: almost all frontend complexity comes from state having MULTIPLE COPIES (DOM, server DB, URL, localStorage) drifting apart — so the craft is to relentlessly CLASSIFY each piece of state into the one bucket that owns it, minimize the source of truth and derive the rest, and model hard interactions as explicit machines. Triggers on "state management", "Redux / Zustand / Context / signals / Jotai", "where should this state live", "derived state / single source of truth", "this keeps getting out of sync", "useEffect to sync state", "prop drilling", "should this be in the URL", "a form's state", "too many boolean flags / loading and error flags". The data-flow shift: the component tree and the data-dependency graph are different shapes, and every state tool is a bypass channel for when they disagree.
About this listing
Category
Engineering
Reported license
Apache-2.0
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI