Agent skill

Reflect Tree

by NikiforovAll in 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…

Apache-2.0Auto-check passed

Install Reflect Tree

skills CLI
$ npx skills add NikiforovAll/claude-code-rules --skill reflect-tree -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install NikiforovAll/claude-code-rules reflect-tree --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
reflect-tree
GitHub stars
141
Token cost
~2.8k tokens
SKILL.md length
1,340 words
Files
3 (incl. scripts)
Skills in repo
26
Repo updated
First seen
Licence
Apache-2.0

At a glance

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…

  • Works in 3 steps: $TMPDIR (Unix/macOS) → $TMP or $TEMP (Windows / Git Bash) → /tmp as fallback
  • The user invokes /reflect-tree
  • SKILL.md covers When to use, Node classifications, Edge types and Knowledge mining (per-node…, plus 5 more sections
  • Runs Python scripts from its folder

What it does

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.

When your agent uses it

  • The user invokes /reflect-tree
  • Asks to map a session as a tree/graph/journey

Example prompts

  • “/reflect-tree”

Requirements

  • Python 3

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. $TMPDIR (Unix/macOS)
  2. $TMP or $TEMP (Windows / Git Bash)
  3. /tmp as fallback

What it can do on your machine

Read from SKILL.md and the folder at commit 281c063. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    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.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~134
When it runs · the whole SKILL.md, loaded when a task matches
~2.8k

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.

Safety

Auto-check passed

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.

SKILL.md

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.

Download SKILL.mdSave it as .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.
name
reflect-tree
description
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 tree/graph/journey.
context
fork
argument-hint
`<current_session> or <session-id-or-path>`

/reflect-tree — session quest-tree

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.

When to use

  • User invokes /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.
  • User invokes /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

Node classifications

Each turn becomes a node. Pick the strongest applicable label:

  • normal — routine forward progress (user request or assistant tool call/result with no problem)
  • correction — user pushed back on an approach ("no", "don't", "stop", "actually")
  • retry — agent ran the same tool/intent 2+ times with variations before it worked
  • reversal — agent edited then unwound (Edit → revert, Write → delete)
  • dead-end — tool failed because of the environment (missing binary, wrong path, OS mismatch)
  • backtrack — agent abandoned a path and resumed from an earlier state
  • self-correction — agent caught its own mistake mid-stream

Edge types

  • flow (default) — solid thin line between consecutive turns
  • back-edge — curved dashed line from a retry/reversal/correction node back to the ancestor turn it relates to (color matches the classification)
  • backtrack — curved solid arrow showing where the agent jumped back to
  • wasted-segment — thicker grey edge with a T12–T18 · 7 turns label when many turns of fruitless searching collapse into one capsule

Each non-normal node carries a refs array listing the ancestor turn IDs it relates to.

Knowledge mining (per-node insight)

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:

  • highlight (1 line, ≤120 chars) — the single most important fact/decision/lesson. The "if you only read one thing from this turn" sentence.
  • insight (2–5 lines) — the why behind the highlight. What the agent learned, what was non-obvious, what a future agent should do differently or keep doing. Phrase it as durable advice, not a play-by-play.
  • prompt_snippet (copyable text) — a self-contained chunk a user could paste into CLAUDE.md, a memory file, or a future prompt. Must read independently of the tree (no "see T5" references). Format depends on the classification:
    • correction / dead-end → a rule: - Always X, because Y or a <rule> block
    • retry / waste → a recipe: the canonical command/path/tool that worked
    • reversal / backtrack → a guard: "Don't edit X — edit Y instead" with the reason
    • self-correction → a heuristic: "Before doing X, check Y"
    • normal (only the load-bearing ones — request, key decision, final answer) → a fact: the goal statement, the chosen approach, the outcome

Skip 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.

Visual language

ClassShapeColor (CSS token)Symbol
normal userfilled circle--accent—
normal assistantopen circle--fg—
correctiondiamond--err border!
retrydouble ring--warn↻
reversalhollow square--warn dashed⇄
dead-endfilled X--err✕
backtrackarrow node--muted dashed↶
self-correctionsmall 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.

Collapsed-run capsule

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):

html
<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.

Show full SKILL.md (582 more words)Show less

How to render

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:

  • Pure SVG + vanilla JS (no external libs). Sessions are <200 turns; force-directed layouts are overkill.
  • CSS tokens (--bg, --panel, --fg, --muted, --accent, --err, --warn, --ok, …) — keep this scheme.
  • Type pairing: Newsreader italic for the wordmark, JetBrains Mono for everything technical, system sans for prose.
  • Header with goal banner, session metadata, theme toggle, filter chips (one per classification).
  • SVG canvas (vertical spine) with pan + zoom (viewBox-based: wheel zoom on cursor; drag to pan; 0 resets; +/- zoom).
  • Click node → right-side drawer with full text/excerpt, tool calls, args, results.
  • Hover node → tooltip with turn id + 1-line summary; highlight all incident edges.
  • Filter chips dim non-matching nodes/edges to ~15% opacity.
  • Click a back-edge or a refs chip in the drawer → center+pulse the referenced ancestor.
  • Auto-collapse runs of consecutive 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:

  1. $TMPDIR (Unix/macOS)
  2. $TMP or $TEMP (Windows / Git Bash)
  3. /tmp as fallback

Then 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:

  • 2–5 words, lowercase, hyphen-separated, ASCII only
  • describe the task, not the session id (e.g. auth-middleware-rewrite)
  • if the goal is unclear, fall back to <YYYY-MM-DD>-<topic>.html

Open it in the browser when done: start "" <path> (Git Bash on Windows).

Files in this skill

  • 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.

Workflow

Default (no args) — reflect on current session:

  1. From conversation memory, walk the turns in order. For each, decide the classification (default normal); for non-normal turns, fill in refs (which earlier turn(s) this re-attempts/undoes/contradicts).
  2. Group consecutive normal turns into capsules where they would clutter the spine.
  3. Read reference/example.html for the current aesthetic / SVG layout patterns.
  4. Write the tree to the temp dir (<temp>/reflect-tree/<slug>.html) — fresh HTML, same look-and-feel as the reference, populated with real turns/edges.
  5. Open it with start "" <path>.

Explicit session — /reflect-tree <id-or-path>:

  1. Resolve to a JSONL path (if just an id, look under ~/.claude/projects/<encoded-cwd>/<id>.jsonl).
  2. Run scripts/analyze_session.py <path>. Skill is forked (context: fork), so the compressed transcript is safe in context. No subagent.
  3. Walk the transcript and classify each turn yourself — the script does not classify. Focus on user/assistant exchange (what the user wanted vs. what the agent did), not raw tool patterns.
  4. Fallback to JSONL when transcript is lossy. Transcript truncates tool args/results and long messages. When detail matters (exact rejected input, full error body, Edit diff), Read the JSONL directly with offset/limit scoped to the event. JSONL is source of truth; transcript is the index.
  5. Render and open (default steps 2–5).

Notes

  • The tree is a claim about what happened. Be honest — include the agent's own mistakes, not just user corrections.
  • A linear, all-normal spine is a valid output. Do not invent detours to make the tree look more interesting.
  • Sibling: /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

Files

SKILL.md and 2 other files (scripts) in plugins/handbook-reflect/skills/reflect-tree of NikiforovAll/claude-code-rules.

  • SKILL.md
  • reference/example.html
  • scripts/analyze_session.py

Open the folder on GitHubat commit 281c063

Compare with similar skills

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.

Reflect Tree compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Reflect Tree this skillNikiforovAll/claude-code-rules141—~2.8kAutomated safety check: PassApache-2.0
Visualizeopenclaw/openclaw392k—~2.4kAutomated safety check: PassMIT
Reflectalirezarezvani/claude-skills28k1 repos~2.4kAutomated safety check: PassMIT
Visual Stylecalesthio/OpenMontage66k—~1.5kAutomated safety check: PassAGPL-3.0
D3 Visualizationnexu-io/open-design100k—~523Automated safety check: PassApache-2.0
Visual Regressionthedaviddias/Front-End-Checklist74k—~493Automated safety check: PassMIT

Similar skills

  • Visualize

    openclaw/openclaw

    Create inline visuals for code and explanations, or author persistent OpenClaw dashboard widgets with showwidget.

    392k GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • Reflect

    alirezarezvani/claude-skills

    Mid-conversation reflection skill that pauses execution and zooms out from detail-mode to honestly reassess direction, assumptions, and bias.

    28k GitHub starsUsed in 1 repo~2.4k tokens
    Agent WorkflowsAuto-check passed
  • Visual Style

    calesthio/OpenMontage

    Create, extract, and apply portable visual design systems via visual-style.md files.

    66k GitHub stars~1.5k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed
  • D3 Visualization

    nexu-io/open-design

    Teaches the agent to produce D3 charts and interactive data visualizations.

    100k GitHub stars~523 tokensUpdated today
    Data & AnalyticsAuto-check passed
  • Visual Regression

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing CI coverage, automated checks, or test strategy related to Use visual regression testing.

    74k GitHub stars~493 tokensUpdated 2 days ago
    Testing & QAAuto-check passed
  • Visualize

    code-yeongyu/oh-my-openagent

    Builds a self-contained HTML page (chart, table, diagram, dashboard) to show inline in a thread.

    70k GitHub stars~954 tokensUpdated today
    Frontend & DesignAuto-check passed

More from NikiforovAll/claude-code-rules

All 26 skills in this repo
  • Reflect Solution

    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…

    141 GitHub stars~3.8k tokensUpdated 7 days ago
    Auto-check passed
  • Dotnet Analyzers

    NikiforovAll/claude-code-rules

    Run dotnet format to fix code style and analyzer diagnostics (IDE0005, CA, SA).

    141 GitHub stars~1.9k tokensUpdated 7 days ago
    Auto-check passed
  • Ilspy Decompile

    NikiforovAll/claude-code-rules

    Understand implementation details of .NET code by decompiling assemblies.

    141 GitHub starsUsed in 2 repos~760 tokens
    Auto-check passed
  • Structured Plan Mode

    NikiforovAll/claude-code-rules

    This skill should be used when planning and tracking complex feature implementations that require systematic task decomposition.

    141 GitHub stars~4.2k tokensUpdated 7 days ago
    Auto-check passed
  • Glab

    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.

    141 GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check passed
  • Version Bump

    NikiforovAll/claude-code-rules

    This skill automates version bumping during the release process for the Claude Code Handbook monorepo.

    141 GitHub stars~858 tokensUpdated 7 days ago
    Auto-check passed

Questions about Reflect Tree

What does Reflect Tree do?

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.

When should I use Reflect Tree?

Reflect Tree fits situations like: the user invokes /reflect-tree; asks to map a session as a tree/graph/journey.

How do I install Reflect Tree in Claude Code?

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.

How do I install Reflect Tree in Codex?

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.

Can I use Reflect Tree in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Reflect Tree need to run?

Going by SKILL.md and its folder, Reflect Tree needs Python for the scripts in its folder. Our summary lists: Python 3.

Does Reflect Tree access the network?

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.

Is Reflect Tree safe to install?

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.

What licence does Reflect Tree use?

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.

How many tokens does Reflect Tree use?

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.

What are the alternatives to Reflect Tree?

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.

Who maintains Reflect Tree?

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.