mcpField
E
explain

explain

github.com/undefined-uiその他178 回インストール1 日前に更新
リポジトリ

explain について

説明を制御言語の文章、図、インタラクティブ HTML、ナレーション付き動画に変換するスキルです。短いチャット回答から段階的な視覚解説まで、話題に応じた形式を選べます。

主な機能

  1. 01厳格または簡易な STE で執筆
  2. 02技術シート形式の図を作成
  3. 03単一ファイルの対話型 HTML を作成
  4. 04ナレーション付き MP4 を制作
  5. 05話題に応じて形式を選択

活用シーン

  1. 01部品間のつながりがあるシステムの説明
  2. 02対話型の手順でプロセスを提示
  3. 03数学やアルゴリズムの直感的な解説
  4. 04事実に関する質問への簡潔な回答

インストール

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

$npx skills add https://github.com/undefined-ui/explain-skill --skill explain

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/
sheet-template.html
assets/video/example/
narration.json
scene.py
references/
diagram.md
html.md
ste100.md
video.md
scripts/
doctor.py
narrate.py
paths.py
render.py
setup.py
ste_lint.py
tts.py

詳細

explain：Karpathyの出力ラダー

今では、人々はモデルが生成するものを読む時間のほうが、自分で書く時間より長くなっています。生の文章は、内容を理解するのに最も時間がかかる形式です。このスキルでは、さまざまな形式のラダーを上っていきます。段を上るごとに、前の段より内容を理解しやすくなります。

段モード出力最適な用途
1steASD-STE100 に準拠した厳密なテキスト手順書、仕様書など、正確さが必須のもの
1ste80ASD-STE100 に「80％準拠」したテキスト（デフォルト）チャットでの一般的な説明
2diagramテクニカルシート形式の図（HTML + インライン SVG）構造、フロー、比較、「どのように組み合わさるか」
3htmlインタラクティブな単一ファイルのウェブページパラメーター、手順、または操作可能な状態を含むもの
4videoナレーション付きの3Blue1Brown風MP4直感的な理解、数学、段階的に語られるストーリー

1. モードを選ぶ

引数：/explain <topic> [ste|ste80|diagram|html|video] [--lang <code>] [--voice <name>] [--engine elevenlabs|kokoro|piper]

  • ユーザーがモードを指定した場合（または「схема」「страница」「видео」「STE」と言った場合）：そのモードを使います。
  • モードが指定されていない場合：トピックに最も適した、最も上の段を選び、選択したモードを1行で伝えます。
    • 短い事実に関する質問 → チャットで ste80。
    • 部品と接続で構成されるシステム → diagram。
    • 読者が試せるつまみ、入力、段階があるプロセス → html。
    • 直感を徐々に養う必要がある考え方（数学、アルゴリズム、物理学、ML）について、ユーザーが詳しい説明を求めている → video。
  • 2つの段のどちらにするか迷った場合は、下の段を選び、最後に次の段を1行で提案します。

2. すべてのモードに適用するルール

  1. すべての事実を保持します。 制御言語によって変わるのは形式であり、内容ではありません。仕上げる前に、出力をソースと比較し、抜け落ちた事実、数値、但し書き、条件があれば復元します。 簡略化した文章には、詳細がひそかに失われるという既知の問題があります。毎回確認してください。
  2. まずソースを読みます。 トピックがこのリポジトリ内のコード、ファイル、URL、論文の場合は、説明する前に読みます。ソースがある場合、記憶を頼りに説明してはいけません。
  3. 文章はSTEに従います。 すべてのモードの文章（図のラベル、ページの文面、動画のナレーション）は、ユーザーが ste を指定していない限り、ste80 で書きます。references/ste100.md をセッションごとに1回読みます。
  4. 言語。 ASD-STE100は英語の規格です。ユーザーが別の言語で書いた場合は、その言語で回答し、同じ原則（短い文、1文につき1つの考え、能動態、概念ごとに用語を1つ）を適用します。
  5. ファイルの保存先は、現在の作業ディレクトリの explainers/<slug>/ です（slugは、トピック名を短いケバブケースにしたものです）。ユーザーが別の場所を指定した場合は、その場所を使います。チャット内のテキストはファイルに保存する必要はありません。
  6. 結果を開き（Windowsでは start、macOSでは open、Linuxでは xdg-open）、パスをユーザーに伝えます。
  7. 引き渡す前に検証します。 出力を確認します。ブラウザツールがある場合はページを開き、動画は静止画を確認します。重なり、テキストの切れ、誤った事実を修正してから報告します。

3. モード：ste と ste80（第1段）

references/ste100.md を読みます。その後、文章を書きます。

  • ste80 はチャットでのデフォルトです。短い文、能動態、1文につき1つの考え、平易な言葉を使います。
  • ste は厳密なモードです。文章をファイルに書き込み、リンターを実行して、すべてのエラーを修正します。 
    python scripts/ste_lint.py draft.md --mode strict
    （scripts/ はこのファイルと同じ場所にあります。Python 3.8以降であれば動作します。リンターは標準ライブラリのみを使用します。）

4. モード：diagram（段階 2）

references/diagram.mdを読みます。assets/sheet-template.htmlを explainers/<slug>/diagram.htmlにコピーし、サンプルパネルを置き換えます。スタイルは、ゾーン枠、文字付きパネル、注釈付きコールアウト、タイトルブロックを備えた技術図面です。チャットで手早く回答する場合は、Mermaid ブロックで構いません。シート全体はコマンド一つで作成できることを伝えてください。

5. モード：html（段階 3）

references/html.mdを読みます。実際に操作できる要素（ライブモデルを動かすスライダー、ステップ実行、ホバー時の定義表示）を備えた、自己完結型のexplainers/<slug>/index.htmlを1つ作成します。ビルド手順は不要です。

6. モード：video（段階 4）

何かを書く前にreferences/video.mdを読みます。概要：

  1. ツールチェーンを確認します：python scripts/doctor.py。動画のセットアップが不足している（npx skills add後、初めて動画を作成する場合は通常の状態です）と表示された場合は、約400 MB（Manim、Kokoro 音声モデル）をダウンロードすることをユーザーに伝えてから、python scripts/setup.pyを実行します。必要であれば uv がインストールされます。システムに Python がない場合は、代わりにuv run --no-project --python 3.12 scripts/setup.pyを実行します。
  2. explainers/<slug>/narration.json（セグメントに分けた台本）を作成します。
  3. 音声トラックを作成します："$PY" scripts/tts.py explainers/<slug>/narration.json （ELEVENLABS_API_KEYが設定されていれば ElevenLabs、そうでなければ無料のローカル Kokoro または Piper）。
  4. explainers/<slug>/scene.py（Manim を使い、narrate.pyで音声と同期）を作成します。
  5. レンダリングして確認します："$PY" scripts/render.py explainers/<slug>/scene.py --quality l → 静止画を確認 → 修正 → --quality hでレンダリングします。

$PYは動画環境の Python です。doctor.pyでパスが表示されます。

コメント

Markdown 対応