Communityライティング&編集github.com

dworzycp/adventure-book

任意のMarkdown文書やストーリー(README、オンボーディングガイド、AGENTS.md、ADR、仕様書、ランブック、チュートリアル、障害報告、おとぎ話など)を、選択したテーマ(中世の騎士のクエスト、宇宙ミッション、海賊の航海、ノワール事件、ジャングル探検、深海ダイブ、またはユーザーが考案した任意のテーマ)に沿った、自己完結型のインタラクティブなHTMLアドベンチャーブックに変換します。各パートの背後にある本当のコンテンツを明らかにする、イラスト付きSVGシーン、段階的なナビゲーション、進捗マップ、ポップアウトを備えています。

adventure-book とは?

このスキル「Adventure Book」は、ユーザーが提供した任意のMarkdown文書(README、仕様書、ガイドなど)を、没入感のある対話型のHTMLアドベンチャーブックに変換する、強力な文書変換ツールです。中世の騎士、宇宙探検、海賊航海、ノワール、深海ダイブなど、多彩なテーマから選択でき、ユーザーが独自のテーマを考案することも可能です。変換されたHTMLファイルはオフラインで動作し、外部依存関係が一切不要で、SVGのイラスト、段階的なストーリーテリング、進捗マップ、クリック可能なポップアウトを備えており、元の文書の事実や手順を比喩的な物語として学習できます。このスキルは、ドキュメントを「ゲーム化」したり、魅力的なストーリーとして提示したい場合に特に有用で、開発者向けのテクニカルガイドからおとぎ話まで、あらゆる文書を楽しく学べる冒険に変えることができます。ワークフローは、元の文書の内容を深く理解し、テーマと比喩体系を固定し、物語の骨格を構築し、5〜9のステージに分割して執筆し、最終的にビルドと検証を行うという体系的なプロセスに従います。各ステージは「あなた」視点で現在形で書かれ、常に1つのビート(出来事)を含む必要があり、単なる場所の説明になってはいけません。ポップアウトは、元の文書の重要な事実(コマンド、ルール、数値など)を隠し、読者が能動的に発見できるように設計されています。このスキルは、主にClaude Code、Cursor、CodexなどのAIエージェントと連携して使用され、ユーザーのリクエストに基づいて自動的にアドベンチャーブックを生成します。

対応~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/dworzycp/ai-adventure-book-skill/tree/main

Installed? Explore more ライティング&編集 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

アドベンチャーブック

あなたは文書を旅に変えています。読者は、ユーザーが選んだテーマに沿ったイラスト入りの物語を段階的に旅し、物語の中の強調表示された単語をクリックすると、それが表す本当のもの(元の文書に書かれている実際のコマンド、ルール、決定、事実)を見ることができます。出力は1つの.htmlファイルで、オフラインで動作し、依存関係はありません。

エンジン(ナビゲーション、ポップアウトドロワー、コーデックス、進捗マップ、パララックス、キーボード操作、モバイルレイアウト、動きの軽減)は、すでにassets/template.htmlに組み込まれています。scripts/build_book.pyがあなたのコンテンツをそれに組み立てます。あなたの仕事は、創造的で忠実な部分です。つまり、物語、寓話、散文、ポップアウト、そしてシーンアートです。

3つのリファレンスがその技術を支えています。references/story.md(構造 — 毎回読むこと)、references/themes.md(テーマごとの語り口と寓話)、およびreferences/scenes.md(描画)です。

設計上防ぐべき2つの失敗は、言葉が多すぎることとその下に物語がないことです。つまり、文書のセクションに扮装させて名前を変え、舞台を次々と繰り出し、本当の事実を雰囲気で埋もれさせてしまうような本です。より少ない言葉で、1つの明確な旅を。

ワークフロー

  1. ソース全体を読む。 見出し、物事が起こる順序、読者がその後何ができるようになるべきか、そして間違えやすい事実(正確なコマンド、名前、数値、ルール)に注意してください。これらの事実こそが、ポップアウトが保護するために存在するものです。
  2. テーマと寓話を固定する。 ユーザーから与えられたテーマを採用します。なければ、素材に合うものを選び、選択したものを伝えてください。対応するreferences/themes.mdのセクションを読み、その語り口、モチーフ、英雄の原型、ステージ命名パターンを確認します。次に、簡単なマッピングテーブルを自分用に作成します。ソース内の各実際の概念と、そのテーマ化された対応物(VPN = ヴェール、データベース = 偉大なる飼いならされた獣、CIパイプライン = 試練の場)です。本全体を通して、すべてのマッピングを安定させてください。読者は寓話を一度学びます。ヴェールが第4章で霧になってしまったら、その本は教えることをやめてしまいます。
  3. 物語を形作る。 references/story.mdを読み、何かを計画する前に、この本のためのストーリースパインを埋めてください。英雄が到達すべき目的、そこに至る「そのせいで」の連鎖、終盤で彼らが犯す過ち、そして本が閉じるイメージです。文書はセクションのリストです。本は結果の連鎖であり、一方を他方に変えることが仕事のすべてです。ソースが単純なリストに見えても、このステップをスキップしないでください。そうしたものこそが、スライドショーになってしまうのです。
  4. ステージを計画する。 5〜9を目指し、それぞれ1ビートをスパインにマッピングします(到着のステージ1つ、中盤を盛り上げる3〜6つ、事態が悪化する1つ、見返りの1つ)。各ステージは通常、ソースの1セクションに対応します。薄すぎてビートを担えないセクションは統合し、約120語以上のナレーションを必要とするセクションは分割します。読者が知識を必要とする順序(通常は文書の順序)でステージを並べてください。各ステージにテーマの語り口に沿ったタイトルとsource:見出しを付け、読者がステージ内から元のセクションを展開できるようにします。
  5. コンテンツファイルを書く 作業フォルダ内に(book.json、stages/NN-name.md、scenes/*.svg)。フォーマットは以下の通りです。
  6. 削ってから、チェックリストを実行する。 「物語を書く」に照らして各ステージを読み直し、おおよそ3分の1の単語を削除してください。最初の草稿は、必要な長さのほぼ2倍になることがほとんどであり、削除した文ごとに、マークされた単語が見えやすくなります。次に、references/story.mdの最後にあるチェックリストを実行し、不合格だった点を修正します。これらは両方ともビルドの前に行うものであり、どちらもオプションの仕上げではありません。
  7. ビルドし、警告を読む。 すべての「idを持つポップアウトが見つかりません」、「見出しが見つかりません」、およびカバレッジ警告を修正します。レポートがクリーンになるか、残っているすべての警告が意図的なものになるまで、再ビルドしてください。
  8. 検証して引き渡す。 ファイルを開く(macOSではopen <file>.html)、または少なくとも利用可能な場合はヘッドレスChromeでスクリーンショットを撮ってください。ユーザーにファイルの場所、操作方法(矢印キー、マップのクリック、光る単語のクリック)、および使用したテーマを伝えてください。

コンテンツフォーマット

book.json(パスはJSONファイルからの相対パス):

{
  "title": "ポータルへの探求",
  "subtitle": "AGENTS.mdを通る騎士の旅",
  "theme": "knight",
  "source": "../AGENTS.md",
  "cover":  { "eyebrow": "インタラクティブアドベンチャー", "scene": "scenes/cover.svg", "blurb": "cover.md" },
  "stages": [ "stages/01-gates.md", "stages/02-forge.md" ],
  "ending": { "scene": "scenes/ending.svg", "blurb": "ending.md",
              "recap": [ "何よりも先に[[ヴェール|vpn]]を越えよ", "すべてのパッケージは`@internal/`バナーを掲げる" ] }
}

各ステージはMarkdownファイルです:

---
id: gates
title: 城郭の門
chapter: 第I章
source: ローカル開発環境のセットアップ
scene: scenes/01-gates.svg
---
霧が道に立ち込め、あなたが城郭に近づくと、衛兵が道を阻みます。[[ヴェール|vpn]]をくぐらなければ、誰も入城を許されないと言います...

## popout: vpn
title: VPN
何よりも先に会社のVPNに接続する必要があります。内部パッケージレジストリとサービスは、ネットワーク内部からのみ到達可能だからです。

ビルドスクリプトが適用または警告するルール:

  • すべての散文フィールドはMarkdownです。すべてのシーンはインラインSVGであり、.svgファイルへのパスとして指定します。
  • [[表示テキスト|id]]はポップアウトリンクを示します。[[docker]]はテキストをidとして使用します。各idには、同じステージ内に## popout: idブロックが必要です(またはbook.json内のブックレベルのpopouts配列)。
  • フロントマターのsource:は、ソース文書内の見出しを指定します。スクリプトはそのセクションをそのまま抽出し、「原典スクロール」ボタンの背後に表示します。ポップアウトブロックは、その説明の下に関連セクションを添付するために、source: <heading>を運ぶこともできます。ただし、それはポップアウトのヘッダー行に、## popout: idの直下でtitle:と並べて配置しなければならず、説明の後に置いてはいけません。誤って配置されると、散文として静かに読み取られ、セクションはカバーされません。
  • テーマは、プリセット名(knight、space、pirate、noir、expedition、deepsea)またはオブジェクト{ "extends": "knight", "colors": {...}, "fonts": {...}, "vocabulary": {...} }です。プリセットはassets/themes.jsonにあり、考案したテーマの出発点として1つをコピーしてください。

ビルド:

python3 <skill-dir>/scripts/build_book.py --content work/book.json --out <name>.html

物語を書く

二人称、現在形、ステージごとに1つのシーンと1つのビート。 「あなた」が英雄です。ステージは場所の説明ではありません。その場所で何かが起こっているのです。あなたは到着し、人または問題に出会い、1つのことを行い、変化するかより良い装備を持って去ります。ステージが「あなたはどこかにいて、雰囲気がある」というだけに要約されるなら、まだビートがありません。ソースセクションからビート(読者がしなければならないこと、してはならない過ち、下された決定)を見つけ、その周りにシーンを構築してください。

計画した形を維持する。 references/story.mdは構造に関する権威です。冒頭で目的を述べ、「そして次に」ではなく「それゆえ」「しかし」で結合されたステージ、盛り上がる中盤、終盤近くでの実際の過ち、繰り返しまたは持ち越されるもの。

関連スキル