ux-user-flow_skill
- JavaScript
1
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill matthewharwood/fantasy-phonics --skill ux-user-flow- SKILL.md10.2 KB
Overview
This skill documents navigation and user-flow patterns tailored for single-page, fantasy-themed phonics games. It focuses on state-driven routing, multi-step wizards, progressive disclosure, and game-phase progression to keep kids engaged and oriented. The guidance emphasizes direct DOM references, accessibility, and predictable focus and history handling.
How this skill works
The skill inspects common routing approaches (state machine, hash routing, history API) and pairs them with view rendering and CSS-driven display rules. It outlines phase managers and wizards that gate access by progress, plus progressive disclosure techniques for hints and locked features. Accessibility and focus management are baked in: focus targets are stored as direct references and keyboard navigation patterns are provided.
When to use it
- Designing multi-step onboarding or learning wizards where order and progress matter
- Building game phase progression (word → collision → mutation → story) with unlockable content
- Implementing single-page routing without a framework using hash or history APIs
- Creating accessible menus and keyboard navigation for kid-facing interfaces
- Adding just-in-time help, save/resume, or offline recovery in educational games
Best practices
- Treat app state as the single source of truth; reflect it in body dataset attributes for CSS-driven view toggles
- Store direct element references during construction (no querySelector at runtime) for reliable updates and focus management
- Gate phases and steps using an explicit phase manager so users only access appropriate content
- Provide progressive disclosure and tiered hints based on attempts to avoid overwhelm
- Support browser history and session save/resume so kids can continue where they left off
Example use cases
- A spelling-minigame that unlocks a story scene after completing mutation and collision phases
- A step-wizard for avatar creation with visible progress and keyboard shortcuts for accessibility
- A menu that disables unavailable phases and supports Arrow/Home/End navigation
- A resume prompt on load when a saved session exists, with save points written to local storage
- Crossfade or slide transitions between views to maintain context without jarring kids
FAQ
Hash routing is simpler and reliable for static hosting; use history API if you need cleaner URLs and server support for deep links.
How do I keep keyboard focus predictable during view changes?
Store focus targets as direct references when you construct views and call focus() on the target when showing that view.
When should I reveal advanced options or hints?
Use progressive disclosure: show basic controls first and reveal advanced options only after a baseline progress or repeated failed attempts.
