Menu
アルゴリズムや仕組みを、単一 HTML のインタラクティブ／アニメーション付きページで説明する。文章だけでは腑に落ちないときの認知的負債の返済に使う。
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
| name | interactive-explanation |
| description | アルゴリズムや仕組みを、単一 HTML のインタラクティブ／アニメーション付きページで説明する。文章だけでは腑に落ちないときの認知的負債の返済に使う。 |
ウォークスルーを読んでもまだブラックボックスに感じる仕組みは、アニメーションする 単一 HTML ページにして理解する。
このプロジェクトなら例えば: HID レポートのビット構成、BLE の接続・切断の状態遷移、 マクロのステップ実行とタイミング、タッチ座標からボタンインデックスへの写像、 起動時のストレージのフォールバック。
walkthrough があればそこから始める。notes/explanations/ に自己完結した単一 HTML を置き、段階的にアニメーション
させる。中間状態と分岐（試した候補、比較、巻き戻し）を見せる。
最終結果だけでは腑に落ちない。#fragment に
持たせるとリンクを共有できる）。* { box-sizing: border-box; } から始める。<script type="module">、インデント 2 スペース。compound engineering のステップ。ひとつの作業のあとに短く振り返り、学んだことを CLAUDE.md・スキル・hoard に畳み込む。意味のある作業の終わりごとに使う。
実機をシリアル越しに操作して挙動を確認する。tools/deck.py で JSON Lines を投げ、人間にしかできない確認は手順書にして渡す。ビルドが通ったあと、動いたと言い切る前に使う。
arduino-cli でファームをビルド／書き込みする。ボード設定、ライブラリのバージョン固定、書き込み時の注意をまとめてある。ファームを触ったあと、実機で確かめる前に使う。
git の混乱を収拾し、履歴を手術する。コミットの取り消し・書き換え、conflict の解消、reflog からの復旧、git bisect による退行の特定。
新しく分かった小技を、動く最小例として hoard/ に保存する。非自明なことを初めて解決したあとに使う。
自動テストの外側で実物を動かして確かめ、結果を notes/ に記録する。ホスト側は使い捨てプログラム、実機はシリアル、web はブラウザ自動化。テストが通ったあと、完了と言う前に使う。