agentleFS
Sign inStart free
junho5400junho5400/cramcode/.claude/skills/visualize/SKILL.md

visualize

Skill1 starsChanged 4 months agoMITView on GitHub

Render an interactive algorithm-stepper visual in the browser — arrays with pointers/windows, hashmap state, DP grids, binary trees, code with line highlighting. Use when the user asks to "show", "diagram", or "visualize" something, or proactively during /teach and /explain for spatial concepts.

45 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use exp-pilot-eval, exp-pilot-run and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • skyllwtSkill

    exp-pilot-eval

    Pilot result evaluation — read pilot results, apply success criteria, update idea page (pilot_result, failure_reason if failed), generate PILOT_VERDICT_REPORT. Called by /ideate Phase 5 after /exp-pilot-run.

    Also in 4 projects that use this

  • skyllwtSkill

    exp-pilot-run

    Pilot experiment execution — read Pilot Spec YAML, write pilot code, run experiment(Confirm with the user before operation and require the applicant to conduct manual inspection), return results. Called by /ideate Phase 5. Does NOT modify wiki pages or judge pass/fail.

    Also in 4 projects that use this

  • LambenthanSkill

    daily-arxiv

    每日从 arXiv 拉取新论文，过滤相关性，auto-ingest 高优先级论文，检测 SOTA 更新

    Also in 4 projects that use this

  • LambenthanSkill

    exp-eval

    实验判决门：Review LLM 独立评判实验结果 → 4 种判决路径 → 自动更新 claims confidence、ideas status、graph edges

    Also in 4 projects that use this

  • phanghonghaoSkill

    poster

    HTML/CSS A4 海报生成。从沙龙/活动 Markdown 文件生成科技风 A4 海报 PDF/PNG。Use when user mentions: poster, 海报, 海报生成, make poster, generate poster, 活动海报, 沙龙海报.

    Also in 4 projects that use this

  • +1 more from skyllwt
  • +6 more from Lambenthan

The file

We split this skill into the rules it gives an agent

2 rules. 0 are common, 0 are distinctive, and 2 are very specific to this project.

  • 0

    Common

    Most of the 43 edited versions we read keep these.

  • 0

    Distinctive

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Include code with line refs: when walking an implementation — the left pane highlights the executing line per frame.

    line 27
  2. Very specific:

    Flow: write the spec to memory/.staging/visual.json → run the script → it opens in the browser and prints the path — share the path in chat.

    line 33

“Common” is measured: kept by at least 6 in 10 of the 43 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

/visualize — show, don't describe

Turn an algorithm's execution into stepping frames the user plays in the browser. The spec schema lives in PROTOCOL.md § "Visuals"; the renderer is deterministic:

python3 scripts/visualize.py            # reads memory/.staging/visual.json

How to build good frames:

  1. One idea per frame. A frame exists to show a single state change: "the duplicate arrives", "shrink restores the invariant". 6–12 frames total; if you need more, you're animating bookkeeping, not insight.
  2. Captions narrate the KC. Each caption should read like the teach protocol out loud — the KC's insight in action, not "i becomes 4".
  3. Show the state that does the work. Sliding window → the counts map (kv) evolving; monotonic stack → the stack as a second array; DP → the grid with cur on the cell being filled; trees → highlight the current node, done the finished ones.
  4. Include code with line refs when walking an implementation — the left pane highlights the executing line per frame. Keep code ≤ 15 lines.
  5. Pick the representation by family: arrays (pointers/windows/stacks), grid (DP tables, matrices, islands), tree (level-order with nulls), kv (any auxiliary state). Combine freely; use only what's needed.

Flow: write the spec to memory/.staging/visual.json → run the script → it opens in the browser and prints the path — share the path in chat. If the user asks for changes ("slow down at step 4", "show the stack too"), edit the frames and re-run with the same --out name so it overwrites.

When NOT to: phone/cloud sessions (no browser — narrate instead), and concepts with no spatial state (complexity facts, API trivia). A visual that doesn't move understanding is decoration.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free