菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.