UX Planning Pack

A complete toolkit for documenting research, planning work, tracking execution, and reviewing designs — all as web components you can drop into any HTML page.

Type	Functional
Components	11
JS	`packs/ux-planning.full.js`
CSS	`packs/ux-planning.full.css`

System Map

The 11 components form a connected system that covers the full product workflow — from understanding users to shipping work. Components cross-reference each other via persona-id, story-id, item-id, and story-ids attributes, creating navigable links across the page.

RESEARCH                        PRODUCT                         ENGINEERING
  ─────────                       ───────                         ───────────

user-persona ─────────┬──────── user-story ──────────────────── work-item
  (who they are)        │         (what they need)                (how we build it)
       │                │              │                               │
       │  persona-id    │  persona-id  │  story-ids on children        │  story-ids
       v                v              v                               v
  empathy-map      user-journey   story-map ·······> kanban-board    gantt-chart
  (how they feel)  (their path)   (plan the work)    (track status)  (schedule it)
                                       │                               │
                                       │  items can be user-story      │  data-story-ids
                                       │  OR work-item children        │  data-item-ids
                                       v                               v
                                  impact-effort                   review-surface
                                  (prioritize)                    (annotate designs)

Cross-Reference Attributes

Attribute	On	Links To	Mechanism
`persona-id`	user-story, empathy-map, user-journey	user-persona	Fragment anchor (`#persona-id`)
`story-ids`	user-journey, work-item	user-story	Comma-separated IDs, rendered as anchor chips
`data-story-ids`	gantt-chart `<tr>`	user-story	Parsed into task data model
`data-item-ids`	gantt-chart `<tr>`	work-item	Parsed into task data model
`story-id` / `item-id`	user-story / work-item	(self)	Auto-sets HTML `id` for inbound links

What's Included

Research Components

<user-persona> — visual persona cards with auto-generated avatars, demographics, goals, frustrations, and behaviors
<empathy-map> — four-quadrant empathy maps (Says, Thinks, Does, Feels) with optional flip-to-edit
<user-journey> — journey maps with SVG emotion curves and phase detail grids

Work Definition

<user-story> — Agile story cards in "As a / I want / so that" format with priority, status, and linked persona
<work-item> — engineering work cards for tasks, bugs, chores, spikes, and features with linked stories

Planning & Prioritization

<story-map> — horizontal story map with activity columns and drag-and-drop
<impact-effort> — 2×2 prioritization matrix with drag-and-drop quadrants

Execution & Tracking

<kanban-board> — columnar drag-and-drop board with WIP limits and count badges
<gantt-chart> — HTML-first timeline with bars, milestones, groups, dependencies, and today marker

Review

<review-surface> — pin-based annotation overlay for collaborative design review with pluggable persistence

Loading

Cherry-pick individual components. If you only need one component, load it directly — for example, /cdn/components/work-item.js — without the full pack.

Workflow: From Research to Review

The pack is designed around a natural workflow. Use the right components for each phase:

Phase	Question	Components
Research	"Who are our users and what do they experience?"	user-persona, empathy-map, user-journey
Define	"What should we build and why?"	user-story, work-item
Plan	"What work exists and where does it fit?"	story-map, impact-effort
Execute	"What’s the status of our current work?"	kanban-board, gantt-chart
Review	"Does the output match the intent?"	review-surface

Story Map vs. Kanban Board

Both display cards in columns, but they answer different questions:

	Story Map	Kanban Board
Organizes by	Activity / workflow phase	Status / process stage
Answers	"What work exists and where does it fit?"	"What’s the state of our current work?"
When used	Sprint planning, roadmap review	Daily standups, execution tracking
Typical flow	Discover → Design → Build → Validate	Backlog → In Progress → Review → Done

Use the story map to plan what to build across activities, then move work to a kanban board to track execution through status stages.

User Story vs. Work Item

Both are card components, but they represent different levels of work:

	User Story	Work Item
Format	"As a [persona], I want [action] so that [benefit]"	Title + type + description
Represents	A product need from the user’s perspective	A unit of engineering work
Types	All are stories	task, bug, chore, spike, feature
Links	`persona-id` → user-persona	`story-ids` → user-story

A single user story may decompose into multiple work items. Some work items (tech debt, bugs, ops) exist independently of any story. Both can be used as children inside kanban boards, story maps, and impact-effort matrices.

Full Planning Page Example

A complete UX planning page connecting personas, stories, work items, and a Gantt schedule:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sprint Planning &mdash; Project Alpha</title>
  <link rel="stylesheet" href="/cdn/vanilla-breeze.css">
  <link rel="stylesheet" href="/cdn/packs/ux-planning.full.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 &mdash; Sprint 4 Planning</h1>

<user-persona
      id="persona-sarah"
      role="Product Manager"
      age="34"
      location="San Francisco, CA"
      compact>
      <h2 slot="name">Sarah Chen</h2>
      <p slot="quote">I need tools that help me stay organized.</p>
      <ul slot="goals">
        <li>Streamline team communication</li>
      </ul>
      <ul slot="frustrations">
        <li>Too many disconnected tools</li>
      </ul>
    </user-persona>

<user-story
      story-id="PROJ-142"
      persona-id="persona-sarah"
      priority="high"
      status="in-progress"
      points="5"
      epic="Dashboard">
      <span slot="persona">Sarah Chen</span>
      <span slot="action">view all project timelines in one dashboard</span>
      <span slot="benefit">I can quickly identify bottlenecks</span>
    </user-story>

<work-item
      item-id="PROJ-42"
      type="task"
      status="in-progress"
      priority="high"
      assignee="Sarah Chen"
      estimate="5"
      story-ids="PROJ-142"
      compact>
      <h3 slot="title">Implement search API endpoint</h3>
    </work-item>

<work-item
      item-id="PROJ-43"
      type="bug"
      priority="critical"
      status="to-do"
      assignee="Tom Rivera"
      compact>
      <h3 slot="title">Fix login redirect on Safari</h3>
    </work-item>

<gantt-chart title="Sprint 4 Schedule" show-today show-progress>
      <table>
        <thead>
          <tr><th>Task</th><th>Start</th><th>End</th><th>Progress</th></tr>
        </thead>
        <tbody>
          <tr data-task-id="PROJ-42" data-status="in-progress"
              data-story-ids="PROJ-142" data-item-ids="PROJ-42">
            <td>Search API</td>
            <td><time datetime="2026-04-07">Apr 7</time></td>
            <td><time datetime="2026-04-18">Apr 18</time></td>
            <td><progress value="40" max="100">40%</progress></td>
          </tr>
          <tr data-task-id="PROJ-43" data-status="to-do"
              data-item-ids="PROJ-43">
            <td>Safari login fix</td>
            <td><time datetime="2026-04-09">Apr 9</time></td>
            <td><time datetime="2026-04-11">Apr 11</time></td>
            <td><progress value="0" max="100">0%</progress></td>
          </tr>
        </tbody>
      </table>
    </gantt-chart>

<review-surface editable adapter="local"
      storage-key="sprint-4-review" author="Sarah Chen">
      <img src="/comps/dashboard-v3.png"
           alt="Dashboard design comp" />
    </review-surface>
  </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.

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.

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.

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.

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.

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, project dashboards, or any page that needs structured planning artifacts. All components support a compact attribute for dashboard-style layouts where space is limited. For general-purpose sites that do not need planning artifacts, skip this pack entirely.