A toolkit for documenting user personas, writing Agile user stories, and mapping user journeys — all as web components you can drop into any HTML page.
| Type | Functional |
|---|---|
| Version | 1.0.0 |
| JS | packs/ux-planning.full.js |
What's Included
Components
<user-persona>— visual persona cards with auto-generated avatars, quote blocks, goals, frustrations, and behaviors<user-story>— Agile story cards in "As a / I want / so that" format with priority, status, and point badges<user-journey>— journey maps with SVG emotion curves and phase detail grids<empathy-map>— four-quadrant empathy maps (Says, Thinks, Does, Feels) with optional flip-to-edit interaction<impact-effort>— 2×2 prioritization matrix with drag-and-drop between Quick Wins, Big Bets, Fill-Ins, and Money Pit quadrants<kanban-board>— columnar drag-and-drop board with user-defined columns, count badges, and optional WIP limits<story-map>— horizontal user story map with activity columns and drag-and-drop reorder and transfer
Loading
<script type="module" src="/cdn/packs/ux-planning.full.js"></script>import { activateBundle } from '/cdn/vanilla-breeze.js'await activateBundle('ux-planning')Component Interaction
The six components are designed to cross-reference each other on the same page. Personas define the "who," empathy maps capture the "why," stories define the "what," journeys map the "how," impact/effort matrices prioritize the "when," and story maps organize the "where."
user-persona (id="persona-sarah") | | referenced by persona / persona-id attributes v empathy-map (persona="Sarah Chen", persona-id="persona-sarah") | | pain points inform prioritization v user-story (story-id="PROJ-142", persona="Sarah Chen") | | stories placed in quadrants and columns +---> impact-effort (children with data-quadrant) +---> story-map (sections with data-activity) | | referenced by story-ids attribute v user-journey (persona-id="persona-sarah", story-ids="PROJ-142") | | per-phase storyIds in JSON data v Phase grid cells link back to individual storiesSet the id attribute on your <user-persona> elements and use matching persona-id values on <user-journey> and <empathy-map> to create navigable anchor links. Story IDs set on <user-story> via story-id are referenced by <user-journey> through the story-ids attribute and per-phase storyIds arrays in the JSON data. Use <user-story> elements as draggable children inside <impact-effort> and <story-map> for rich, interactive planning boards.
Full Planning Page Example
A complete UX planning page using all six components together:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Sprint Planning — Project Alpha</title> <link rel="stylesheet" href="/cdn/vanilla-breeze.css"> <script type="module" src="/cdn/vanilla-breeze.js"></script> <script type="module" src="/cdn/packs/ux-planning.full.js"></script></head><body> <main> <h1>Project Alpha — UX Planning</h1> <!-- Persona --> <section> <h2>Target Persona</h2> <user-persona id="persona-sarah" name="Sarah Chen" role="Product Manager" age="34" location="San Francisco, CA" quote="I need tools that help me stay organized."> <ul slot="goals"> <li>Streamline team communication</li> <li>Track project progress efficiently</li> </ul> <ul slot="frustrations"> <li>Too many disconnected tools</li> <li>Difficulty getting stakeholder buy-in</li> </ul> </user-persona> </section> <!-- User Stories --> <section> <h2>Sprint Backlog</h2> <user-story story-id="PROJ-142" persona="Sarah Chen" action="view all project timelines in one dashboard" benefit="I can quickly identify bottlenecks" priority="high" status="in-progress" points="5" epic="Dashboard"> <ul slot="acceptance-criteria"> <li>Dashboard loads within 2 seconds</li> <li>All active projects are displayed</li> </ul> </user-story> <user-story story-id="PROJ-156" persona="Sarah Chen" action="export project reports as PDF" benefit="I can share progress with stakeholders offline" priority="medium" status="to-do" points="3" epic="Reporting"> <ul slot="acceptance-criteria"> <li>PDF includes charts and timeline</li> <li>Export completes in under 5 seconds</li> </ul> </user-story> </section> <!-- Journey Map --> <section> <h2>User Journey</h2> <user-journey title="Dashboard Adoption Journey" persona="Sarah Chen" persona-id="persona-sarah" summary="From discovery to daily usage of the project dashboard" story-ids="PROJ-142,PROJ-156" src="/data/journey-dashboard.json"> </user-journey> </section> </main></body></html>Recipes
These planning surfaces are built entirely from existing VB primitives — no additional components needed. Copy the markup pattern and adapt it to your project.
Kanban Board
A sprint board using <drag-surface> columns with <user-story> cards. Drag stories between Backlog, In Progress, Review, and Done. Column counts update automatically on transfer.
<section data-layout="grid" data-layout-min="15rem" data-layout-gap="m"> <section data-layout="stack" data-layout-gap="s"> <h3>Backlog <output>3</output></h3> <drag-surface group="sprint" aria-label="Backlog" data-layout="stack" data-layout-gap="xs"> <user-story draggable="true" data-id="PROJ-201" story-id="PROJ-201" persona="Sarah Chen" action="view all project timelines in one dashboard" priority="high" status="to-do" points="5" detail="minimal"> </user-story> </drag-surface> </section> <!-- repeat for In Progress, Review, Done --></section>Retrospective Board
A 3-column retro board with color-tinted columns for What Went Well, What Didn't Go Well, and Action Items. Freeform <article> cards with a bottom-of-column form to add new items.
<section data-layout="grid" data-layout-min="15rem" data-layout-gap="m"> <section style="background: color-mix(in oklch, var(--color-success) 8%, var(--color-surface))" data-layout="stack" data-layout-gap="s"> <h3>What Went Well <output>3</output></h3> <drag-surface group="retro" aria-label="What Went Well" data-layout="stack" data-layout-gap="xs"> <article class="retro-card" draggable="true" data-id="good-1"> Daily standups kept the team aligned </article> </drag-surface> <form> <input type="text" placeholder="Add item..." aria-label="Add item to What Went Well"> </form> </section> <!-- repeat for What Didn't Go Well, Action Items --></section>SWOT Analysis
A 2×2 strategic planning grid mapping Strengths, Weaknesses, Opportunities, and Threats across Internal/External and Helpful/Harmful axes. Pure CSS layout with semantic sections and color-tinted quadrants.
<section class="swot-grid" style="display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; overflow:hidden;"> <section data-quadrant="strengths" aria-label="Strengths: Internal, Helpful"> <h3>Strengths</h3> <ul> <li>Experienced cross-functional team</li> <li>Strong existing user base</li> </ul> </section> <section data-quadrant="opportunities" aria-label="Opportunities: External, Helpful"> <h3>Opportunities</h3> <ul> <li>Growing market demand</li> </ul> </section> <section data-quadrant="weaknesses" aria-label="Weaknesses: Internal, Harmful"> <h3>Weaknesses</h3> <ul> <li>Mobile experience lags desktop</li> </ul> </section> <section data-quadrant="threats" aria-label="Threats: External, Harmful"> <h3>Threats</h3> <ul> <li>Well-funded competitor entering market</li> </ul> </section></section>Stakeholder Map
A Power/Interest matrix using four <drag-surface> quadrants. Stakeholder cards are plain <article> elements with name and role. You can also use <user-persona compact> as children for richer stakeholder representation.
<section class="sh-grid" style="display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; overflow:hidden;"> <section data-quadrant-zone="keep-satisfied"> <p>Keep Satisfied <small>High power, Low interest</small></p> <drag-surface group="stakeholders" aria-label="Keep Satisfied" data-layout="stack" data-layout-gap="xs"> <article draggable="true" data-id="sh-3"> <strong>CFO — Maria Lopez</strong> </article> </drag-surface> </section> <section data-quadrant-zone="manage-closely"> <p>Manage Closely <small>High power, High interest</small></p> <drag-surface group="stakeholders" aria-label="Manage Closely" data-layout="stack" data-layout-gap="xs"> <user-persona compact draggable="true" data-id="sh-1" name="Sarah Chen" role="Product Manager"> </user-persona> </drag-surface> </section> <!-- repeat for Monitor, Keep Informed --></section>Decision Matrix
A weighted scoring table built on <data-table>. Criteria columns carry weights; cells show raw and weighted scores. Sort by Total to rank options. Adjust weights interactively with the form below the table.
<data-table> <table data-filterable> <caption>Weighted Decision Matrix</caption> <thead> <tr> <th data-sort="string">Option</th> <th data-sort="number">Performance <small>(w:3)</small></th> <th data-sort="number">Cost <small>(w:2)</small></th> <th data-sort="number">Total</th> </tr> </thead> <tbody> <tr> <td>Astro + Islands</td> <td data-sort-value="15">5 (15)</td> <td data-sort-value="8">4 (8)</td> <td data-sort-value="23"><strong>23</strong></td> </tr> </tbody> </table></data-table>Risk Register
A risk tracking table using <data-table> with expandable rows for mitigation details. Score is computed as Likelihood × Impact. Status badges use data attributes for color styling. Sort, filter, and paginate out of the box.
<data-table> <table data-filterable data-paginate="8"> <caption>Project Risk Register</caption> <thead> <tr> <th data-sort="string">ID</th> <th data-sort="string">Risk</th> <th data-sort="number">Likelihood</th> <th data-sort="number">Impact</th> <th data-sort="number">Score</th> <th data-sort="string">Owner</th> <th data-sort="string">Status</th> </tr> </thead> <tbody> <tr data-expandable> <td>R-001</td> <td>Key developer leaves mid-sprint</td> <td data-sort-value="3">Medium (3)</td> <td data-sort-value="5">Critical (5)</td> <td data-sort-value="15"><strong>15</strong></td> <td>Sarah Chen</td> <td><mark data-risk-status="active">Active</mark></td> </tr> <tr data-expand-content hidden> <td colspan="7"> <dl> <dt>Mitigation</dt> <dd>Cross-train team members on critical modules</dd> <dt>Trigger</dt> <dd>Developer gives notice or absence exceeding 3 days</dd> </dl> </td> </tr> </tbody> </table></data-table>When to Use
Load the UX Planning pack when you are building sprint planning pages, design documentation, stakeholder presentations, or any page that needs structured Agile artifacts. All components support a compact attribute for dashboard-style layouts where space is limited. The recipes above demonstrate how existing VB primitives cover kanban boards, retrospective boards, SWOT analysis, stakeholder mapping, decision matrices, and risk registers without additional components. For general-purpose sites that do not need UX planning artifacts, skip this pack entirely.
Roadmap
Gantt Chart — a timeline visualization with range bars, grouped rows, and milestone markers is planned as a future addition. It requires a time-axis rendering system not currently covered by existing primitives and will be built after the recipe patterns above have been validated in production use.