Does this skill include AI image generation?

The skill provides the UI and logic for image regeneration prompts and history; however, it requires a connected image generation API or service (like the ai-image-gen dependency) to function.

What is the Storyboard Canvas skill used for?

It is used to generate a functional React component for creating visual storyboards, allowing developers to build tools for film and video shot planning using React Flow.

What frameworks are required for this skill?

It is designed for Next.js App Router projects and requires @xyflow/react, shadcn/ui components, and Phosphor Icons.

Can I edit shot details like camera angles and duration?

Yes, the skill generates a dedicated side panel component that allows you to modify all shot metadata, including descriptions, durations, and specific camera angles.

Storyboard Canvas

Name: Storyboard Canvas
Author: mattwoodco

bymattwoodco

•

Design Tools

Builds interactive React Flow canvases for visual storyboarding with AI-powered frame generation and shot management.

Storyboard Canvas is a specialized tool designed to streamline the pre-production workflow for filmmakers, animators, and content creators. It generates a fully functional React Flow environment where users can drag, drop, and sequence individual shot nodes. Each node acts as a visual container for critical cinematography metadata—including camera angles, duration, and frame descriptions—while an integrated side panel allows for real-time editing and AI-driven image regeneration. This skill is ideal for moving from a script to a visual plan directly within a web application, complete with image history and status tracking.

Key Features

01Side panel interface for editing shot metadata and director notes

02Frame history management to track and restore previous versions of shot images

033 GitHub stars

04Integrated AI image regeneration for rapid visual iteration of storyboard frames

05Interactive node-based canvas for visual shot sequencing using React Flow

06Customizable shot nodes with support for camera angles, durations, and frame previews

Use Cases

01Pre-production planning for film, commercials, and digital video content

02Visual prototyping of user journeys and marketing narratives

03Collaborative visual scripting for creative agencies and production teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills storyboard-canvas

For use in Claude.ai and ChatGPT

Download Skill