By hirokita117
リポジトリやドキュメントを、固定ルールの DSL(repo-map v1 / document-map v1)を正本として地図化する Agent Skills 集。DSL 生成(repo-map-notation / document-map-notation)と決定的レンダリング(notation-render)を分離し、共通土台(notation-core)で支える。生成済み HTML をローカル Claude Code とつなぐ対話ビューア(repo-map-interactive-viewer)も同梱。
ユーザーが指定したドキュメント(Markdown・テキスト・仕様書・設計書・README・議事録・PRD 等)を読み取り、 内容の構造・論点・関係を、固定ルールの DSL `document-map v1` テキストに落とす Skill。 Turn a document (Markdown, spec, design doc, README, meeting notes, PRD) into a fixed-grammar `document-map v1` DSL — generation only, no drawing. タイトル・主要セクション・重要概念・要件・決定事項・未決事項・リスク・関係者・外部依存と、 それらの関係を、意味層(ノード・エッジ)とレイアウト層に分けて出力する。深度(0/1/2)で 大きさを制御し、まず粗く、必要なら対象セクションを絞って深掘りする。全文要約はしない。 次のような発話で起動する: 「このドキュメントを図解して」「この仕様書を構造化して」「この Markdown を図にしたい」 「この PRD の論点マップを作って」「この議事録を関係図にして」「この設計書の構成を可視化して」 「添付ファイルを document-map DSL にして」「この要件定義の構造を地図にして」「ドキュメントの論点を整理して図に」 「README の全体像を図解」「会議メモの決定事項と宿題を関係図に」「この章だけ詳しく構造化して」。 出力は必ず `# document-map v1` で始まるテキスト。 禁止: DSL を出さずに Mermaid / SVG / HTML など図を直接生成しないこと(描画は `notation-render` の役割)。 ドキュメントの全行・全項目を網羅して詰め込まないこと(重要なものへ圧縮する)。リポジトリ解析はしないこと (それは `repo-map-notation`)。
記法中心設計(Notation-first design / Mid Notation Pattern, MNP)の共通土台を提供する Skill。 Shared principles for notation-first design: keep a DSL as the single source of truth and split generation from rendering. リポジトリ図解に限らず「意味層を DSL として正本化し、生成(AI・人が編集)と 表現(描画)を分離する」設計の用語・原則・検証観を扱う。`repo-map-notation` と `notation-render` の 土台であり、初回や設計判断に迷ったときに参照する。 次のような発話で参照する: 「記法の設計原則を知りたい」「DSL と描画を分けたい」「中間記法で図解したい」 「MNP 的に状態をテキストで持ちたい」「記法中心設計とは何か」「DSL を正本にする設計にしたい」 「意味層とレイアウトを分けたい」「AI に決まった記法で出力させたい」「同じ入力なら同じ図にしたい」 「notation の共通ルールを決めたい」「新しい記法(DSL)を設計したい」「同期ループを設計したい」 「自由作図をやめて決まった記法にしたい」。 この Skill 自体は具体的な DSL 文法を定義しない(それは `repo-map-notation` の役割)。原則と用語のみを扱う。
notation(`repo-map v1` / `document-map v1` DSL)を、**DSL テキストだけ**を入力に、決定的に図へ変換する Skill。 Render a notation DSL (`repo-map v1` or `document-map v1`) into a deterministic diagram — input is the DSL text ONLY. 先頭行のバージョンで対応を分岐する(未知バージョンは描かず拒否)。 `parse → validate → layout → emit` の手順で、同じ DSL からは常に同じ図を出す。出力は HTML(既定・単一ファイルの インタラクティブ Viewer・クリック質問パネル付き・`data-*`+凡例)、任意で Mermaid。色・フォント・配置は固定テーマと固定アルゴリズムで決まり、 実行ごとにブレない。 次のような発話で起動する: 「この DSL を HTML にして」「repo-map を描画して」「document-map を描画して」「notation を可視化して」「地図を HTML で見せて」 「DSL を図にして」「repo-map v1 をレンダリングして」「document-map v1 をレンダリングして」「この記法を絵にして」「構造図を HTML で出力」 「出力された DSL を描いて」「同じ DSL なら同じ図にして」「凡例つきの HTML プレビューで」。 禁止(重要・本文でも再掲): 入力された DSL 以外(自然言語の要望・口頭のレイアウト・リポジトリの再走査)から 図を描かないこと。DSL が無ければ描かず、不足や矛盾は `repo-map-notation` に差し戻すこと。 同じ DSL から毎回異なるレイアウトを出さないこと。
`repo-map v1` から生成された HTML Viewer に、ローカル Claude Code 連携・プロンプトコピー・ Python ブリッジ起動手順を足して「対話できる地図」にする Skill。 Make a generated repo-map HTML viewer interactive: click a node, then ask local Claude Code about it — via a stdlib-only Python localhost bridge, or via prompt-copy fallback. 描画そのものではなく、生成済み HTML を使った理解補助・対話ビューアを担当する (描画は `notation-render`、DSL 生成は `repo-map-notation`)。 次のような発話で起動する: 「repo-map HTML をインタラクティブにしたい」「Claude Code と HTML Viewer をローカルでつなぎたい」 「Python ブリッジを使って Claude Code に質問したい」「生成済み repo-map HTML からコード理解を深めたい」 「プロンプトコピー方式または localhost bridge 方式で使いたい」「図のノードをクリックして質問したい」 「ローカルで repo-map を見ながら Claude に聞きたい」。 完全にローカル用途(外部サーバ・社内 Git にアップロードしない)。Node.js 不使用、Python 標準ライブラリのみ、 裏側は `claude` CLI。任意コマンド実行はさせない。
巨大なリポジトリの構造を、固定ルールの DSL `repo-map v1` テキストに落とす Skill。 Turn a (possibly huge) repository into a fixed-grammar `repo-map v1` DSL — generation only, no drawing. ディレクトリ・パッケージ境界・代表的な依存関係を読み取り、認知負荷を下げる「地図の素」を 意味層(ノード・エッジ)とレイアウト層に分けて出力する。スコープ(root)と深度(0/1/2)で 大きさを制御し、まず粗く、必要に応じて範囲を絞って深掘りする。 次のような発話で起動する: 「このリポジトリを図解して」「アーキテクチャ地図を作って」「依存関係を DSL にして」 「モノレポの構造を可視化したい」「コードベースの全体像が欲しい」「repo-map を作って」 「構造をテキストで持ちたい」「どのパッケージが何に依存しているか地図にして」 「オンボーディング用の構造図を」「認知負荷を下げる地図がほしい」「この範囲を深掘りした地図に」。 出力は必ず `repo-map v1` テキスト。 禁止: DSL を出さずに Mermaid / Figma など図を直接生成しないこと(描画は `notation-render` の役割)。 リポジトリの全ファイルを列挙して DSL に埋め込まないこと(package / module 粒度に抽象化する)。
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
このリポジトリは上記記事から着想を得ていますが、本リポジトリの DSL 仕様・文法・検証規則・レンダリング規約・文章はすべて hirokita117 が独自に書き起こしたものであり、記事に付属する Skill ZIP や export の再配布ではありません。
巨大なリポジトリを、固定ルールの DSL(中間記法)を正本にして地図化し、認知負荷を下げるための Agent Skills 集です。
「どう描くか(描画コーディング規約)」を Skill に詰め込むのではなく、
repo-map-notation)notation-render)に役割を分けます。図そのものではなく、意味層(DSL)を唯一の正本として扱う設計です。HTML はそこからの派生物にすぎません。
巨大リポジトリの全体像は、ファイルを直接眺めても頭に入りません。かといって、毎回 AI に自由作図させると、生成のたびに図がブレて差分を追えず、結局「読めない絵」が増えます。
そこで本リポジトリは次の立場をとります。
repo-map v1)**に落とす。結果として、構造の編集・差分レビュー・再描画がすべてテキスト上で完結し、認知負荷が下がります。
| # | Skill | 役割 | 入力 → 出力 |
|---|---|---|---|
| 1 | notation-core | 記法中心設計(Notation-first design / MNP)の共通土台・用語・原則 | 設計判断 → 原則 |
| 2 | repo-map-notation | リポジトリ構造を repo-map v1 DSL に落とす(DSL 生成のみ) | リポジトリ → DSL テキスト |
| 3 | document-map-notation | ドキュメント(仕様書・設計書・README・議事録・PRD 等)の構造・論点・関係を document-map v1 DSL に落とす(DSL 生成のみ) | ドキュメント / 本文 → DSL テキスト |
| 4 | notation-render | DSL だけを読んで図に変換(決定的レンダリング・先頭行でバージョン分岐) | DSL テキスト → HTML |
| + | repo-map-interactive-viewer | 生成済みインタラクティブ HTML をローカル Claude Code とつなぐ対話ビューア(描画はしない・repo-map / document-map 両対応) | HTML + クリック → ローカル Claude の回答 |
repo-map-notation / document-map-notation は DSL しか出しません。Mermaid / Figma を直接は描きません。対象が違うだけで(リポジトリ / ドキュメント)、どちらも notation-render に渡します。notation-render は DSL しか受け取りません。自然言語の要望や口頭のレイアウトから直接図を描くことはしません(不足があれば DSL を出した生成 Skill に戻します)。# repo-map v1 / # document-map v1 を先頭行で判定し、未知バージョンは描かず拒否します。HTML は既定で data-*+質問パネル付きのインタラクティブ Viewer を出します。repo-map-interactive-viewer はアドオンです。生成済み HTML を 127.0.0.1 限定の Python ブリッジで配信し、ノードをクリックしてローカル Claude Code に質問できるようにします(完全ローカル・Node.js 不要・Python 標準ライブラリのみ)。対話は読み取り専用で DSL 正本を変えません。notation-core は、初めて触るときと、設計判断に迷ったときに読む土台です。毎回読む必要はありません。詳しい連携は SKILLS_MAP.md を参照してください。
本リポジトリは Claude Code の plugin(インストール)として配布します。plugin の install は Skill の Markdown と同梱スクリプトをキャッシュに置くだけで、Node.js や Python は一緒には入りません。使う機能に応じて、手元のマシンに次を用意してください。
| 要件 | 必須? | 説明 |
|---|---|---|
| Skill 対応エージェント | ✅(plugin 利用時は Claude Code) | SKILL.md を読んで従う本体。plugin 導入は Claude Code の /plugin 系コマンド。Cursor 等へ手動コピーする場合は、そのツールが Agent Skills を読めること。 |
| 対象リポジトリの読み取り | repo-map-notation 利用時 | エージェントがファイル・依存関係を調べられること(エージェント側のツールに依存)。 |
| Web ブラウザ | HTML を見るとき | 生成物のプレビュー用。 |
plugin 導入後、Skill 本文と skills/**/scripts/ は ~/.claude/plugins/ 配下のキャッシュに置かれます(手動コピーの場合は ~/.claude/skills/ またはプロジェクトの .claude/skills/)。エージェントがレンダラーやブリッジを実行するときは、インストール先の skills/... パスを指します(clone した場合はリポジトリ内の同じ相対パス)。
npm / pip のインストールは不要です(同梱スクリプトは Node 標準ライブラリ・Python 標準ライブラリのみ)。
| やりたいこと | 追加で必要なもの |
|---|---|
DSL だけ作る(repo-map-notation) | なし(エージェントのみ) |
設計原則の参照(notation-core) | なし |
決定的に HTML を出す(notation-render・推奨) | Node.js 18+(推奨 20+)。node skills/notation-render/scripts/render_repo_map.mjs ... |
| インタラクティブ HTML を bridge で Claude に質問 | Python 3(標準ライブラリのみ)+ claude CLI |
| インタラクティブ HTML を prompt copy のみ | ブラウザのみ(ブリッジ・claude CLI 不要) |
notation-render は、同じ DSL から毎回同じ図にするため LLM が HTML を手書きするのではなく、同梱レンダラーを実行するのが主経路です。Node が無い環境ではエージェントが仕様どおり描くこともできますが、決定性・再現性の面では Node がある環境を推奨します。
| Skill | 同梱スクリプト | ランタイム |
|---|---|---|
notation-core | なし | 不要 |
repo-map-notation | なし | 不要 |
notation-render | scripts/*.mjs | Node.js 18+(外部パッケージなし) |
repo-map-interactive-viewer | scripts/*.py 等 | Python 3(stdlib のみ)+ bridge 時は claude CLI |
レンダラーの詳細は skills/notation-render/scripts/README.md、ブリッジは skills/repo-map-interactive-viewer/references/local-bridge.md を参照してください。
ターミナルで次を実行し、バージョンが表示されれば利用可能です。
node --version # v18 以上(推奨 v20 以上)
python3 --version # 3.8 以上(3.10+ 推奨)
claude --version # bridge 方式のみ
command not found や古いバージョンのときは、下記のいずれかで入れてください。本リポジトリ用の pip / npm install は不要です(ランタイム本体だけあれば足ります)。
notation-render)npx claudepluginhub hirokita117/notation-skills --plugin notation-skillsTwo skills that turn a document, repo summary, PR/diff, README, design note, or spec into an offline HTML explainer bundle. generate-explainer-yaml captures meaning (core.yaml) + presentation strategy (view.yaml); generate-explainer-html builds a light/dark bundle whose right pane switches between additive iframe views, with copyable prompts that ask a local-file-reading AI to add more views.
Ultra-compressed communication mode. Cuts ~75% of tokens while keeping full technical accuracy by speaking like a caveman.
Frontend design skill for UI/UX implementation
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Memory compression system for Claude Code - persist context across sessions
Marketing skills for AI agents — conversion optimization, copywriting, SEO, paid ads, ad creative, and growth
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.