skills.rest
chloebrett
chloebrettCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

storyboard

Embed UX mocks as live iframes with ASCII flow diagrams for review.

3|Updated May 3, 2026
Search Tags:#user experience#design audit#ux#flow diagram#mock review#mockup embedding
One-click install
npx skills add https://github.com/chloebrett/slay --skill storyboard-chloebrett
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storyboard
Source: https://github.com/chloebrett/slay/tree/main/.claude/skills/storyboard
Command: npx skills add https://github.com/chloebrett/slay --skill storyboard-chloebrett

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of reviewing and auditing multiple UX mocks and flows by consolidating them into an interactive, single HTML page, reducing context switching and manual tracking.

Core Features & Use Cases

  • Unified UX Visualization: Embeds multiple mocks as live iframes with a flow diagram, enabling instant comparison and navigation.
  • Gap Analysis & Planning: Identifies missing mocks or states with brainstorm questions to guide next steps before implementation.
  • Design Audit & Coordination: Facilitates pre-implementation review of the entire user flow and design consistency across surfaces.

Quick Start

Ask the AI to generate a storyboard for your current scope to prepare all mocks and flow diagrams before development begins.

Frequently Asked Questions about storyboard

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

FAQPage Schema
How do I consolidate multiple UX mocks into a single reviewable storyboard?▼

To consolidate UX mocks into a storyboard, this Skill embeds multiple mockups as live iframes alongside ASCII flow diagrams into a single HTML page, reducing context switching during design audits.

What is the best way to identify missing user flow states during a design audit?▼

Identifying missing user flow states during a design audit is handled by generating brainstorm questions directly within the storyboard, highlighting incomplete mocks to guide next implementation steps.

Can I embed live iframes of my UI mockups for cross-surface comparison?▼

Yes, you can embed live iframes of UI mockups for cross-surface comparison, allowing instant visual navigation and stakeholder alignment across the entire user experience flow.

How do I generate flow diagrams to visualize user interface projects before development?▼

Generating flow diagrams to visualize user interface projects is achieved by drawing ASCII flow diagrams directly within the unified HTML page, mapping the entire user experience for comprehensive review.

Does this storyboard approach work for pre-implementation gap analysis and stakeholder alignment?▼

Yes, this storyboard approach works for pre-implementation gap analysis and stakeholder alignment by consolidating UX mockups into a single interactive page for comprehensive design audits.

What are the limitations of using ASCII flow diagrams for UX review?▼

ASCII flow diagrams provide a lightweight text-based visualization for UX review, which may lack the visual fidelity of graphical flowcharts but ensures fast embedding and rendering within the HTML storyboard.

Related Skills

Explore More Design & Creative Skills→
carson-sweetcarson-sweet
6

Design Wireframes

Generate self-contained HTML/CSS wireframes from user flow definitions and style specifications.

Community
Advanced
moshehbenavrahammoshehbenavraham
2

voice-call

Initiate and manage voice calls via the crocbot voice-call plugin.

Community
Intermediate
marcusgollmarcusgoll
91

theme-consistency

Enforce theme.yaml CSS variables and ban hardcoded values in prototype mockups.

Community
Advanced
malloydatamalloydata
95

html-data-app-embedding

Embed interactive data applications as auto-sizing iframes with authentication.

Official
Intermediate