Asked your agent to build a feature? See whether it was done—and exactly how.
An agent-agnostic skill that turns a git range into a single self-contained HTML review artifact: the diff-scoped dependency graph with computed blast radius, an acceptance-criteria coverage map, and a short list of attention flags. It works with any coding agent that can read and write files and run shell commands; the workflow has no vendor-specific agent or API dependency.
The point is to minimize human attention per verified change — and to make an artifact that cannot lie. Every node, edge, and status is computed by a script from git plus the TypeScript type checker. The model's judgment lives in a separate file, is rendered in a distinct register, and is machine-checked for dangling references before you ever see it.
--depth, default 1) to the nodes that
consume them. Every edge carries file:line evidence.not graphed rows with status, stats, spans, and a selectable textual diff
excerpt when Git provides one.renders, consumes-type, calls, imports, uses-token —
so "this touches the cart" and "this imports the cart's type" read differently.Unmatched rows — "approve or revert,
explicitly".In graph / Not shown topbar cards, the
changed-files-outside-the-TS-project card, and the tsconfig that produced the
facts are all on the face of the artifact, and the validator checks each against
slice.json. A narrow slice cannot pass as a full one.generated block. Verified by tests/run.sh determinism.validate-slice.ts re-parses the rendered HTML and
diffs it against slice.json: any invented or dropped node, edge, or
ungraphed-file row, drifted status, or dangling annotation id is a violation.
Mutation tests
(tests/mutations/) prove each check actually catches its corruption.tabindex, role,
aria-label, aria-current, aria-selected), every control focus-ringed and
driven in a real browser by tests/run.sh interaction. Plus collapsed-directory
mode for large diffs and support for uncommitted work via --worktree.localStorage, keyed by generated.headSha so one slice never inherits
another's view.jq (test harness only)npm install (one runtime dep: ts-morph)Ask your coding agent, in a session where this skill is available:
feat/wishlist"main..feat/wishlist"The agent runs the three scripts below, writes annotations.json, and presents
review.html. Open it in a browser; no server, no assets, no network.
Agent products use different conventions for discovering skills. Point the
agent's skill or instruction mechanism at this directory (especially SKILL.md);
if it has no native skill mechanism, provide SKILL.md as repository
instructions. The workflow itself remains the same.
To run the pipeline by hand:
node scripts/build-slice.ts --repo <path> --range main..feat/wishlist --out slice.json
# then write annotations.json (schema: references/SLICE_FORMAT.md § Annotations)
node scripts/render-slice.ts --slice slice.json --annotations annotations.json --out review.html
node scripts/validate-slice.ts --artifact review.html --slice slice.json --annotations annotations.json
| Situation | Flag |
|---|---|
| Uncommitted work (0 commits ahead) | --range <base>.. --worktree |
| Prefer a directory-level summary for a dense graph | --collapse dir |
| Monorepo / cross-package diff | --tsconfig <one synthetic config> (see SKILL.md § Monorepos) |
| Non-default token or route globs | --tokens <glob> --routes <glob> (repeatable) |
| Deeper blast radius | --depth <n> |
| Label the artifact with its PR | --pr <n> [--pr-state open|merged|closed] |
Acceptance criteria come from the user, or from a spec file in the repo
(LOOP.md, AGENT_LOOP.md, SPEC.md). With none, the intent layer renders
inactive and orphan detection is off. Criteria are never invented.
| File | Role |
|---|---|
SKILL.md | The portable skill instructions: trigger conditions, provenance rules, workflow, and monorepo handling. What the coding agent loads and follows. |
references/SLICE_FORMAT.md | Schemas for slice.json and annotations.json, plus determinism rules. The contract between scripts and model. Read before writing annotations. |
references/DESIGN_CONTRACT.md | Frozen visual system: palette, panel structure, layout constraints. Read before writing small-slice layout{}. Changes need a version bump and human sign-off. |
assets/shell-mock.png | Golden visual-language reference from DESIGN_CONTRACT v0.2.0, retained by v0.4.0. |
assets/reference-mock.html | Superseded v0.1.0 golden. Kept for history; it no longer describes the artifact. |
| File | Role |
|---|---|
scripts/build-slice.ts | Facts. Reads git + the TS type checker via ts-morph, emits slice.json: nodes, ungraphed changed files, edges, statuses, blast depth, diff spans and excerpts. No judgment, no prose, no model calls. Deterministic apart from the generated block. Exit 2 = empty/invalid range, 3 = project load failure. |
scripts/layout-slice.ts | Shared deterministic layout policy. Preserves model-authored composition for small slices and expands large slices onto a stable computed canvas. |
scripts/render-slice.ts | The only writer of HTML. Takes slice.json + annotations.json, emits one self-contained review.html (app shell per DESIGN_CONTRACT v0.4.0) with both JSON files embedded. |
scripts/validate-slice.ts | The guard. Diffs the rendered artifact against the slice: fabricated or missing nodes, edges, and ungraphed files; status/kind drift; dangling annotation ids; layout constraints; palette and register checks. Exit 0 clean, 1 violations, 2 usage error. Must exit 0 before anything is presented. |
| File | Role |
|---|---|
tests/run.sh | Harness: bash tests/run.sh [determinism|fixture|exitcodes|render|mutations|tsconfig|worktree|ungraphed|collapse|large|all]. |
tests/mutations/apply.ts | Seeds known corruptions into a clean artifact so the validator can be tested for false passes. Each mutant is named for the check that must catch it. |
tests/check-slice-shape.ts | Structural self-check of a slice.json against SLICE_FORMAT. |
tests/expected-slice.json, tests/golden/*.html | Fixture expectations. |
fixtures/storefront/, fixtures/storefront.bundle | Browsable checkout plus a self-contained Git bundle for the small React fixture. The test harness clones the bundle so main..fixture/wishlist works without embedding a nested .git directory in this repository. |
AGENT_LOOP.md and reports/ are the build record, not part of the runtime
skill. reports/m3/ holds red-team artifacts (stretched criteria matches,
omitted orphans) used to check that the validator and the design catch a model
that shades the truth.
"files": [] +
references) resolving zero files, exits 3.excluded.files + badge) but you have to act on them.--collapse dir trades symbol-level drawing
for directory meta-nodes when a summary is more useful.annotations.json supplies x,y and
the validator checks the established narrative geometry. Above 20, placement
is deterministic and computed; this favors completeness and stable inspection
over a hand-crafted visual narrative./code-review or
/security-review for that.slice.json is the territory. Only build-slice.ts writes it. Nodes,
ungraphed files, edges, and statuses are never added, removed, renamed, or
reclassified — not to declutter, not because they look wrong. Disagreement
goes in a reviewer note.annotations.json. It may reference node ids; it may
never introduce structure.render-slice.ts writes HTML. The artifact is never hand-edited.validate-slice.ts exits 0 before anything is presented.build-slice.ts fails, that is the result. There is no fallback graph — a
remembered one is worse than none.excluded.count is not 0, widen the tsconfig and re-run before
annotating. Do not annotate around a hole.MIT © 2026 Rami GB.
HTML
54.8%
TypeScript
34.1%
Shell
6.3%
JavaScript
4.9%
Asked your agent to build a feature? See whether it was done—and exactly how.
An agent-agnostic skill that turns a git range into a single self-contained HTML review artifact: the diff-scoped dependency graph with computed blast radius, an acceptance-criteria coverage map, and a short list of attention flags. It works with any coding agent that can read and write files and run shell commands; the workflow has no vendor-specific agent or API dependency.
The point is to minimize human attention per verified change — and to make an artifact that cannot lie. Every node, edge, and status is computed by a script from git plus the TypeScript type checker. The model's judgment lives in a separate file, is rendered in a distinct register, and is machine-checked for dangling references before you ever see it.
--depth, default 1) to the nodes that
consume them. Every edge carries file:line evidence.not graphed rows with status, stats, spans, and a selectable textual diff
excerpt when Git provides one.renders, consumes-type, calls, imports, uses-token —
so "this touches the cart" and "this imports the cart's type" read differently.Unmatched rows — "approve or revert,
explicitly".In graph / Not shown topbar cards, the
changed-files-outside-the-TS-project card, and the tsconfig that produced the
facts are all on the face of the artifact, and the validator checks each against
slice.json. A narrow slice cannot pass as a full one.generated block. Verified by tests/run.sh determinism.validate-slice.ts re-parses the rendered HTML and
diffs it against slice.json: any invented or dropped node, edge, or
ungraphed-file row, drifted status, or dangling annotation id is a violation.
Mutation tests
(tests/mutations/) prove each check actually catches its corruption.tabindex, role,
aria-label, aria-current, aria-selected), every control focus-ringed and
driven in a real browser by tests/run.sh interaction. Plus collapsed-directory
mode for large diffs and support for uncommitted work via --worktree.localStorage, keyed by generated.headSha so one slice never inherits
another's view.jq (test harness only)npm install (one runtime dep: ts-morph)Ask your coding agent, in a session where this skill is available:
feat/wishlist"main..feat/wishlist"The agent runs the three scripts below, writes annotations.json, and presents
review.html. Open it in a browser; no server, no assets, no network.
Agent products use different conventions for discovering skills. Point the
agent's skill or instruction mechanism at this directory (especially SKILL.md);
if it has no native skill mechanism, provide SKILL.md as repository
instructions. The workflow itself remains the same.
To run the pipeline by hand:
node scripts/build-slice.ts --repo <path> --range main..feat/wishlist --out slice.json
# then write annotations.json (schema: references/SLICE_FORMAT.md § Annotations)
node scripts/render-slice.ts --slice slice.json --annotations annotations.json --out review.html
node scripts/validate-slice.ts --artifact review.html --slice slice.json --annotations annotations.json
| Situation | Flag |
|---|---|
| Uncommitted work (0 commits ahead) | --range <base>.. --worktree |
| Prefer a directory-level summary for a dense graph | --collapse dir |
| Monorepo / cross-package diff | --tsconfig <one synthetic config> (see SKILL.md § Monorepos) |
| Non-default token or route globs | --tokens <glob> --routes <glob> (repeatable) |
| Deeper blast radius | --depth <n> |
| Label the artifact with its PR | --pr <n> [--pr-state open|merged|closed] |
Acceptance criteria come from the user, or from a spec file in the repo
(LOOP.md, AGENT_LOOP.md, SPEC.md). With none, the intent layer renders
inactive and orphan detection is off. Criteria are never invented.
| File | Role |
|---|---|
SKILL.md | The portable skill instructions: trigger conditions, provenance rules, workflow, and monorepo handling. What the coding agent loads and follows. |
references/SLICE_FORMAT.md | Schemas for slice.json and annotations.json, plus determinism rules. The contract between scripts and model. Read before writing annotations. |
references/DESIGN_CONTRACT.md | Frozen visual system: palette, panel structure, layout constraints. Read before writing small-slice layout{}. Changes need a version bump and human sign-off. |
assets/shell-mock.png | Golden visual-language reference from DESIGN_CONTRACT v0.2.0, retained by v0.4.0. |
assets/reference-mock.html | Superseded v0.1.0 golden. Kept for history; it no longer describes the artifact. |
| File | Role |
|---|---|
scripts/build-slice.ts | Facts. Reads git + the TS type checker via ts-morph, emits slice.json: nodes, ungraphed changed files, edges, statuses, blast depth, diff spans and excerpts. No judgment, no prose, no model calls. Deterministic apart from the generated block. Exit 2 = empty/invalid range, 3 = project load failure. |
scripts/layout-slice.ts | Shared deterministic layout policy. Preserves model-authored composition for small slices and expands large slices onto a stable computed canvas. |
scripts/render-slice.ts | The only writer of HTML. Takes slice.json + annotations.json, emits one self-contained review.html (app shell per DESIGN_CONTRACT v0.4.0) with both JSON files embedded. |
scripts/validate-slice.ts | The guard. Diffs the rendered artifact against the slice: fabricated or missing nodes, edges, and ungraphed files; status/kind drift; dangling annotation ids; layout constraints; palette and register checks. Exit 0 clean, 1 violations, 2 usage error. Must exit 0 before anything is presented. |
| File | Role |
|---|---|
tests/run.sh | Harness: bash tests/run.sh [determinism|fixture|exitcodes|render|mutations|tsconfig|worktree|ungraphed|collapse|large|all]. |
tests/mutations/apply.ts | Seeds known corruptions into a clean artifact so the validator can be tested for false passes. Each mutant is named for the check that must catch it. |
tests/check-slice-shape.ts | Structural self-check of a slice.json against SLICE_FORMAT. |
tests/expected-slice.json, tests/golden/*.html | Fixture expectations. |
fixtures/storefront/, fixtures/storefront.bundle | Browsable checkout plus a self-contained Git bundle for the small React fixture. The test harness clones the bundle so main..fixture/wishlist works without embedding a nested .git directory in this repository. |
AGENT_LOOP.md and reports/ are the build record, not part of the runtime
skill. reports/m3/ holds red-team artifacts (stretched criteria matches,
omitted orphans) used to check that the validator and the design catch a model
that shades the truth.
"files": [] +
references) resolving zero files, exits 3.excluded.files + badge) but you have to act on them.--collapse dir trades symbol-level drawing
for directory meta-nodes when a summary is more useful.annotations.json supplies x,y and
the validator checks the established narrative geometry. Above 20, placement
is deterministic and computed; this favors completeness and stable inspection
over a hand-crafted visual narrative./code-review or
/security-review for that.slice.json is the territory. Only build-slice.ts writes it. Nodes,
ungraphed files, edges, and statuses are never added, removed, renamed, or
reclassified — not to declutter, not because they look wrong. Disagreement
goes in a reviewer note.annotations.json. It may reference node ids; it may
never introduce structure.render-slice.ts writes HTML. The artifact is never hand-edited.validate-slice.ts exits 0 before anything is presented.build-slice.ts fails, that is the result. There is no fallback graph — a
remembered one is worse than none.excluded.count is not 0, widen the tsconfig and re-run before
annotating. Do not annotate around a hole.MIT © 2026 Rami GB.
HTML
54.8%
TypeScript
34.1%
Shell
6.3%
JavaScript
4.9%