Visualize
openclaw/openclaw
Create inline visuals for code and explanations, or author persistent OpenClaw dashboard widgets with showwidget.
Visualize a Claude Code session as a quest/skill tree — a navigable SVG graph where nodes are turns and edges show flow, with distinct visual encoding for normal flow, dead-ends, corrections…
$ npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install NikiforovAll/claude-code-rules reflect-tree --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/NikiforovAll/claude-code-rules.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/handbook-reflect/skills/reflect-tree .claude/skills/reflect-tree && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "reflect-tree" agent skill from https://github.com/NikiforovAll/claude-code-rules/tree/main/plugins/handbook-reflect/skills/reflect-tree into .claude/skills/reflect-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reflect-tree", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/NikiforovAll/claude-code-rules/tree/main/plugins/handbook-reflect/skills/reflect-treeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install NikiforovAll/claude-code-rules reflect-tree --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/NikiforovAll/claude-code-rules.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/handbook-reflect/skills/reflect-tree .agents/skills/reflect-tree && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "reflect-tree" agent skill from https://github.com/NikiforovAll/claude-code-rules/tree/main/plugins/handbook-reflect/skills/reflect-tree into .agents/skills/reflect-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reflect-tree", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install NikiforovAll/claude-code-rules reflect-tree --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/NikiforovAll/claude-code-rules.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/handbook-reflect/skills/reflect-tree .cursor/skills/reflect-tree && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "reflect-tree" agent skill from https://github.com/NikiforovAll/claude-code-rules/tree/main/plugins/handbook-reflect/skills/reflect-tree into .cursor/skills/reflect-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reflect-tree", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/NikiforovAll/claude-code-rules.git --path plugins/handbook-reflect/skills/reflect-tree--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install NikiforovAll/claude-code-rules reflect-tree --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/NikiforovAll/claude-code-rules.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/handbook-reflect/skills/reflect-tree .gemini/skills/reflect-tree && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "reflect-tree" agent skill from https://github.com/NikiforovAll/claude-code-rules/tree/main/plugins/handbook-reflect/skills/reflect-tree into .gemini/skills/reflect-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reflect-tree", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install NikiforovAll/claude-code-rules reflect-treeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/NikiforovAll/claude-code-rules.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/handbook-reflect/skills/reflect-tree .github/skills/reflect-tree && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "reflect-tree" agent skill from https://github.com/NikiforovAll/claude-code-rules/tree/main/plugins/handbook-reflect/skills/reflect-tree into .github/skills/reflect-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reflect-tree", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install NikiforovAll/claude-code-rules reflect-tree --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/NikiforovAll/claude-code-rules.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/handbook-reflect/skills/reflect-tree .opencode/skills/reflect-tree && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "reflect-tree" agent skill from https://github.com/NikiforovAll/claude-code-rules/tree/main/plugins/handbook-reflect/skills/reflect-tree into .opencode/skills/reflect-tree/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reflect-tree", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
reflect-treeVisualize a Claude Code session as a quest/skill tree — a navigable SVG graph where nodes are turns and edges show flow, with distinct visual encoding for normal flow, dead-ends, corrections…
Reflect Tree is an agent skill from NikiforovAll/claude-code-rules. Visualize a Claude Code session as a quest/skill tree — a navigable SVG graph where nodes are turns and edges show flow, with distinct visual encoding for normal flow, dead-ends, corrections, retries, reversals, and backtracking. Sibling to /reflect (which produces an incidents+recommendations dashboard); this one shows the journey itself. Defaults to the current in-context session; optionally accepts a session ID or JSONL path. Use when the user invokes /reflect-tree or asks to map a session as a…
Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including scripts (for example `scripts/analyze_session.py`).
The repository describes itself as: Learn practical techniques to enhance your AI-assisted development workflow with Claude Code. The licence is Apache-2.0.
3 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 281c063. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/ (Python), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Reflect Tree loads about 2.8k tokens when it runs. Until then it costs about 134 tokens; SKILL.md has 1,340 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from NikiforovAll/claude-code-rules at commit 281c063, republished under its Apache-2.0 licence (© NikiforovAll). 1,340 words, ~2,754 tokens.
.claude/skills/reflect-tree/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.Produce a single-file interactive HTML quest-tree of a Claude Code session. The vertical spine is the linear sequence of turns; back-edges and off-spine nodes encode wrong turns (corrections, retries, reversals, dead-ends, backtracks) so the user can see the whole journey at a glance — including detours and where the agent had to redo work.
This is a sibling to /reflect. Same input contract, different output: /reflect is a two-pane incidents/recommendations dashboard; /reflect-tree is a graph.
/reflect-tree (no args) → analyze the current session from the in-context conversation. Do not re-read the session JSONL — work from the agent's own memory./reflect-tree <session-id> or /reflect-tree <path-to-jsonl> → run scripts/analyze_session.py <path> directly (this skill runs in a forked context — context: fork — so the compressed transcript is safe to ingest). The script outputs a compact markdown transcript: system reminders stripped, tool calls/results collapsed to one-liners, compaction blocks expanded with embedded user quotes. Then you classify each turn — the script does NOT classify, it only compresses.Session JSONLs live under: ~/.claude/projects/<encoded-cwd>/<session-id>.jsonl
Each turn becomes a node. Pick the strongest applicable label:
"no", "don't", "stop", "actually")T12–T18 · 7 turns label when many turns of fruitless searching collapse into one capsuleEach non-normal node carries a refs array listing the ancestor turn IDs it relates to.
Every node must carry an insight block — the single most important, reusable lesson from that turn, framed so a future agent could drop it into a prompt or rule. This is the value of the tree: each node becomes copyable knowledge.
For each turn, extract:
- Always X, because Y or a <rule> blockSkip prompt_snippet for filler normal turns (routine Reads/Greps with no insight). Better to have 6 strong insights than 50 weak ones.
The HTML drawer renders these per-node with a Copy insight button that copies prompt_snippet to the clipboard. A header-level Copy all insights button assembles every node's prompt_snippet into one markdown document grouped by classification.
| Class | Shape | Color (CSS token) | Symbol |
|---|---|---|---|
| normal user | filled circle | --accent | — |
| normal assistant | open circle | --fg | — |
| correction | diamond | --err border | ! |
| retry | double ring | --warn | ↻ |
| reversal | hollow square | --warn dashed | ⇄ |
| dead-end | filled X | --err | ✕ |
| backtrack | arrow node | --muted dashed | ↶ |
| self-correction | small diamond | --ok border | ✓! |
X-position: normal = center spine; correction/reversal nudged left; retry/dead-end nudged right. This keeps the spine readable while making detours visually distinct.
A legend is rendered inline in the header.
When grouping consecutive normal turns into a capsule, render the entire label inside the rounded rect — turn-range, count, and topic together. Do not place the turn-range outside the box; it looks broken when the rect background only covers part of the label.
Pattern (SVG):
<g class="capsule" transform="translate(300 380)">
<rect x="-150" y="-13" width="300" height="26"/>
<text x="0" y="0">
<tspan class="turn-range">T120–T139</tspan> · 11 turns · refactor + INFRA_GUIDE.md
</text>
</g>The rect width must accommodate the full text. Center the <text> (anchor middle, dominant-baseline middle) so it sits inside the rect. Use rx/ry ≥ 8 for the pill shape. Style the turn-range inline with <tspan class="turn-range"> so it stays bold/foreground while the rest of the label is muted.
Synthesize a fresh single-file HTML each run, using reference/example.html as inspiration (override anything that doesn't fit the actual session). The reference establishes:
--bg, --panel, --fg, --muted, --accent, --err, --warn, --ok, …) — keep this scheme.viewBox-based: wheel zoom on cursor; drag to pan; 0 resets; +/- zoom).refs chip in the drawer → center+pulse the referenced ancestor.normal turns into a single capsule labeled T12–T18 · 7 turns (click to expand inline).Output directory — do not write inside the skill folder. Resolve a temp dir from the environment, in this preference order:
$TMPDIR (Unix/macOS)$TMP or $TEMP (Windows / Git Bash)/tmp as fallbackThen create a reflect-tree/ subdir inside it (mkdir -p) and write the report as <that-dir>/reflect-tree/<slug>.html. Slug rules — kebab-case, derived from session goal:
auth-middleware-rewrite)<YYYY-MM-DD>-<topic>.htmlOpen it in the browser when done: start "" <path> (Git Bash on Windows).
reference/example.html — canonical inspiration HTML showing the tree layout, all node classifications, all edge types, theme toggle, filters, drawer, pan/zoom. Read before generating.scripts/analyze_session.py — JSONL compressor (independent copy of reflect's; no symlink). Strips system reminders, preserves real user messages, collapses tool calls/results to one-liners, expands compaction blocks. Output is markdown to stdout. Use only for explicit sessions — never on the current in-context session.Default (no args) — reflect on current session:
normal); for non-normal turns, fill in refs (which earlier turn(s) this re-attempts/undoes/contradicts).normal turns into capsules where they would clutter the spine.reference/example.html for the current aesthetic / SVG layout patterns.<temp>/reflect-tree/<slug>.html) — fresh HTML, same look-and-feel as the reference, populated with real turns/edges.start "" <path>.Explicit session — /reflect-tree <id-or-path>:
~/.claude/projects/<encoded-cwd>/<id>.jsonl).scripts/analyze_session.py <path>. Skill is forked (context: fork), so the compressed transcript is safe in context. No subagent.Read the JSONL directly with offset/limit scoped to the event. JSONL is source of truth; transcript is the index./reflect complements this view by producing actionable recommendations. The two can be run on the same session.© NikiforovAll, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 2 other files (scripts) in plugins/handbook-reflect/skills/reflect-tree of NikiforovAll/claude-code-rules.
Open the folder on GitHubat commit 281c063
Reflect Tree next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Reflect Tree this skillNikiforovAll/claude-code-rules | 141 | — | ~2.8k | Automated safety check: Pass | Apache-2.0 | |
| Visualizeopenclaw/openclaw | 392k | — | ~2.4k | Automated safety check: Pass | MIT | |
| Reflectalirezarezvani/claude-skills | 28k | 1 repos | ~2.4k | Automated safety check: Pass | MIT | |
| Visual Stylecalesthio/OpenMontage | 66k | — | ~1.5k | Automated safety check: Pass | AGPL-3.0 | |
| D3 Visualizationnexu-io/open-design | 100k | — | ~523 | Automated safety check: Pass | Apache-2.0 | |
| Visual Regressionthedaviddias/Front-End-Checklist | 74k | — | ~493 | Automated safety check: Pass | MIT |
openclaw/openclaw
Create inline visuals for code and explanations, or author persistent OpenClaw dashboard widgets with showwidget.
alirezarezvani/claude-skills
Mid-conversation reflection skill that pauses execution and zooms out from detail-mode to honestly reassess direction, assumptions, and bias.
calesthio/OpenMontage
Create, extract, and apply portable visual design systems via visual-style.md files.
nexu-io/open-design
Teaches the agent to produce D3 charts and interactive data visualizations.
thedaviddias/Front-End-Checklist
A skill your agent uses when reviewing CI coverage, automated checks, or test strategy related to Use visual regression testing.
code-yeongyu/oh-my-openagent
Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread.
NikiforovAll/claude-code-rules
Summarize WHAT WAS SHIPPED in a Claude Code session as a self-contained HTML slide deck — the elevator pitch (problem, solution, decisions, artifacts, verification, gaps), not a play-by-play of tool…
NikiforovAll/claude-code-rules
Run dotnet format to fix code style and analyzer diagnostics (IDE0005, CA, SA).
NikiforovAll/claude-code-rules
Understand implementation details of .NET code by decompiling assemblies.
NikiforovAll/claude-code-rules
This skill should be used when planning and tracking complex feature implementations that require systematic task decomposition.
NikiforovAll/claude-code-rules
Expert guidance for using the GitLab CLI (glab) to manage GitLab issues, merge requests, CI/CD pipelines, repositories, and other GitLab operations from the command line.
NikiforovAll/claude-code-rules
This skill automates version bumping during the release process for the Claude Code Handbook monorepo.
Visualize a Claude Code session as a quest/skill tree — a navigable SVG graph where nodes are turns and edges show flow, with distinct visual encoding for normal flow, dead-ends, corrections…. Reflect Tree is an agent skill from NikiforovAll/claude-code-rules. Visualize a Claude Code session as a quest/skill tree — a navigable SVG graph where nodes are turns and edges show flow, with distinct visual encoding for normal flow, dead-ends, corrections, retries, reversals, and backtracking.
Reflect Tree fits situations like: the user invokes /reflect-tree; asks to map a session as a tree/graph/journey.
Run `npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a claude-code`. Or copy the skill folder (plugins/handbook-reflect/skills/reflect-tree in NikiforovAll/claude-code-rules) into .claude/skills/reflect-tree in your project. Claude Code loads it when a task matches its description.
Run `npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a codex`. Or copy the skill folder (plugins/handbook-reflect/skills/reflect-tree in NikiforovAll/claude-code-rules) into .agents/skills/reflect-tree in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/reflect-tree, .gemini/skills/reflect-tree, .github/skills/reflect-tree and .opencode/skills/reflect-tree in your project.
Going by SKILL.md and its folder, Reflect Tree needs Python for the scripts in its folder. Our summary lists: Python 3.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Reflect Tree is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Reflect Tree: Visualize (openclaw/openclaw, 392k stars), Reflect (alirezarezvani/claude-skills, 28k stars), Visual Style (calesthio/OpenMontage, 66k stars) and D3 Visualization (nexu-io/open-design, 100k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
NikiforovAll (a GitHub user) maintains it in NikiforovAll/claude-code-rules, which has 141 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on October 2, 2026.
Source: NikiforovAll/claude-code-rules on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.