| name | pm-visual-workspace |
| description | Use when presenting PM artifacts visually — OSTs, story maps, roadmaps, prioritization matrices, or competitive landscapes |
PM Visual Workspace
Browser-based visual companion for PM diagrams, matrices, and maps. When a text description doesn't do justice to spatial relationships, trade-offs, or user journeys — render them visually.
Core principle: Show, don't just tell. PM artifacts like story maps, prioritization matrices, and roadmap views are spatial — the user understands them better by seeing them.
Announce at start: "I'm using the pm-visual-workspace skill to show this visually."
When to Use
Decide per-question: would the user understand this better by seeing it than reading it?
Use the browser for content that IS visual:
- Opportunity Solution Trees — hierarchical maps from outcome → opportunity → solution → experiment
- Story Maps — user journey backbone with prioritized stories below
- Prioritization matrices — 2x2 Value vs. Effort, RICE scores visualized
- Roadmaps — Now/Next/Later with swimlanes and dependencies
- Competitive landscapes — Strategic group maps, feature matrices as visual grids
- Kano model diagrams — Satisfaction vs. functionality plotted
- User journey maps — Timeline with emotions, touchpoints, pain points
- Funnel visualizations — AARRR with drop-off percentages
Use the terminal for content that is text:
- Requirements discussions
- Metric definitions
- Trade-off rationale
- Stakeholder update drafts
- Conceptual choices
How It Works
Uses the Superpowers visual companion infrastructure. Requires the scripts from superpowers/skills/brainstorming/scripts/:
start-server.sh — launches the browser serverstop-server.sh — stops the serverserver.cjs — Node.js file-watching serverframe-template.html — page frame with CSS and interactionhelper.js — client-side selection tracking
Install the scripts:
cp -r ~/.config/claude/plugins/superpowers/skills/brainstorming/scripts/ skills/pm-visual-workspace/scripts/
Starting a Session
scripts/start-server.sh --project-dir /path/to/project
Save screen_dir and state_dir. Tell the user to open the URL.
PM Visual Components
Opportunity Solution Tree
<h2>Opportunity Solution Tree — Increase Activation</h2>
<div style="font-family: monospace; padding: 2rem;">
<pre style="line-height: 1.8;">
<b>[OUTCOME]</b>
Increase Activation
│
┌──────────────────┼──────────────────┐
│ │ │
[OPPORTUNITY] [OPPORTUNITY] [OPPORTUNITY]
Don't know Empty state Setup takes
what to do overwhelming too long
│ │ │
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│ │ │ │ │ │
Guided Templates Quick-start Sample Import SSO
tour templates data wizard setup
│ │ │
│ │ │
[A/B test] [Prototype] [Concierge]
3 vs 5 5 users 5 users
steps manual
</pre>
</div>
Story Map
<h2>Story Map — Onboarding Flow</h2>
<table style="width:100%; border-collapse: collapse;">
<tr style="background:#1a1a2e; color:white;">
<th>Sign Up</th><th>Setup</th><th>First Action</th><th>Invite</th>
</tr>
<tr style="background:#e8f5e9;">
<td>Email + password</td><td>Create workspace</td><td>Create first project</td><td>Invite by email</td>
</tr>
<tr style="background:#e8f5e9;">
<td>Google SSO</td><td>Import data</>Use templateShare link
⬆ MVP — above this line ⬆
SAML SSOCustom brandingAdvanced templatesTeam permissions
Prioritization Matrix (2x2)
<h2>Value vs. Effort Matrix</h2>
<div style="display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:8px; height:400px;">
<div style="background:#e8f5e9; padding:1rem; border-radius:8px;">
<h3>Quick Wins</h3>
<ul><li>Add Google SSO</li><li>Fix top 5 bugs</li><li>Export CSV</li></ul>
</div>
<div style="background:#e3f2fd; padding:1rem; border-radius:8px;">
<h3>Big Bets</h3>
<ul><li>AI recommendations</li><li>Mobile app</li><li>Public API</li></ul>
</div>
<div =>
Fill-ins
Dark modeCustom emoji
Time Sinks
Custom reporting engineOn-prem deployment
Now/Next/Later Roadmap
<h2>Product Roadmap</h2>
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem;">
<div style="background:#e8f5e9; padding:1rem; border-radius:8px;">
<h3>Now</h3>
<p style="color:#666; font-size:0.8rem;">High confidence</p>
<div class="card" style="margin:0.5rem 0; padding:0.5rem;">
<b>Onboarding redesign</b><br>
<small>Target: +25% activation</small>
</div>
<div class="card" style="margin:0.5rem 0; padding:0.5rem;">
<b>Performance sprint</b><br>
<small>Target: P95 < 2s</small>
</div>
</div>
Next
Medium confidence
Team collaboration
Needs more discovery
Later
Low confidence
Mobile app
Exploratory
Competitive Feature Matrix
<h2>Competitive Feature Comparison</h2>
<table style="width:100%; border-collapse:collapse;">
<tr style="background:#1a1a2e; color:white;">
<th>Feature</th><th>Us</th><th>Competitor A</th><th>Competitor B</th>
</tr>
<tr><td>Real-time collaboration</td><td>✅</td><td>✅</td><td>⚠️</td></tr>
<tr><td>AI recommendations</td><td>✅</td><td>❌</td><td>❌
Offline mode❌✅✅
API access✅✅✅
Custom dashboards⚠️✅❌
✅ Full ⚠️ Partial ❌ Missing
Tips
- Scale fidelity to the question — wireframe-level for brainstorming, polished for executive review
- 2-4 options max per comparison screen
- Explain the question on each page — "Which prioritization feels right?" not "Pick one"
- Iterate before advancing — if feedback changes the view, write a new version
- Use real data when it's available — placeholder content hides real issues
- Semantic file names:
ost-activation.html, story-map-v2.html, roadmap-q3.html
- Never reuse filenames — each screen gets a fresh file
Integration
This skill provides PM-specific visual components. The server infrastructure is shared with Superpowers' visual companion. See the full companion guide at skills/brainstorming/visual-companion.md (if Superpowers is installed) for details on the interaction loop, events format, CSS classes, and cleanup.
Cleaning Up
scripts/stop-server.sh $SESSION_DIR
