update-component-refer…
description: Add plugin components to the website docs, including component reference pages, plugin index entries, and plugin READMEs argument-hint: Component…
Visual HTML project recap — current state, recent decisions, and cognitive debt hotspots
> /plugin marketplace add NikiforovAll/claude-code-rulesHow it fires
How this command gets triggered: by you, by Claude, or both.
/project-recapContext preview
What this command does when you run it.
Visual HTML project recap — current state, recent decisions, and cognitive debt hotspots
description: Visual HTML project recap — current state, recent decisions, and cognitive debt hotspots argument-hint: "[since <when>] [--style <name>] [--theme light|dark] [--slides|--handbook]" disable-model-invocation: true
Load the visual-explainer skill, then generate a comprehensive visual project recap as a self-contained HTML page.
Follow the visual-explainer skill workflow. Read the reference template, CSS patterns, and mermaid theming references before generating. Use a warm editorial or paper/ink aesthetic with muted blues and greens, but vary fonts and palette from previous diagrams.
**Time window** — determine the recency window from the request, ignoring any `--flags` (those are the skill's, per its Arguments table): $ARGUMENTS
**Data gathering phase** — run these first to understand the project:
1. **Project identity.** Read `README.md`, `CHANGELOG.md`, `package.json` / `Cargo.toml` / `pyproject.toml` / `go.mod` for name, description, version, dependencies. Read the top-level file structure.
2. **Recent activity.** `git log --oneline --since=<window>` for commit history. `git log --stat --since=<window>` for file-level change scope. `git shortlog -sn --since=<window>` for contributor activity. Identify which areas of the codebase were most active.
3. **Current state.** Check for uncommitted changes (`git status`). Check for stale branches (`git branch --no-merged`). Look for TODO/FIXME comments in recently changed files. Read progress docs if they exist (`~/.agent/memory/{project}/progress.md`, `~/.pi/agent/memory/{project}/progress.md`, `.pi/todos/`, or similar).
4. **Decision context.** Read recent commit messages for rationale. If running in the same session as recent work, mine the conversation history. Read any plan docs, RFCs, or ADRs in the project directory.
5. **Architecture scan.** Read key source files to understand the module structure and dependencies. Focus on entry points, public API surface, and the files most frequently changed in the time window.
**Verification checkpoint** — before generating HTML, produce a structured fact sheet of every claim you will present in the recap:
Verify each claim against the code. If something cannot be verified, mark it as uncertain rather than stating it as fact. This fact sheet is your source of truth during HTML generation — do not deviate from it.
**Diagram structure** — the page should include: 1. **Project identity** — not the README blurb. A *current-state* summary: what this project does, who uses it, what stage it's at (early dev, stable, actively shipping features). Include version, key dependencies, and the one-sentence "elevator pitch" for someone who forgot what they were building. 2. **Architecture snapshot** — Mermaid diagram of the system as it exists today. Focus on the conceptual modules and their relationships, not every file. Label nodes with what they do, not just file names. Wrap in `.mermaid-wrap` with the standard zoom controls — see "Zoom Controls" in css-patterns.md. *Visual treatment: this is the visual anchor — use hero depth (elevated container, larger padding, subtle accent-tinted background). The rest of the page hangs off this diagram.* 3. **Recent activity** — not raw git log. A human-readable narrative grouped by theme: feature work, bug fixes, refactors, infrastructure. Timeline visualization with the most significant changes called out. For each theme, a one-sentence summary of what happened and why it mattered. 4. **Decision log** — key design decisions from the time window. Extracted from commit messages, conversation history, plan docs, progress docs. Each entry: what was decided, why, what was considered. This is the highest-value section for fighting cognitive debt — the reasoning that evaporates first. 5. **State of things** — *visual treatment: use the KPI card pattern from css-patterns.md — large hero numbers for working/broken/blocked/in-progress counts, with color-coded trend indicators.* A dashboard of:
6. **Mental model essentials** — the 5-10 things you need to hold in your head to work on this project effectively:
7. **Cognitive debt hotspots** — *visual treatment: use amber-tinted cards with severity indicators (colored left border: red for high, amber for medium, blue for low).* Areas where understanding is weakest:
8. **Next steps** — inferred from recent activity, open TODOs, proj
A collection of Claude Code recommendations and practices. Learn practical techniques to enhance your AI-assisted development workflow with Claude Code.
description: Add plugin components to the website docs, including component reference pages, plugin index entries, and plugin READMEs argument-hint: Component…
Provide clear explanations of code, concepts, and system behavior with educational clarity
Use the "Five Whys" root cause analysis technique to deeply understand problems.
Generate effective prompts for Claude 4.5 Sonnet to achieve user-defined outcomes