Claude CodeやCodexなどのAIエージェントに追加するスキルで、質問への回答を長文ではなく図表付きの1枚HTMLページとして生成します。
中辛 の解説
難しい質問に対して、AIエージェントが長文の代わりに図表付きの1枚HTMLページを生成するためのスキル(拡張機能)です。仕組みとしては、エージェントが内容だけの短いMarkdown原稿を書き、同梱のCLIがテンプレート選択・パネル配置・テーマ適用・図のレイアウト計算(dagre使用)を行ってHTMLに変換します。これによりモデルがCSSやSVG座標を手書きする必要がなくなり、ベンチマークでは出力トークンが6,873から923へ、応答時間が46秒から13秒へ短縮されたと報告されています。インストールはnpx skills addなどのコマンド1つで完了し、npm installの手間は不要です。対応エージェントはClaude Code、Codex、Cursor、OpenCodeなど70以上で、設定変更はスラッシュコマンドや自然文の指示で行います。動画生成機能(3Blue1Brown風の解説動画)も備え、音声にはElevenLabs APIキーまたはOS標準音声を使用できます。
こんなリポジトリです
こんなときに便利です
- 開発者がリポジトリのモジュール構成をAIに聞き、フォルダ構成図と呼び出しグラフ付きのページとして受け取る
- 技術選定の際にAIに「RedisかMemcacheか」のように質問し、比較表と結論付きのページを得る
- TCPハンドシェイクなどの技術概念をAIに質問し、シーケンス図や状態図付きの説明ページ、または3Blue1Brown風の解説動画として受け取る
主な機能
ほかとの違い
レイアウトや描画計算をモデルからCLI側に完全に移すことで、HTML直接生成よりも出力トークン数と待機時間を削減する点が特徴です。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- Node.js 20以上
- Claude Code・Codex・Cursor・OpenCodeなど対応AIエージェントの導入
- (動画のmp4出力時のみ)Chrome、ffmpeg、Node.js 22以上
- (ElevenLabsナレーション利用時のみ)ELEVENLABS_API_KEY
すぐに始める
- エージェントに任せてインストールする場合は、Claude Code・Codex・Cursor・OpenCodeなどに以下を貼り付けます。
npx -y skills add QingYunA/answer-me-with-html -g -y
- Claude Codeではプラグインとして導入することもできます。
/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html
- 1コマンドでインストールし、対象エージェントを選択することもできます。
npx skills add QingYunA/answer-me-with-html
- 手動でインストールする場合はリポジトリをクローンしてスキルフォルダをコピーします(Claude Codeの例)。
git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try QingYunA/answer-me-with-html
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2026 年に作成
「AI エージェント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/QingYunA/answer-me-with-html)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る