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

storyboard-screen

Designs and renders wireframe screens onto existing SCREEN nodes via the sketch API.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Updating or redesigning a single wireframe screen on a collaborative board normally requires manual drawing; this Skill generates a structured grid-based layout and renders it directly onto an existing SCREEN node through the sketch API. ## Core Features & Use Cases - Grid-Based Screen Design: Composes wireframe layouts on a 50×40 grid using typed elements such as rectangles, text, headlines, buttons, inputs, images, lines, and circles. - Sketch API Rendering: Posts the element array plus a semantic description to the board's sketch endpoint, replacing the node's image and triggering a live node:changed event. - Accessibility Metadata: Writes a prose visual description into the node's meta via a node:changed event so collaborators who cannot see the image understand the screen. - Use Case: After a user flow changes, ask the agent to redesign the login screen on a specific node; it designs the layout, renders it, and updates the node's description in one pass. ## Quick Start Redesign the login screen with email and password fields on SCREEN node <nodeId> of my current board.

Frequently Asked Questions about storyboard-screen

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

FAQPage Schema
How do I render a wireframe screen onto an existing board node?▼

Provide a natural-language description of the screen and the target SCREEN node UUID. The skill designs a 50×40 grid layout and POSTs the elements to the board's sketch endpoint, which replaces the node's image and fires a node:changed event.

What element types can I use in the grid description language?▼

The grid language supports rectangle, text, headline, button, input, image, line, and circle elements positioned on a 50×40 grid. Each type has required fields like gridX and gridY, with optional fill, stroke, and fontSize styling.

Does the storyboard screen skill require the connect skill first?▼

Yes, the connect skill must run first to resolve TOKEN, BOARD_ID, and BASE_URL. The storyboard-screen skill will not proceed until those values are available, and it asks the user for the nodeId if it is missing.

Why can't I update node metadata with a PATCH request?▼

The deployed API only registers GET on the nodes/:nodeId route, so PATCH returns a 404. Instead, metadata updates are sent as a node:changed event to the nodes/events endpoint, resending the node's current title alongside the new description.

What are the limitations of the grid-based wireframe layout?▼

Layouts are constrained to a 50×40 grid (1000×800 px) with coarse 20px units and a fixed set of primitive element types. It suits low-fidelity wireframes but cannot produce pixel-precise or high-fidelity visual designs.

Related Skills

Explore More Design & Creative Skills→
PowerworksPowerworks

storyboard-screen

Designs and renders wireframe screens onto existing SCREEN nodes via the sketch API.

Community
Intermediate
gabrielnsmntogabrielnsmnto
3

ux-create-wireframe

Creates wireframes, interaction flows, and component inventories for developer handoff.

Community
Intermediate
wadebeewadebee
2

shimmy-tool-textual

Maintain the Textual Shimmy tool by preserving its context-first workflow and terminal-aware local-image runtime behavior.

Community
Basic
code-vibe-academycode-vibe-academy
2

designer-ui

Generate Atoms, Molecules, and high-fidelity mockups from wireframes using Atomic Design.

Official
Advanced