The entire storybook has surprisingly little state:
State
Type
Purpose
introState
"loading" | "playing" | "done"
Controls intro sequence visibility
activePage
number
Current scene index (0-based)
isTransitioning
ref<boolean>
Lock to prevent double-navigation
lastWheelTime
ref<number>
Debounce wheel events
touchStartY
ref<number>
Touch swipe start position
No context providers. No state management libraries. Everything lives in the orchestrator component's local state.
Why Refs for Transition/Wheel?
isTransitioning changes rapidly but doesn't need to trigger re-renders
lastWheelTime is a timestamp checked synchronously — a state update would be too slow
touchStartY is saved on touchstart, read on touchend — no render needed between
Next Step
Start with → 01 — Navigation Engine
1---2name: managing-state-23description: 🧠 Managing State4---5# 🧠 Managing State67> Navigation engine, scroll hijacking, and state management for the storybook.89---1011## Sub-Skills1213| # | File | What It Covers |14|---|------|----------------|15| 01 | [Navigation Engine](01-navigation-engine.md) | Wheel, touch, keyboard handlers + scroll detection + transition lock |1617---1819## State Overview2021The entire storybook has surprisingly little state:2223| State | Type | Purpose |24|-------|------|---------|25| `introState` | `"loading" \| "playing" \| "done"` | Controls intro sequence visibility |26| `activePage` | `number` | Current scene index (0-based) |27| `isTransitioning` | `ref<boolean>` | Lock to prevent double-navigation |28| `lastWheelTime` | `ref<number>` | Debounce wheel events |29| `touchStartY` | `ref<number>` | Touch swipe start position |3031No context providers. No state management libraries. Everything lives in the orchestrator component's local state.3233### Why Refs for Transition/Wheel?3435- `isTransitioning` changes rapidly but doesn't need to trigger re-renders36- `lastWheelTime` is a timestamp checked synchronously — a state update would be too slow37- `touchStartY` is saved on touchstart, read on touchend — no render needed between3839---4041## Next Step4243Start with → [01 — Navigation Engine](01-navigation-engine.md)
Run npx skillmds@latest add 7a336e6e/managing-state-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
🧠 Managing State It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
7a336e6e (@7a336e6e) published this skill. Their other Agent Skills are listed on their SkillMD profile.
7a336e6e