From ship
Internal helper for /think Step 11. Renders SOW.md + Spec.md as an integrated Astro view and returns a dev server URL.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ship:use-workflow-plan-previewWhen to use
Called only from /think Step 11 after reviewer-spec passes. Not user-invokable.
This skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
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/`.
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.
/think)$1: planning slug (e.g. 2026-05-08-issue-53-annotation-foundation)
~/.claude/workspace/planning/$1/sow.md and spec.md$1
2026-05-08-issue-53-annotation-foundation → issue-53 or annotation-foundation~/.claude/workspace/views/src/content/<short-slug>.mdxtitle: H1 linesubtitle: First sentence of Why → Outcome (a)status: Below ## Status (draft / approved / done)updatedAt: Today's date YYYY-MM-DDsessionId: From Session: lineissueUrl: GitHub URL in Referencecd ~/.claude/workspace/views && bun run dev
http://localhost:4321/spec/<short-slug> with the user| 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 |
| 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 |
| 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*</code> |
<code>__name</code> (dunder in code) | <code>\_\_name</code> |
Use ${CLAUDE_SKILL_DIR}/templates/spec.mdx as the canonical example (all 9 tabs filled).
~/.claude/workspace/views/src/content/<short-slug>.mdx existshttp://localhost:4321/spec/<short-slug> renders without error{/* PLACEHOLDER */} markers remain (grep returns zero hits)~/.claude/workspace/views/npx claudepluginhub thkt/dotclaude --plugin toolkitProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.