7a336e6e/frontend-landing/managing-state
frontend-landing/managing-state/SKILL.md
# 🧠 Managing State > Navigation engine, scroll hijacking, and state management for the storybook. --- ## Sub-Skills | # | File | What It Covers | |---|------|----------------| | 01 | [Navigation Engine](01-navigation-engine.md) | Wheel, touch, keyboard handlers + scroll detection + transition lock | --- ## State Overview The entire storybook has surprisingly little state: | State | Type | Purpose | |-------|------|---------| | `introState` | `"loading" \| "playing" \| "done"` | Controls
$ install --global
skillsauthnpx skillsauth add 7a336e6e/skills frontend-landing/managing-stateInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
70%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 26, 2026, 1:41 AM182.4s2 files scanned
SKILL.md
🧠 Managing State
Navigation engine, scroll hijacking, and state management for the storybook.
Sub-Skills
| # | File | What It Covers | |---|------|----------------| | 01 | Navigation Engine | Wheel, touch, keyboard handlers + scroll detection + transition lock |
State Overview
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?
isTransitioningchanges rapidly but doesn't need to trigger re-renderslastWheelTimeis a timestamp checked synchronously — a state update would be too slowtouchStartYis saved on touchstart, read on touchend — no render needed between
Next Step
Start with → 01 — Navigation Engine
Related Skills
7a336e6e/Test Driven Development
development
VerifiedTrustedCommunity
Implement features using the Red-Green-Refactor cycle to ensure testability and correctness from the start.
1SKILL.mdUpdated Mar 25, 2026
7a336e6e/task-tracking
data-ai
VerifiedTrustedCommunity
Manage the `tasks.md` ledger with strict locking and collision avoidance protocols to allow multiple agents to work in parallel safely.
1SKILL.mdUpdated Mar 25, 2026
7a336e6e/git-workflow
development
VerifiedTrustedCommunity
The git-workflow skill defines branching conventions, commit message formats, and pull request standards that all agents must follow for consistent version control.
1SKILL.mdUpdated Mar 25, 2026
7a336e6e/environment-config
development
VerifiedTrustedCommunity
The environment-config skill standardizes how agents manage environment variables, secrets, and application configuration across local development and deployed environments.
1SKILL.mdUpdated Mar 25, 2026