Skill522 repo starsupdated 3d ago
visual-recap
Generate and maintain the system recap block in a PR description - a
Install in Claude Code
Copygit clone --depth 1 https://github.com/kentcdodds/kody /tmp/visual-recap && cp -r /tmp/visual-recap/.agents/skills/visual-recap ~/.claude/skills/visual-recapThen start a new Claude Code session; the skill loads automatically.
Definition
SKILL.md
# System recap (visual plan / visual recap) Produce a high-altitude, visual review aid directly in the PR description. No deployment, no third-party service: GitHub renders the block (including mermaid diagrams), and the PR itself is the storage. The marker-delimited block is machine-readable via the GitHub API, so follow the format exactly. The recap is informational and non-blocking. It supplements the PR description and normal code review; it never replaces reading the diff. ## Two modes, one format - **Plan mode** (before/while implementing): describe the intended change against the current system. If no PR exists yet, put the block in the plan document or message; move it into the PR description once the PR exists. - **Recap mode** (PR creation and every meaningful update): describe what the diff actually does. Replaces a plan-mode block if one exists. ## Source-of-truth rules (non-negotiable) 1. **Recap mode reads the diff, not memory.** Generate the recap from `git diff <base>...HEAD` (plus `git diff --stat`) against the PR base branch. Session context may explain intent, but every claim about what changed must be checkable against the diff. 2. **Classification uses the primitives taxonomy.** Read [`docs/contributing/architecture/primitives.yaml`](../../../docs/contributing/architecture/primitives.yaml) for stable `id` / `name` / `group` values. Prefer the classifier script over hand-matching paths: ```bash node .agents/skills/visual-recap/scripts/classify-primitives.mjs --base <base> --head HEAD # or: git diff --name-only <base>...HEAD | node .../classify-primitives.mjs --stdin --json ``` 3. **The taxonomy is not a feature changelog.** Update `primitives.yaml` only when this PR **adds, removes, or materially reshapes** a primitive (new `id`, renamed meaning, or ownership roots that must change). Do **not** edit `summary` for ordinary feature work — put behavioral detail in the linked architecture docs under `docs:`. Run `npm run primitives:check` after map edits. ## Risk classification Classify each touched primitive, then roll up to the highest severity as the overall classification (`adds` > `extends` > `composes`): | Classification | Meaning | Risk | | -------------- | ---------------------------------------------------------- | ------ | | `composes` | Uses existing primitives as-is; wiring and call sites only | Low | | `extends` | Changes a primitive's behavior, shape, or contract | Medium | | `adds` | Introduces a new primitive (must update primitives.yaml) | High | A change touching invariants from `primitives.yaml` (for example per-user isolation) is called out explicitly regardless of classification. The classifier reports which primitives' `code` roots the diff touches; you still decide `composes` vs `extends` from the diff (and `adds` when you create a new map entry). ## Choosing a diagram Pick the mermaid graph that best explains **this PR's** change. Do not default to a topology flowchart. - **Sequence diagram (preferred):** request or job timing, who calls whom, and what this PR adds or changes on each hop. This is the usual choice. - **Flowchart / system map:** many-to-many wiring, fan-out, or a crossing that is awkward as a single timed path. Useful **in addition** to a sequence diagram when topology is the story. - **Other mermaid types** when they fit better: `erDiagram` for schema, `stateDiagram-v2` for lifecycle, `flowchart TB` for a decision tree. Use them instead of (or alongside) a sequence diagram — do not force a sequence diagram that hides the real change. Every diagram is PR-scoped: only the path this diff changes, not the full architecture. Open with one sentence naming what the graph shows. **Label every arrow or message** with what this PR does across that boundary (route, handler, table/column, guard, capability, env var). Unlabeled arrows are forbidden. Include at least one diagram. Add a second only when it shows something the first cannot (for example a sequence for timing plus a small ER snippet for a new table). Do not restate the same path in two graphs. ## Block format The block lives in the PR description between HTML comment markers, wrapped in `<details>`. Fixed section order — keep the structure stable so the marker-delimited block stays machine-readable. Omit optional sections rather than leaving them empty. ````markdown <!-- system-recap:start --> <details> <summary>System recap — <b>composes existing primitives</b> (low risk)</summary> **Mode:** recap · **Base:** `main` @ `abc1234` · **Head:** `def5678` **Classification:** composes — no primitives added or changed; this PR wires existing primitives together. ### Primitives touched | Primitive | Group | Impact | | ------------ | -------- | --------------------------------------- | | `mcp-server` | surfaces | composes | | `d1-app-db` | storage | extends — new `jobs.retry_count` column | ### Change flow Search/execute records a retry count on the job row. ```mermaid sequenceDiagram participant mcpServer as mcp-server participant registry as capability-registry participant d1AppDb as d1-app-db mcpServer->>registry: search/execute registry->>d1AppDb: write jobs.retry_count ``` ### System map _Optional: a topology flowchart when a sequence diagram is not enough, or when a second view of crossings helps._ ### Before / after _Optional: schema, API shape, or route changes as compact before/after fenced blocks or tables._ ### Invariants _Optional: only when the change touches an invariant from primitives.yaml._ ### Plan vs actual _Recap mode only, when a plan-mode block existed: what shipped as planned and what drifted, in a short list._ </details> <!-- system-recap:end --> ```` Format rules: - The `<summary>` line always carries the