mcpField
E
explain-code

explain-code

github.com/helderberto開発2060 回インストール1 週間前に更新
リポジトリ

explain-code について

explain-codeは、身近な例え、ASCII図、段階的な解説、よくある注意点を使ってコードを対話的に説明するスキルです。コードや処理の流れを体系的に理解したい人に向いています。

主な機能

  1. 01身近な例えから説明
  2. 02ASCII図で構造を表示
  3. 03処理を段階的に解説
  4. 04よくある注意点を提示
  5. 05複数の図形式に対応

活用シーン

  1. 01関数の制御フローの説明
  2. 02モジュール間の呼び出し関係の整理
  3. 03データ構造の階層の表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/helderberto/agent-skills --skill explain-code

インストール後、Claude Code で/explain-codeを入力して読み込まれたか確認します。

詳細

コードを説明するときは、必ず次の内容を含めてください。

  1. たとえ話から始める：コードを日常生活にあるものにたとえます
  2. 図を描く：ASCII アートを使って、フロー、構造、関係性を示します
  3. コードを順を追って解説する：何が起きるのかをステップごとに説明します
  4. 注意点を強調する：よくある間違いや誤解を説明します

会話調で解説してください。複雑な概念には、複数のたとえ話を使ってください。

図の種類

フロー／制御フロー：

Input -> [Validate] -> [Process] -> [Save] -> Output
                          |
                       [Error] -> Return 400

コールスタック／シーケンス：

Client          API           DB
  |--request-->  |             |
  |              |--query----> |
  |              |<--result--- |
  |<-response--  |             |

ツリー／階層：

App
+-- Header
|   +-- Nav
+-- Main
|   +-- Sidebar
|   +-- Content
+-- Footer

状態機械：

[Idle] --submit--> [Loading] --success--> [Done]
                       |
                    error|
                   [Failed] --retry--> [Loading]

データ構造：

User {
  id: string
  profile: Profile --> { name, avatar, bio }
  posts: Post[]    --> [{ id, title, body }]
}

変更前／変更後：

Before:               After:
fn()                  fn()
  doA()                 doA()
  doB()                 doB()
  doC()     ->          helpers()
  doD()                   doC()
  doE()                   doD()
                          doE()

エラー処理

  • コードが外部ファイル／モジュールを参照している場合は、解説する前にそれらを読んでください
  • 図が複雑すぎる場合は、複数の簡潔な図に分け、それぞれで1つの概念を取り上げてください

コメント

Markdown 対応