Map Your App's User Flows as Storyboards with the /visual-plan Skill

Author: steve8708

Looking at one screen at a time makes it hard to understand how a full user flow actually behaves. This video shows the /visual-plan skill for Claude Code, which reads your code and wireframes an entire flow as a storyboard. You describe the flow you want to see, the agent maps every step and code path, and you spot problems you would otherwise miss. The example here catches a signup flow still asking for an organization the author thought he had made automatic.

Running the skill in Claude Code

The skill runs as a slash command inside Claude Code. You open the terminal, type /visual-plan, and describe the flow you want mapped. The agent then looks through your code and builds a storyboard from what it finds, rather than from a single screenshot you happen to be staring at.

The storyboard view

The output opens in the browser as a visual storyboard. The example is a "Signup Flow Storyboard" covering the end-to-end path: auth entry, email verify, org resolution, domain join, multi-org create, and org-specific onboarding. Each step renders as a wireframe card connected to the next, so you can follow the branches across the whole flow at once.

You can zoom into any single step to read its detail. Here the Auth Entry screen shows the actual sign-in form fields the agent pulled from the code, including the email, password, and continue-with-Google options.

Why this matters

Sign up, onboarding, and setup flows are some of the most important experiences in an app and usually the least examined. They are hard to reproduce across every user type, feature flag, and edge case, so problems hide in branches nobody walks through manually. A storyboard surfaces all those code paths in one simple view. In the video the author uses it to find a flow still asking users for an organization when that step was supposed to be automatic, then has the agent fix it. The skill works in three modes: understand the current state, plan a new state, or recap updates that were made. It is open source on the author's GitHub at github.com/BuilderIO/skills.

Key Takeaways

• The /visual-plan skill turns a described user flow into a connected storyboard by reading your actual code, not single screenshots.
• It surfaces every branch and code path in one view, which is where onboarding and setup bugs tend to hide.
• The author used it to catch a signup flow still requesting an organization that should have been automatic, then fixed it with the agent.
• It runs as a slash command in Claude Code, supports current-state, future-state, and recap modes, and is open source at github.com/BuilderIO/skills.