// テキスト入力からWebベースのプレゼンテーションスライド（HTML + Tailwind CSS + JS）を生成する。カンファレンス登壇やセールス資料として使えるレベルの品質を目指す。「スライドを作って」「プレゼン資料を作成」「デッキを生成」「/slide-generator」、既存のスライドHTMLの修正依頼で起動する。
React 19 + Vite+ (`vp`) + TypeScript + Tailwind CSS v4 + React Router v7 (HashRouter) でモバイル向け静的SPAデモサイトをTDDで構築し、Cloudflare Workers (Static Assets) へ自動デプロイするまでの標準ワークフローを提供する。テンプレートリポジトリ `skanehira/demo-site-template` を `gh repo create --template` で clone することで scaffold を省略する。`localStorage` でフロントエンドのみ完結する"フロントのみ完結デモ"に特化。デザインコンセプトの確立には `frontend-design` スキルを呼び出して連携する。起動トリガー：「デモサイトを作りたい」「モバイル向け静的デモ」「SPAを作ってCloudflareにデプロイ」「静的プロトタイプを公開」「localStorage でフロントだけ完結」。ユースケース：(1)クライアント提案用のUI/UXたたき台、(2)新機能のプロトタイプ、(3)モバイル向けランディング。ツールチェーンは Vite+ (`vp`) で統合（内部 PM は pnpm）。
ローカルのコミット履歴と差分からDraft PRを作成する。ブランチ未作成・コミット未作成の状態でも、必要に応じてブランチ作成とコミットを行ってからPRを作成する。`.github/` にPRテンプレートがあれば内容を埋めて、なければ作業内容から本文を生成し、`AskUserQuestion`で作成可否を確認してから `gh pr create --draft` を実行する。「PRを出したい」「draft PRを作成」「プルリクを作って」「PR本文を生成」などのリクエストで起動。
TDD（RED→GREEN→REFACTOR）でフェーズ単位の新機能実装やバグ修正を行う。docs/TODO.md があるとフェーズ管理し、なければ単独タスクとしてサイクルを回す。テストファーストを厳格に遵守。「実装したい」「TDDで実装」「機能を追加」「バグを修正」などで起動。
TDD方法論に従ってテストを作成します。テスト対象コードの分析、AAA/Given-When-Thenパターンの適用、正常系・エッジケース・エラー系のカバレッジを確保します。「テストを書いて」「テストを作成」「単体テストを追加」などのリクエストで起動します。
対話的計画コマンド。requirements-analyzing-requirementsとimplementation-planning-tasksスキルを統合実行してDESIGN.mdとTODO.mdを生成
複数サブエージェントに異なる立場を与えて議論を反復し、相違が収束するまで議題を検証して結論を提示する。設計妥当性検証・実装方針比較・原因分析のセカンドオピニオン・アイデアの壁打ちに使用。「議論したい」「壁打ちしたい」「セカンドオピニオン」「複数視点で検証したい」などで起動。
| name | slide-generating |
| description | テキスト入力からWebベースのプレゼンテーションスライド（HTML + Tailwind CSS + JS）を生成する。カンファレンス登壇やセールス資料として使えるレベルの品質を目指す。「スライドを作って」「プレゼン資料を作成」「デッキを生成」「/slide-generator」、既存のスライドHTMLの修正依頼で起動する。 |
| metadata | {"short-description":"Webスライド生成"} |
テキスト入力から高品質なWebベースのプレゼンテーションスライドを生成するスキル。
https://placehold.jp/ を使用。実画像は assets/ ディレクトリに配置references/theme.md 参照）ユーザーから以下のいずれかの形式で入力を受け取る：
A. 自由テキスト（例: 「自社紹介資料を作って。会社名はXXで、事業内容は...」）
B. 構造化テキスト（例: markdownアウトライン形式）
入力受付時に以下も確認する：
コンテンツの内容を把握したら、ビジュアルの方向性を提案する。
スライドの内容・テーマ・対象者を踏まえて、以下の3点を具体的に提案する：
提案後、ユーザーに以下を確認する：
ユーザーの承認または修正指示を反映した上で、以下を導出する:
references/theme.md の候補リスト参照）references/theme.md の導出ルール参照）references/visual-guidelines.md 参照）Step 1.5 の出力（後続ステップへの入力）:
これらは Step 1.75 での family/variant 選択と、Step 3 での HTML 生成に直接使用される。
導出結果をユーザーに提示し、承認を得てから Step 2 に進む。
収束禁止: 前回の生成と同じフォント・カラー・Spatial Style の組み合わせを使わないこと。毎回異なるデザインを生成する。ユーザーが過去のスライドを共有した場合はそれを参照して異なる方向を提案する。初回生成時は theme.md のテーマ例と異なるパレットを選ぶこと。
構成を提案する前に、各スライドのコンテンツを分析し、最適なレイアウトを意味的関係から導出する。references/semantic-patterns.md を参照すること。
各スライドについて以下の順序で判定する:
判定結果から family/variant を決定する。 semantic-patterns.md の選択フローと entity_count 調整表に従うこと。
deck_profile による重み付け:
Step 1 のヒアリングで用途が判明している場合、deck_profile（business-pitch / conference-talk / internal-study）に応じて推奨パターンの優先度を調整する。詳細は semantic-patterns.md の Deck Profile セクション参照。
Spatial Style の適用:
family/variant 確定後、Step 1.5 で決定した Spatial Style に応じてベースラインテンプレートを変形する。変形ルールは references/families.md の「ベースラインテンプレートと Spatial Style」セクション、および references/visual-guidelines.md の「Spatial Style の適用方法」セクション参照。
ユーザーに以下の形式でスライド構成を提案し、承認を得る：
## スライド構成案
| # | Family | Variant | タイトル | ビジュアル要素 |
| --- | -------- | --------- | --------- | --------------- |
| 1 | hero | cover | 会社名 + タグライン | グラデーション背景 + ロゴ |
| 2 | hero | section-divider | About | グラデーション背景 |
| 3 | split | text-image | 会社概要 | 右にオフィス写真 |
| ... | ... | ... | ... | ... |
### 画像素材について
- 用意が必要: ロゴ、写真等（ユーザーが用意）
- 自動生成: SVGアイコン、グラデーション、装飾
この構成でよろしいですか？修正があればお知らせください。
重要: ユーザーの承認を得てからStep 3に進むこと。
ビジュアル提案ルール (references/visual-guidelines.md 参照):
構成提案時に、各スライドに適切なビジュアル要素を提案すること。テキストのみのスライドが3枚以上連続しないよう注意する。
承認された構成に基づいて単一HTMLファイルを生成する。
生成ルール:
references/families.md のテンプレート関数とvariantパターンに従うことreferences/theme.md のテーマトークンシステム（「HTMLへの組み込み」セクション）を適用することreferences/navigation.md のナビゲーションJSを組み込むことS(), D(), SFlex(), H(), Sub(), VC() 等）を定義し、スライドを動的に生成することHTMLの全体構造:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{プレゼンタイトル}</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Step 1.5 で選択したフォントの Google Fonts リンクをここに挿入 -->
<style>
/* テーマトークン（references/theme.md 参照） */
:root { ... }
/* スライド基本スタイル */
/* 印刷用スタイル */
@media print {
body { background: #fff; overflow: visible; }
.slide {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
display: block !important;
page-break-after: always;
page-break-inside: avoid;
}
#slide-nav { display: none !important; }
* { box-shadow: none !important; } /* Chromium PDF出力でbox-shadowが正しくレンダリングされない */
}
</style>
</head>
<body>
<div id="slide-container"></div>
<!-- ナビゲーションUI（references/navigation.md 参照） -->
<div id="slide-nav">...</div>
<script>
/* テンプレート関数（references/families.md 参照） */
const _C = '{会社名}';
const _L = 'assets/logo.svg';
function S(n, fam, v, content, o={}) { /* ... */ }
function D(n, v, content, o={}) { /* ... */ }
function SFlex(n, fam, v, content, o={}) { /* ... */ }
function H(t) { /* ... */ }
function Sub(t) { /* ... */ }
function VC(c) { /* ... */ }
function IC(svg) { /* ... */ }
function Badge(t, o={}) { /* ... */ }
function Arr() { /* ... */ }
function Cap(label, src, alt, o={}) { /* ... */ }
/* スライド生成 */
document.getElementById('slide-container').innerHTML = [
D(1, 'cover', `...`),
D(2, 'section-divider', `...`),
S(3, 'grid', 'cards', `${H('...')} ${Sub('...')} ${VC(`...`)}`, {sec: '...'}),
SFlex(4, 'split', 'text-image', `...`, {sec: '...'}),
// ...
].join('');
</script>
<script>
/* ナビゲーションJS（references/navigation.md 参照） */
/* ※ スライド生成後に実行されるよう、別の script ブロックに配置 */
</script>
</body>
</html>
コンテンツ生成の原則: 「1スライド1メッセージ」、箇条書きは3〜5項目上限、テキスト過多なら分割する。詳細は references/families.md 冒頭の共通ルールを参照。
chrome-devtools MCPを使用してスクリーンショットベースのレビューを実施する。
レビュー手順:
mcp__chrome-devtools__navigate_page を使用）mcp__chrome-devtools__resize_page を使用）references/quality-checklist.md の基準に従ってレビュー
スライド移動方法:
mcp__chrome-devtools__evaluate_script で navigateToSlide(n) を実行してスライドを移動mcp__chrome-devtools__take_screenshot でスクリーンショットを撮影スキル同梱の slide-to-pdf.sh を実行する。playwright-coreは共有キャッシュ（~/.cache/slide-pdf/）に自動インストールされるため、プロジェクトのnode_modulesを汚染しない。
# 基本: HTMLと同名のPDFを出力
~/.claude/skills/slide-generating/slide-to-pdf.sh {HTMLファイルパス}
# 出力先を指定
~/.claude/skills/slide-generating/slide-to-pdf.sh {HTMLファイルパス} {出力PDFパス}
12のfamilyで全スライドパターンをカバーする。各familyの詳細なHTMLテンプレートは references/families.md を参照。
| Family | Variant | 用途 |
|---|---|---|
| hero | cover | カバー（タイトル+サブタイトル+ロゴ） |
| section-divider | セクション区切り（番号+名前） | |
| closing | CTA、連絡先、QRコード | |
| big-number | KPI、大きな数字+説明 | |
| quote | 引用テキスト+出典 | |
| single-column | bullet-list | 見出し+箇条書き |
| text-block | 見出し+本文 | |
| split | text-image | テキスト+画像（左右配置） |
| two-column | 2カラムテキスト | |
| comparison | Before/After、左右対比 | |
| qa | Q&A形式 | |
| capture-zoom | キャプチャ拡大（全体+拡大部分） | |
| grid | cards | カード2〜4枚横並び |
| logos | ロゴ一覧（カテゴリ別） | |
| team-members | メンバー紹介（丸写真+名前） | |
| team-member-1 | 1名紹介（写真+プロフィール詳細） | |
| team-member-2 | 2名紹介（横並び2カラム） | |
| achievement-metric | 導入実績（数値押し出し、Before→After） | |
| achievement-award | 導入実績（月桂冠/No.1バッジ） | |
| sequence | steps | ステップ/プロセス |
| timeline | 年表・時系列 | |
| gantt | ガントチャート型スケジュール | |
| table | pricing | 料金表 |
| feature-comparison | 機能比較表 | |
| data-table | 汎用データテーブル（定義リスト型） | |
| overlap | 重複テーブル（共有ヘッダー、colspan） | |
| diagram | flow | フローチャート |
| org-chart | 組織図・階層図 | |
| cycle | 循環関係（PDCA、ビジネスサイクル） | |
| matrix | 2x2マトリクス（SWOT、ポジショニング） | |
| venn | ベン図（重なり・共通領域） | |
| pyramid | ピラミッド/じょうろ（TAM-SAM-SOM） | |
| tree | ツリー図（分解・分類） | |
| concentric | 同心円（包括関係、TAM/SAM/SOM） | |
| mutual | 相互関係（双方向矢印） | |
| staircase | 階段型（成熟度モデル、段階的成長） | |
| scale-compare | 規模比較（サイズの異なる円） | |
| box-flow | 箱型フロー（分岐・合流のある複雑フロー） | |
| toc | list | シンプルリスト型目次 |
| grouped | 見出し付きグループ目次 | |
| circle | 円型目次（ウェビナー向け） | |
| company-profile | standard | ロゴ+定義リスト型会社概要 |
| text-only | テキストのみ定義リスト型 | |
| with-clients | 会社概要+導入企業ロゴ | |
| funnel | funnel | 逆三角形ファネル+ラベル+説明 |
| funnel-bar | ファネル+右端縦バー | |
| chart | bar-vertical | CSS縦棒グラフ |
| bar-horizontal | CSS横棒グラフ | |
| pie-simple | CSS円グラフ（conic-gradient） | |
| ranking | bar-ranking | 横バーランキング |
| table-ranking | テーブル型ランキング | |
| formula | equation | 数式表現（A = B/C、分数スタイル） |
| multiply | 掛け算（A x B、円アイコン+記号） | |
| addition | 足し算（A + B → C、カードスタイル） | |
| case-study | photo-text | 写真+テキスト事例 |
| metric-cards | KPIカード事例（Before→After） |
references/semantic-patterns.md の選択フローも参照references/families.md - family/variant別の具体的なHTMLテンプレートパターンreferences/theme.md - テーマトークンシステムとデフォルトテーマ定義references/navigation.md - スライドナビゲーションのJS実装references/visual-guidelines.md - ビジュアル提案ルール（アイコン、画像、装飾の判断基準）references/semantic-patterns.md - 意味パターン分類と family/variant マッピングreferences/quality-checklist.md - 品質レビューのチェックリスト