Building Walkthroughs
Overview
Turns any app into walkthroughs that show how all of it works. From the code, the skill derives areas (the app's navigation), actors, tasks, variations, and journeys, then writes one walkthrough per task until every route and screen is covered or recorded as a gap with a reason. A copied Vite viewer draws the areas as a full-screen map, spotlights a journey's ordered path when one is selected, and opens each walkthrough beside the map, with steps as one card per actor. Re-checking the app automatically belongs to E2E tests.
Dependencies
| Item |
Required |
When |
How |
| Node.js 20.19+ with npm |
required |
Viewer, npm run check, npm run index |
https://nodejs.org |
Setup
| Item |
Required |
When |
How |
| Standing rule |
required |
Create |
Add - When a change alters the app's screens, routes, or user tasks, run the building-walkthroughs Update recipe in the same work. to root AGENTS.md (create when missing) and to root CLAUDE.md when it exists without importing AGENTS.md; skip a file that has it |
Agent workflow
Follow this skill when the user names it, or references a file under a walkthroughs root marked by an index.md with this skill's author signature. Works wherever the agent can read the app's code and write repository files. Resolve every required Dependencies and Setup row, read walkthrough-contract.md first, then match one Recipes row and open exactly that reference.
Recipes
| Intent |
Example phrasing |
Read |
| Create |
"Create walkthroughs for this app", "Build walkthroughs", "Add walkthroughs for billing" |
creating-walkthroughs.md |
| Guide |
"Walk me through sending an invoice", "Guide me through the getting-paid journey" |
guiding-walkthrough.md |
| Update |
"Update the walkthroughs for this change", "Split this walkthrough", "Move this to the Invoices area" |
updating-walkthroughs.md |
Reference index
Contract
walkthrough-contract.md — root, layout, model, inputs, coverage, lenses, index and walkthrough frontmatter, setup tree, cutting, writing and step format, sync, viewer, checklist.
Templates
