storyboard

Generates a single HTML page embedding all UX mocks in a scope with audit checklists and gap cards.

Updated May 30, 2026
One-click install
npx skills add https://github.com/chloebrett/snitchos --skill storyboard-chloebrett
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storyboard
Source: https://github.com/chloebrett/snitchos/tree/main/.claude/skills/storyboard
Command: npx skills add https://github.com/chloebrett/snitchos --skill storyboard-chloebrett

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Reviewing a feature that spans multiple UX surfaces normally means opening a dozen mock files in separate tabs and holding the whole flow in your head. This Skill stitches every mock in a scope of work into one scrollable HTML page with live iframes, a flow diagram, per-mock audit checklists, and gap cards for mocks that still need to be produced. ## Core Features & Use Cases - Single-page mock audit: Embeds every existing mock as a live <iframe> in a responsive grid, with an ASCII flow diagram showing how the user moves through the surfaces. - Gap identification: Marks missing mocks with visually distinct gap cards, each carrying brainstorm questions that must be answered before drafting. - Audit checklists: Attaches per-mock checklists tied to design disciplines (critique, clarify, polish, adapt, harden) so reviewers can approve or flag concrete fixes. - Use Case: Before implementing a signup flow (signup → verify email → onboarding), run the skill to produce one reviewable page showing all three mocks side-by-side, flagging the missing error-state mock with questions about its entry points and edge cases. ## Quick Start Ask the assistant to run /storyboard for your scope, for example: create a storyboard for the onboarding v2 scope covering the signup, verify-email, and welcome mocks.

Frequently Asked Questions about storyboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review multiple UX design mocks in one place?▼

Run the storyboard skill with your scope name to generate a single HTML page embedding every mock as a live iframe in a responsive grid. It adds a flow diagram, per-mock audit checklists, and gap cards so you can scroll one page instead of opening many tabs.

When should I create a design storyboard before implementation?▼

Create one before any feature touching two or more UX surfaces begins implementation, or before a planned chunk of work covering multiple surfaces. Skip it for single-mock fixes, pure API or ops work, and exploratory work before scope is settled.

Does the storyboard use screenshots or live mock embeds?▼

It uses live iframes only, never screenshots. Screenshots go stale the moment a mock changes, while embedded iframes stay current and let reviewers click, scroll, and see real behavior.

Why does the ASCII flow diagram break after formatting the HTML?▼

Prettier reformats HTML inside div elements with whitespace-pre classes and destroys ASCII layout. Always wrap flow diagrams in a pre tag, which Prettier leaves untouched, and run prettier --write before committing.

What are the limitations of the storyboard approach?▼

It is a pre-implementation review artifact, so it does not fit features already fully built or work with no UX surface. Very large scopes can make one page unreadable, in which case you split by sub-flow while keeping each split to a single page.