메뉴
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.