Menu
Build a self-contained interactive or animated HTML page that explains how an algorithm or piece of code works. Use to pay down cognitive debt when a written explanation isn't enough.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Run the compound engineering step — a short retrospective after a piece of work that folds what was learned back into CLAUDE.md, the skills, or the hoard. Use at the end of every significant task.
Sort out git messes and perform history surgery — undo/rewrite commits, resolve conflicted merges and rebases, recover lost code via reflog, find regressions with git bisect.
Save a newly-figured-out trick as a minimal working example in hoard/, so future sessions can reuse or recombine it. Use after solving something non-obvious for the first time.
Manually exercise code beyond the automated tests — python -c for libraries, curl for APIs, browser automation with screenshots for web UIs — and document the results. Use after tests pass, before declaring work done.
Pre-pull-request checklist — verify the code works, the diff is reviewable, and the PR carries context and evidence of testing. Run before opening any pull request.
Proofread a document before publication — spelling, grammar, repetition, logical and factual errors, weak arguments, placeholder links. Reports issues; never rewrites the author's voice.
| name | interactive-explanation |
| description | Build a self-contained interactive or animated HTML page that explains how an algorithm or piece of code works. Use to pay down cognitive debt when a written explanation isn't enough. |
When a walkthrough still leaves an algorithm feeling like a black box, build an animated, interactive explanation of it as a single HTML page.
walkthrough.md if one exists.notes/explanations/ that
animates the algorithm step by step. Design for insight: show the
intermediate states and decisions (attempted placements, comparisons,
backtracking) that make the mechanism click, not just the final result.#fragment so links are shareable).* { box-sizing: border-box; }.<script type="module">, two-space indents.