メニュー
Markdown やテキスト仕様書を、要約・構造再編・図表・チャート・ソーストレーサビリティ付きの読みやすい HTML ドキュメントに変換します。仕様書、要件定義、API 仕様、プロダクト仕様、設計ドキュメント、技術文書を可読性の高い HTML に変換したい場合や、要約・再構成・ダイアグラム・グラフ・画像・ビジュアル補助が必要な場合に使用してください。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/ynitto/sandbox --skill spec-to-readable-htmlコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
会話中の話題を、最小の視覚表現（擬似コード・呼び出しツリー・コンポーネントツリー・ファイルツリー・Mermaid・diff・HTML）で見せて理解を助けるスキル。「図で説明して」「見せて」「視覚的に説明して」「イメージで教えて」「構造を見せて」「どう変わるのか見せて」「show me」などで発動する。説明が長文になりそうなときに、文章の代わりに図で示す。
agent-flow の orchestrator 向け高精度タスク分解・戦略選択スキル。要求を分析し、7パターン（map-reduce 含む）＋複合パターンから最適な戦略を選定し、実行可能なタスクグラフを生成する。decomposition スキルの分解能力を内包し、agent-flow の `--planner flow-planner` で利用する。
セッションをまたいで知識・決定事項を継続させたいときのスキル。「覚えておいて」でsave、「思い出して」でrecall、「記憶一覧」でlist、「忘れて」でarchive、「共有して」でshare、「整理して」でcleanup、「役立った／間違ってた」でrate、「固定化して」でconsolidate。重要な知見を発見したら自律的にsaveを実行すること。
SOC 職業分類に基づく
SKILL.md を表示中
| name | spec-to-readable-html |
| description | Markdown やテキスト仕様書を、要約・構造再編・図表・チャート・ソーストレーサビリティ付きの読みやすい HTML ドキュメントに変換します。仕様書、要件定義、API 仕様、プロダクト仕様、設計ドキュメント、技術文書を可読性の高い HTML に変換したい場合や、要約・再構成・ダイアグラム・グラフ・画像・ビジュアル補助が必要な場合に使用してください。 |
| argument-hint | [lang] |
| arguments | lang |
| metadata | {"version":"1.0.0","tier":"stable","category":"document","tags":["html","spec","markdown","documentation","diagram"]} |
仕様書を洗練されたHTMLレポートに変換するスキル。単純なMarkdown→HTMLへの変換ではなく、ソースを分析・要約・再構成し、視覚補助を追加して理解しやすいドキュメントを生成する。
$lang で出力言語を指定する（デフォルト: ja）。省略した場合は日本語で出力する。
このスキルは Windows / macOS / Linux のいずれでも動作する。 出力する HTML は完全にスタンドアロン（CDN 依存なしオプションあり）のため、オフライン環境でも閲覧可能。
以下のような依頼でこのスキルを使用する:
注意: ユーザーが明示的に「忠実な変換」を求めた場合のみ、単純なMarkdown→HTML変換として扱う。
理解しやすさを優先する（書式だけでなく）
トレーサビリティを保持する
Inferred（推論）または Assumption（前提）とマークする視覚補助は必要な場合のみ使用する
出力をポータブルにする
以下のいずれの入力も受け付ける:
HTML を生成する前に以下を特定する:
対象読者や求める詳細レベルが不明な場合は以下をデフォルトとする:
ソースを読み込みマッピングする
読者に優しい構造を作る
選択的に要約する
視覚補助を選択する
洗練された HTML を生成する
section・article・nav・table・figure・figcaption出力を検証する
コンテンツに基づいて視覚補助を選択する:
| ソースコンテンツ | 最適な視覚補助 |
|---|---|
| ステップバイステップのビジネス・ユーザープロセス | フローチャート |
| システム間の API コール | シーケンス図 |
| システムコンポーネントと依存関係 | アーキテクチャ図 |
| ステータスのライフサイクル | 状態図 |
| エンティティと関係のテーブル | ER図 / 関係マップ |
| マイルストーンやフェーズドロールアウト | タイムライン |
| 優先度・ステータス・カテゴリのカウント | 棒グラフ / スタックグラフ |
| 決定の代替案 | 比較マトリクス |
| 画面遷移 | ユーザージャーニー / サイトマップ |
| 長いセクション構造 | サマリーカード |
優先フォーマット:
Mermaid を使用する場合は、後で編集できるように Mermaid ソースを HTML または付録に含める。
完全な HTML ファイルを生成する際は references/template.html をベース HTML テンプレートとして、references/html-output-template.md をコンポーネントガイドとして使用する。テンプレートから完全な <style> ブロックとセクション構造をコピーし、{{PLACEHOLDER}} トークンをソースから導出したコンテンツに置き換える。
HTML には通常以下を含める:
密度の高い技術仕様には以下のバッジを含める:
Must・Should・CouldConfirmed・Inferred・Assumption・Open QuestionHigh Risk・Medium Risk・Low Risk生成した HTML ファイルの保存先:
[元のファイル名]-readable.html（例: spec.md → spec-readable.html）Open Questions セクションを作成するデフォルトの出力言語は日本語（<html lang="ja">）。ユーザーが別の言語を要求した場合はすべての見出し・バッジ・ラベル・本文テキストにその言語を使用する。技術用語（API名・フィールド名・パス・コード識別子）は言語に関わらず元の言語で保持する。
最終化する前に確認する: