本文へ移動
cccskills
無料GitHub で公開

phase-build

Build one release phase against the specs — plan it on an interactive board (endpoints, components, resources, with what already exists read from the codebase), let the user adjust, then build node by node while the board shows live progress. Use when the user wants to build a phase, implement the phase-1 slice, execute the plan from a story map or spec, or watch a build happen visually.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md6.6 KB
  • assets/build-board.html61.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

One release phase, built in three passes — API, then UI, then infrastructure — against a plan the user saw and adjusted first. The board shows three trees (Endpoints · Components · Resources), each node coloured by what it is: new this phase, changed (exists, this phase extends it), or already built. Press Start, and the same board becomes the progress view — nodes pulse while being built and fill in as they land.

story map slice + specs + phase screens ──► plan JSON ──► board ──► user adjusts ──► Start
                                                                                         │
        done ◄── infra ◄── ui ◄── api  — one node at a time, each reported to the board ◄┘

have is read from the codebase, never from a previous plan. A plan that colours from last phase's intentions lies the first time a phase ships partial. Read the actual routes, components, migrations and infra files; stamp when you read them.

1 · Scope the phase

  • Pipeline mode: phase N is phase in .vstack/pipeline.json. Its content is the phase-N slice of specs/story-map.json, the specs in artifacts.specs[], and design/phase-<n>/ if phase wireframes exist. If "specsOnly": true, this stage doesn't apply — say so and offer /vstack:start to add development setup.
  • Standalone: whatever the user points at — a spec, a story list, "build this". Ask only what you can't infer.

2 · Read the codebase, then draft the plan

Walk the actual code: API routes and handlers, frontend components/pages, migrations, infra and deploy files. Then write .vstack/build/phase-<n>.json:

{
  "phase": 1,
  "readAt": "2026-07-29 14:05",
  "subjects": {
    "api":   { "mono": true, "root": { "id": "api", "kind": "API", "text": "/v1", "state": "have", "children": [] } },
    "ui":    { "root": { "id": "ui", "kind": "Frontend", "text": "<app>", "state": "have", "children": [] } },
    "infra": { "root": { "id": "in", "kind": "Infra", "text": "<envs>", "state": "have", "children": [] } }
  }
}

Node: { id, kind, text, state, note?, children[] } — state is new | touch | have; note is the short "what changes" tag on a touch node. Ids must be stable and unique across all three subjects — patch finds nodes by id alone. Keep nodes at the granularity you'd build them: an endpoint, a component, a migration, a queue.

3 · Serve the board, let the user adjust

SKILL=<this skill dir>
LIB="$SKILL/../../lib"
DOC=.vstack/build/phase-<n>.json
node "$LIB/json-bridge.mjs" serve --json "$DOC" --template "$SKILL/assets/build-board.html" --tool phase-build \
  --port 7792 --idle-timeout 0

--idle-timeout 0 because the link must survive the whole build. Start with run_in_background: true, hand over the printed URL, then arm the seq waiter:

node "$LIB/json-bridge.mjs" watch --json .vstack/build/phase-<n>.json --stream --tool phase-build \
  --seq <seq printed when the server started>

Start it with the Monitor tool, persistent: true. How the loop behaves — it never exits, one event per line, the Linked/Unlinked states, the idle close — is contracts/bridge-loop.md.

On SENT, read the JSON. A plain save is a plan adjustment — take it as the new plan and carry on. A save carrying "action": "start" is the user pressing Start: remove the action key, write the file back, and begin the build. This is the cheapest moment the user will ever have to move an endpoint or collapse two components — never start building before they've had it.

4 · Build, reporting as you go

Subjects in order api → ui → infra; inside a subject, parents before children. Per node whose state isn't have:

node "$LIB/json-bridge.mjs" patch --json "$DOC" --id e4 --set status=building --tool phase-build
# … do the work …
node "$LIB/json-bridge.mjs" patch --json "$DOC" --id e4 --set status=done --tool phase-build
  • The board updates over SSE on every patch — that's the live build view; keep the reports honest and per-node, not batched at the end.
  • Follow the project's own conventions — the template's CLAUDE.md contracts if it's template-derived, otherwise whatever the codebase already does. Run the project's own checks (tests, lint, typecheck) where they exist, per node or per subject as cost allows.
  • A node that fails gets --set status=failed --set note="why, in a few words" and you keep going — a failed node is reported, not silently retried, and never silently skipped.
  • Adjustments can still arrive mid-build (the waiter is armed): fold them in before starting the next node.

5 · Finish

Summarize in chat: what was built, what changed, what failed and why. Stop the bridge (TaskStop). Leave every node's final status in the JSON — it's the build record.

Notes

  • Never edit assets/build-board.html or lib/json-bridge.mjs to fit a project — they're the engine; only the plan JSON is yours. The shell chrome is stamped in from lib/shell/ — see lib/shell/README.md.
  • The bridge binds 127.0.0.1. Port busy → another board is up; pass --port.
  • Works beside any other tooling, in any codebase. This skill scaffolds nothing, installs nothing, adds no hooks or config, and touches only the files its plan nodes call for. It never creates vstack or template structure in a project that doesn't have it, and never touches another tool's state (.specify/, etc.).

State & handoff

No .vstack/pipeline.json? You're standalone — everything above still applies, minus this section. The plan JSON can live wherever the user likes (default .vstack/build/).

  • Read phase, specs/story-map.json, artifacts.specs[], design/phase-<n>/.
  • Write — this skill owns the phase counter. On completing phase N: phase: N + 1, or stage: "done" if N was the last phase in the story map; either way stage: "phase-build" in history with a note ("phase 1: 9 built, 1 failed"). No other stage touches phase.
  • Next — the loop: the next phase starts back at /vstack:phase-preview (or straight here if phase screens already exist for it). After the last phase, the chain is done — say so plainly.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

go

無料

Compatibility entry for Visual Stack's former /vstack:go command. Runs the wireframe and UI review tool, now called review. Use only when the user invokes /vstack:go.

日本語の概要は準備中です。原文の説明を表示しています。

Cavalry-Collective/visual-stack112026年10月10日 更新

Preview a signed-off design one release phase at a time — cut it down into a series of phase screens, each showing only what exists by that phase with the layout untouched, then put them on a scrubber you drag to watch the screen fill in release by release. Use when the user wants a Phase 1 / MVP version of an existing wireframe or mockup, phased or staged screens, a design sliced by release phase or story map, or wants to see what a screen looks like before later features land.

日本語の概要は準備中です。原文の説明を表示しています。

Cavalry-Collective/visual-stack112026年10月10日 更新

review

無料

Visual Stack's primary tool. Build a UI wireframe and open it in an interactive review workspace where the user comments directly on the page, turning those comments into the next iteration — or point the same workspace at an app that is already running and review the real thing. Use when the user wants a wireframe, UI mockup, screen design or prototype built; wants to review, annotate, mark up or comment on a page, a design, an existing UI, a running app or a website; wants to iterate on a UI; asks to use Visual Stack; or invokes $vstack:review, /vstack:review, or the older /vstack:wireframe.

日本語の概要は準備中です。原文の説明を表示しています。

Cavalry-Collective/visual-stack112026年10月10日 更新

spec

無料

Turn a wireframe and everything already agreed into a written spec in traditional agile shape — an initiative broken into epics, epics into user stories with acceptance criteria, and themes as the labels that span them — presented as an interactive drill-down tree the user prunes, edits and annotates in the browser, with a plain-markdown spec generated from it. Use when the user wants a spec, an initiative or epic broken into user stories, acceptance criteria, to formalise what a wireframe or mockup does, or to review and edit a spec visually.

日本語の概要は準備中です。原文の説明を表示しています。

Cavalry-Collective/visual-stack112026年10月10日 更新

start

無料

Start a project on the Visual Stack — a multi-step setup form captures what's being built, recommends a stack, and either instantiates the vstack-template-base template, sets up a specs-and-design-only workspace, or records an existing codebase without touching it. Use when the user wants to start a new project, scaffold a repo, set up a codebase from the Cavalry template, pick a stack or add-ons, run Day-1 setup, or bring an existing app onto the visual stack.

日本語の概要は準備中です。原文の説明を表示しています。

Cavalry-Collective/visual-stack112026年10月10日 更新

Build an interactive, drag-and-drop user story map so the user can re-slice work across release phases. Use when the user wants a story map, a phased roadmap, release slicing, a backbone/activities journey map, or to decide "which stories go in which phase" and move them around.

日本語の概要は準備中です。原文の説明を表示しています。

Cavalry-Collective/visual-stack112026年10月10日 更新

Cavalry-Collective のスキルをすべて見る

このスキルの問題を報告する