skills.rest
Powerworks
PowerworksCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

storyboard

Generates visual storyboards with grid-based sketch screens via a board HTTP API.

Updated Aug 10, 2026
Search Tags:#storyboard#wireframe#user flow#screen design#ux prototyping#sketch generation#board api
One-click install
npx skills add https://github.com/Powerworks/Underwriting --skill storyboard-powerworks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storyboard
Source: https://github.com/Powerworks/Underwriting/tree/main/agentic-modeling/.claude/skills/storyboard
Command: npx skills add https://github.com/Powerworks/Underwriting --skill storyboard-powerworks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually creating storyboard screens for user flows is slow and repetitive. This Skill turns a natural language description like "login flow with 6 screens" into a complete visual storyboard with AI-designed sketch screens, all created through a board HTTP API. ## Core Features & Use Cases - Natural Language to Storyboard: Parses a flow description and screen count from your prompt, then plans and builds each screen automatically. - Grid-Based Screen Design: Generates screen layouts using a 50x40 grid description language with rectangles, text, buttons, inputs, and images. - Chapter and Column Management: Creates or reuses a chapter, manages timeline columns, and places SCREEN nodes via API events. - Use Case: Ask for "checkout flow with 5 screens" and get a chapter containing five sketched screens — cart review, shipping address, payment, confirmation, and order complete — each with a visual layout and semantic description. ## Quick Start Use the storyboard skill to build a login flow storyboard with 4 screens on my board.

Frequently Asked Questions about storyboard

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

FAQPage Schema
How do I create a storyboard from a text description?▼

Provide a flow description and optional screen count, such as "checkout flow with 5 screens". The skill plans each screen's title, grid elements, and visual description, then creates the chapter, columns, and SCREEN nodes through the board HTTP API.

How do I generate sketch screens for a user flow automatically?▼

The skill designs each screen using a 50x40 grid description language with elements like rectangles, text, buttons, and inputs, then posts them to the sketch endpoint. Each screen gets 5-8 elements plus a semantic description stored in node metadata.

Can I add screens to an existing chapter instead of creating a new one?▼

Yes, pass a chapterId in your request and the skill skips chapter creation entirely. It fetches the chapter's timeline data, finds empty columns, and places new SCREEN nodes into available actor cells.

What element types can storyboard screens contain?▼

Screens support rectangle, text, headline, button, input, image, line, and circle elements positioned on a 50x40 grid. Every screen must start with a full white background rectangle, and 5-8 elements per screen is recommended.

Why does the storyboard skill fail before creating any screens?▼

The skill requires the connect skill to run first to resolve TOKEN, BOARD_ID, and BASE_URL. If these values are missing or the board API returns a non-200 response on node creation, the skill stops and reports the error.

Related Skills

Explore More Product & Management Skills→
PowerworksPowerworks
1

connect

Resolves and persists eventmodelers API connection config from inline params or config file.

Community
Intermediate
4armsxlr84armsxlr8

planning

Generate design documents with a 4-stage convergence review loop.

Community
Advanced
tddworkstddworks
38

ios-ux-prototype

Generate interactive HTML prototypes with iPhone mockups and flow arrows for iOS app UX flows.

Official
Intermediate
giantswarmgiantswarm
7

export-to-miro

Create Miro boards from CSV inventories of web pages.

Official
Intermediate