storyboard
Visual tool for creating narrative or UI-focused storyboards to map user experiences.
Install
mkdir -p .claude/skills/storyboard && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11784" && unzip -o skill.zip -d .claude/skills/storyboard && rm skill.zipInstalls to .claude/skills/storyboard
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Interactive storyboard creation for exploring narrative arcs, user journeys, and UI flows. Supports "Narrative" (Product Manager style) and "UI Flow" (Mock-Audit style) modes. Use when you need to visualize ideas, define UI elements, or map emotional journeys before implementation.Key capabilities
- →Select between Narrative Mode for emotional arcs or UI Flow Mode for UI surfaces
- →Gather context by asking guided questions about persona, problem, and solution
- →Draft narrative arcs or flow structures
- →Generate visuals for each frame using `chatgpt-cli`
- →Identify missing mocks (gaps) in UI Flow mode
- →Provide brainstorm questions to force design decisions in UI Flow mode
How it works
The skill facilitates interactive storyboarding by allowing the user to select a mode (Narrative or UI Flow), gathering context through guided questions, drafting the storyboard structure, and generating visuals using `chatgpt-cli`.
Inputs & outputs
When to use storyboard
- →Mapping user journeys for new features
- →Visualizing UI flows before coding
- →Aligning team on narrative product vision
About this skill
Storyboard
This skill enables interactive storyboarding to explore ideas and UI elements through narrative storytelling and structured flow analysis.
Quick Start
- Select Mode: Choose between Narrative Mode (6-frame emotional arc) or UI Flow Mode (HTML grid of UI surfaces).
- Gather Context: The agent will ask guided questions one by one to define the persona, problem, and solution.
- Draft: Review the narrative arc or flow structure.
- Visualize: Generate visuals for each frame or mock using
chatgpt-cli.
Modes
- Narrative (PM Style): Best for aligning stakeholders on the human impact and visceral frustration of a problem. Follows a strict 6-frame structure. See narrative-mode.md.
- UI Flow (Mock-Audit): Best for side-by-side review of all UX surfaces in a feature's scope. Uses HTML grids and gap analysis. See ui-flow-mode.md.
Image Generation
When visuals are requested, use the chatgpt CLI with the following syntax:
chatgpt "<prompt>" --model gpt-image-2 --draw --output <filename.png>
Prompt Engineering:
- For Narrative Mode: Use "low-fidelity fat-marker sharpie sketch style, black and white" for speed and clarity.
- For UI Flow Mode: Use "clean high-fidelity UI mockup, modern aesthetic, [platform] style" for visual exploration.
Workflow Instructions
- Interactive Context Gathering: Do NOT assume context. Ask the user questions sequentially:
- Who is the persona?
- What is the specific problem or frustration?
- What is the proposed solution or "Aha!" moment?
- Progressive Disclosure: Keep the conversation focused. Only load the specific mode reference when the user selects it.
- Gap Analysis: In UI Flow mode, explicitly identify missing mocks ("gaps") and provide "brainstorm questions" to force design decisions.
When not to use it
- →When the user does not want to visualize ideas, define UI elements, or map emotional journeys
- →When the user wants to assume context instead of answering guided questions
Prerequisites
Limitations
- →Narrative Mode follows a strict 6-frame structure
- →UI Flow Mode uses HTML grids and gap analysis
- →Visuals are generated using `chatgpt-cli`
How it compares
This skill provides a structured, interactive approach to storyboarding with two distinct modes and automated visual generation, offering a guided process for exploring ideas compared to manual storyboarding.
Compared to similar skills
storyboard side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| storyboard (this skill) | 0 | 3mo | Review | Beginner |
| decisions-visual-plan | 0 | 1mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| penpot-uiux-design | 27 | 6mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
decisions-visual-plan
tensology
Route technical planning and review between Decisions Mermaid viewer, BuilderIO visual-plan/recap skills, and Open Design when the work needs richer artifacts.
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".
ui-ux-designer
sickn33
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.
interactive-portfolio
davila7
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
paywall-upgrade-cro
davila7
When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see page-cro) — this skill focuses on in-product upgrade moments where the user has already experienced value.