← ClaudeAtlas

phase-previewlisted

Preview a signed-off design one release phase at a time — cut it down into a series of phase screens, each showing only what exists by that phase with the layout untouched, then put them on a scrubber you drag to watch the screen fill in release by release. Use when the user wants a Phase 1 / MVP version of an existing wireframe or mockup, phased or staged screens, a design sliced by release phase or story map, or wants to see what a screen looks like before later features land.
Cavalry-Collective/visual-stack · ★ 11 · AI & Automation · score 72
Install: claude install-skill Cavalry-Collective/visual-stack
One design in, one screen per phase out. Each phase file shows everything available **by** that phase and nothing that isn't, in exactly the positions the approved design already put them — so a phase screen is the real build target for that release, not a redrawing of it. Nothing here is drawn: this is the approved design with the later releases taken out, which is why it can be checked mechanically rather than by eye. ``` base.html ──┬──► phase-1/base.html only what ships in phase 1 ├──► phase-2/base.html phase 1 + phase 2 └──► phase-3/base.html phase 1 + 2 + 3 ( = the base, if phases cover it all ) ``` **Subtract only.** Nothing is moved, resized, restyled or repositioned; nothing new is invented. That is the entire discipline of this skill, and §4 proves it mechanically rather than trusting the eye. ## 1 · Resolve the two inputs **The base wireframe** — one self-contained HTML file. If the user hasn't named one, ask; don't guess among the files in `design/`. Never work from an already-phased file: every phase is cut from the original. **The phases, and what belongs to each.** In priority order: 1. A **story map** (`*.json` from `/vstack:user-story-map`) — `phases[]` gives the order and goals, `stories[]` give what lands when. This is the best input; ask for one if a story map exists. 2. A **spec** with P1/P2/P3 priorities, or a roadmap. 3. **The user tells you** the phases in the conversation. If none of those exist, stop and a