thkt/use-workflow-plan-preview

use-workflow-plan-preview

Workflow helper invoked by /think Step 11. Renders SOW.md + Spec.md as an integrated, browser-friendly view via the Astro project at ~/.claude/workspace/views/.

Not for direct user invocation — /think is the only caller.

Args (passed by caller /think)

$1: planning slug (e.g. 2026-05-08-issue-53-annotation-foundation)

Steps

1. Read ~/.claude/workspace/planning/$1/sow.md and spec.md
2. Decide a short-slug from the trailing keywords of $1
   • Example: 2026-05-08-issue-53-annotation-foundation → issue-53 or annotation-foundation
3. Copy the template
   • source: ${CLAUDE_SKILL_DIR}/templates/spec.mdx
   • dest: ~/.claude/workspace/views/src/content/<short-slug>.mdx
4. Fill the frontmatter from sow.md
   • title: H1 line
   • subtitle: First sentence of Why → Outcome (a)
   • status: Below ## Status (draft / approved / done)
   • updatedAt: Today's date YYYY-MM-DD
   • sessionId: From Session: line
   • issueUrl: GitHub URL in Reference
5. Fill each tab placeholder (mapping below)
6. Start or verify the dev server: cd ~/.claude/workspace/views && bun run dev
   • Skip if port 4321 is already running
7. Share http://localhost:4321/spec/<short-slug> with the user

Tab → source mapping

| Tab | sow.md / spec.md section | | ------------ | --------------------------------------------------------------------------- | | overview | sow.md Why / Approach / Background | | scope | sow.md Scope (In/Out) / Three-Tier Boundaries | | ac | sow.md Acceptance Criteria | | phases | sow.md Implementation Plan (Phase 1/2/3) | | spec | spec.md Functional Requirements / Validation / Non-Functional / Assumptions | | domain | spec.md Domain Model (Entities / Business Rules) | | tests | spec.md Test Scenarios | | risks | sow.md Risks + spec.md Reassessment Triggers | | traceability | spec.md Traceability Matrix + Implementation Phase × FR |

Components

| Component | Usage | | --------- | --------------------------------------------------------------------------------------- | | TabPanel | <TabPanel id="overview" initial>...</TabPanel> | | Pill | <span class="pill-ac">AC-1</span> (or <Pill variant="ac">) | | Tier | <span class="tier-always">必須</span> (or <Tier variant="always" />) | | Term | <span class="term" data-tip="...">用語</span> | | Card | <div class="card"><div class="label">X</div><p>...</p></div> | | Card grid | <div class="card-grid">...8 cards...</div> | | SearchBox | <SearchBox id="fr-filter" placeholder="..." /> | | ChipGroup | <ChipGroup id="test-chips" chips={[{type, label}, ...]} initial="all" /> | | PhaseFlow | <PhaseFlow phases={[{num, title, subtitle, bullets, outcome, tone}]} caption="..." /> | | DataFlow | <DataFlow boxes={[...]} edges={[...]} /> |

tone 値は component ごとに異なる。未定義値は runtime error。

| Component | 許可される tone | | --------- | --------------------------------------------- | | PhaseFlow | accent / warn / pass | | DataFlow | info / warn / accent / pass / fail |

MDX escaping

| Pattern | Fix | | -------------------------------------- | -------------------------------------- | | {0..9} (range in braces) | \{0..9\} | | [*] (bracket + asterisk) | [*] | | {key: value} JSON-like | {"{key: value}"} | | ${var} template literal | wrap inside string: {"...${var}..."} | | <code>foo*</code> (asterisk in code) | <code>foo&#42;</code> | | <code>__name</code> (dunder in code) | <code>\_\_name</code> |

Reference implementation

Use ${CLAUDE_SKILL_DIR}/templates/spec.mdx as the canonical example (all 9 tabs filled).

Done

• ~/.claude/workspace/views/src/content/<short-slug>.mdx exists
• http://localhost:4321/spec/<short-slug> renders without error
• Each tab reflects content from sow.md / spec.md
• No {/* PLACEHOLDER */} markers remain (grep returns zero hits)

Constraints

• sow.md / spec.md are read-only (do not modify)
• Do not modify anything under the planning directory
• Write only under ~/.claude/workspace/views/