storyboard-canvas

Create interactive storyboards with React Flow and customizable shot nodes.

3|Updated Feb 14, 2026

Search Tags:#video production #ai image generation #storyboard #visual storytelling #react flow #pre-production

Ready to run

npx skills add https://github.com/mattwoodco/skills --skill storyboard-canvas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: storyboard-canvas
Source: https://github.com/mattwoodco/skills/tree/main/v1-skills/storyboard-canvas
Command: npx skills add https://github.com/mattwoodco/skills --skill storyboard-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-flow, add-shadcn, ai-image-gen, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the video production process by providing a dedicated visual tool for creating and managing storyboards, ensuring clear communication and efficient pre-production.

Core Features & Use Cases

Interactive Canvas: Drag-and-drop nodes represent individual shots with customizable details.
Visual Editing: Edit shot descriptions, durations, and camera angles directly within the canvas or a side panel.
Frame Generation: Regenerate shot frames using AI prompts and access image history.
Use Case: A film director can use this skill to quickly sketch out a scene, defining each shot's visual and temporal elements, and then iterate on frame visuals with AI assistance.

Quick Start

Use the storyboard-canvas skill to create a new storyboard with five initial shots.

Frequently Asked Questions about storyboard-canvas

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

FAQPage Schema

How do I create an interactive storyboard for video pre-production?▼

An interactive storyboard uses a React Flow-based canvas where you drag-and-drop customizable shot nodes. You can define shot details like camera angles and durations, and regenerate frames via AI prompts.

Can I use React Flow to manage visual sequences for film projects?▼

Yes, React Flow facilitates visual pre-production for film projects by providing a canvas to manage visual sequences. You can define individual shots, edit descriptions, and iterate on frame visuals with AI assistance.

What is the best way to iterate on storyboard frames using AI image generation?▼

The best way to iterate on storyboard frames is by using AI image generation to regenerate shot visuals from prompts. This workflow allows you to access image history and update frame visuals directly within the canvas side panel.

Does this storyboard canvas integrate with shadcn/ui components?▼

Yes, the storyboard canvas integrates with shadcn/ui alongside React Flow. This combination provides a visual editing interface where you can manage shot descriptions, durations, and camera angles directly within the canvas or a side panel.

How do I customize shot details like camera angles and durations in a visual storyboard?▼

You can customize shot details directly within the React Flow canvas or a dedicated side panel. This visual editing feature allows you to edit shot descriptions, durations, and camera angles for each individual node representing a shot.