Product evolution studio for Claude Code. Visualize, plan, and evolve products with AI.
Two modes. One tool. From first scan to shipped product.
FlowMaster turns Claude Code into a product development studio. Point it at any codebase and it scans every screen, maps every navigation path, and generates interactive flow visualizations you can drag, zoom, and share.
It works in two modes:
| Analyze (v3.1) | Studio (v4.0) | |
|---|---|---|
| Purpose | Quick architecture snapshot | Full product evolution |
| Output | Static HTML or JSON | Interactive studio with persistence |
| Input | Codebase scan | Codebase + voice + screenshots + git |
| Best for | Documentation, onboarding | Product planning, team collaboration |
- Scans Swift, Kotlin, React, Flutter, and Next.js codebases
- Detects navigation patterns automatically (NavigationLink, sheet, fullScreenCover, TabView, useRouter, NavHost, Navigator)
- Extracts features, integrations, and status from every screen
- Identifies UX gaps: dead ends, orphan screens, broken flows, missing feedback
- Node-based flow diagrams powered by @xyflow/react
- Draggable cards with rich detail (features, integrations, status badges)
- SmoothStep edges with descriptive labels
- Color-coded nodes by type (entry, router, tab, flow, modal, sheet, detail, settings)
- Auto-layout algorithm with guaranteed zero overlap
- Interactive canvas with terminal integration (
Cmd+/) - Voice comments via Web Speech API
- Screenshot upload and preview
- Git push/pull with auto-save and auto-commit
- Multi-select cards with shared context
- Undo/Redo (
Cmd+Z/Cmd+Shift+Z) - Local-first persistence (
~/.flowmaster/flows/)
- Onboarding audit: time to value, permission timing, aha moment detection
- Engagement hooks: streaks, progress tracking, gamification, social proof
- Retention analysis: triggers, variable rewards, investment loops (Hooked Model)
- Prioritized recommendations backed by product frameworks (Teresa Torres, Nir Eyal, Nielsen, BJ Fogg)
# Copy the skill file to your Claude Code commands folder
curl -sL https://raw.githubusercontent.com/xiapeli/flowmaster/main/flowmaster.md \
-o ~/.claude/commands/flowmaster.mdOr clone and copy:
git clone https://github.com/xiapeli/flowmaster.git
cp flowmaster/flowmaster.md ~/.claude/commands/Open Claude Code in any project directory and run:
/flowmaster analyze
FlowMaster scans every view, maps navigation paths, and generates an interactive flow diagram at http://localhost:3000.
/flowmaster studio
This creates a persistent project with canvas, terminal, voice, screenshots, and git sync.
FLOWMASTER PIPELINE
SCAN ────> ANALYZE ────> GENERATE ────> AUDIT ────> RECOMMEND
| | | | |
v v v v v
Views UX Gaps flow-viewer Hooks Action Items
+ Nav + Flows + React Analysis + Priority
+ Types + Dead Ends + xyflow + Hooked + File Locations
Scan. Finds all views/screens in your project. Extracts struct names, file paths, view types, features, and integrations.
Analyze. Maps navigation between screens. Detects UX gaps: dead ends, orphan screens, navigation depth > 3 taps, missing error recovery.
Generate. Creates a React + @xyflow/react visualization with rich cards, color-coded by screen type, with guaranteed non-overlapping layout.
Audit. Evaluates adoption hooks (onboarding, engagement, retention) using established product frameworks.
Recommend. Produces prioritized action items with specific file locations and framework citations.
| Command | Description |
|---|---|
/flowmaster |
Show help and current status |
/flowmaster analyze |
Scan codebase and generate detailed analysis |
/flowmaster generate |
Create interactive flow visualization (opens in browser) |
/flowmaster studio |
Launch full v4.0 studio with persistence and git sync |
/flowmaster audit |
Deep UX audit with adoption hook analysis |
Each screen in the flow is color-coded by its role in the architecture:
| Type | Color | Role |
|---|---|---|
| Entry | #22c55e green |
App launch, entry points |
| Router | #10b981 teal |
ContentView, route decisions |
| Main | #f59e0b amber |
MainTabView, primary containers |
| Tab | #f59e0b amber |
Tab content views |
| Flow | #8b5cf6 violet |
Onboarding, wizards, multi-step |
| Modal | #ec4899 pink |
fullScreenCover, modal presentations |
| Sheet | #14b8a6 teal |
.sheet, side panels |
| Detail | #6b7280 gray |
Detail views, push navigation |
| Settings | #64748b slate |
Settings, preferences |
| Component | #71717a zinc |
Internal reusable components |
| Platform | Navigation Patterns Detected |
|---|---|
| iOS (SwiftUI) | NavigationLink, sheet, fullScreenCover, TabView |
| iOS (UIKit) | Storyboard segues, programmatic navigation |
| Android (Compose) | NavHost, navigation-compose |
| React / Next.js | useRouter, Link, pages directory |
| Flutter | Navigator, go_router |
project/
flow-viewer/ # Interactive React app
src/
App.jsx # Nodes, edges, and layout
ScreenNode.jsx # Custom node component with Handles
styles.css # Flow styling
package.json
vite.config.js
index.html
FLOW_ANALYSIS.md # Full analysis report with recommendations
Studio mode (v4.0) adds persistent project storage:
~/.flowmaster/flows/<project>/
flow.json # Nodes and edges (auto-saved)
comments.json # Voice and text comments
assets/ # Screenshots and attachments
> /flowmaster analyze
Scanning project...
Found 42 views across 5 modules.
Generating flow visualization...
Flow viewer running at http://localhost:3000
42 screens mapped
67 navigation edges
3 dead ends detected
2 orphan screens found
> /flowmaster studio
FlowMaster Studio v4.0
Project: my-app
Server: http://localhost:3141
Shortcuts:
Cmd+/ Toggle terminal
Shift+Click Multi-select cards
Cmd+Z Undo
Delete Remove selected
> /flowmaster analyze --format=json --output=docs/architecture.json
> /flowmaster analyze --output=docs/flow.html
- Code is truth. Scans real source files, not assumptions or stale documentation.
- Frameworks over opinions. Every recommendation cites a published framework or heuristic.
- Visual first. See the whole product narrative before diving into code.
- Zero overlap. Layout algorithm guarantees cards never stack or clip (min 420px horizontal, 380px vertical spacing).
- Close the loop. Generate, execute, verify, fix. Repeat until zero errors.
FlowMaster's product audit draws on:
- Teresa Torres -- Continuous Discovery Habits
- Nir Eyal -- Hooked Model (trigger, action, variable reward, investment)
- Jakob Nielsen -- 10 Usability Heuristics
- Steve Krug -- Don't Make Me Think
- BJ Fogg -- Behavior Model (motivation, ability, prompt)
- Sean Ellis -- Growth Hacking / Product-Market Fit
- Apple HIG -- Human Interface Guidelines
- Claude Code CLI
- Node.js >= 18 (for the flow viewer React app)
Contributions are welcome. See CONTRIBUTING.md for guidelines.
"Every screen tells a story. FlowMaster shows the whole narrative."