slidekit-create

SlideKit Create

All communication with the user MUST be in Japanese. Questions, confirmations, progress updates, and any other messages — always use Japanese.

Generate HTML files forming a complete presentation deck. Each file is a self-contained HTML document rendered at 1280 x 720 px. All content is pure HTML + CSS. Chart.js is used automatically when data visualizations require it (line charts, radar charts, etc.) — no other JavaScript is permitted.

For DOM snippets and component patterns, see references/patterns.md. For user-provided custom templates, see references/templates/.

---

Workflow Overview

Phase	Name	Description
0	テンプレート検出・読み込み	templates/ を確認し、テンプレートモード or 通常モードを決定
1	ヒアリング	モードに応じた質問でスライドの要件を確認
2	デザイン決定	カラーパレット・フォント・アイコンを確定
3	スライド構成の設計	各スライドの役割・レイアウトパターンを計画
4	HTML生成	全スライドを 001.html 〜 NNN.html として出力
5	index.html 生成	ナビゲーション付きビューア兼印刷用ページを出力
6	チェックリスト確認	制約・品質基準への適合を検証
7	PPTX変換（任意）	/pptx スキルで PowerPoint に変換

---

Phase 0: テンプレート検出・読み込み

Before starting the hearing, check references/templates/ for user-provided HTML template files.

0-1. テンプレートの検出

Scan references/templates/ for both subdirectories and loose .html files.

• Subdirectories — each subdirectory is treated as a separate template set (e.g., templates/navy-gold/, templates/modern-tech/)
• Loose HTML files — .html files directly under references/templates/ are treated as a single template set named "default"
• Image directories — check each template set for an images/ subdirectory (e.g., templates/navy-gold/images/). If found, these images are available as template assets

If nothing is found (no subdirectories and no HTML files) → proceed to Phase 1 in 通常モード.

0-2. テンプレート選択

If templates are found, present them to the user and ask which to use.

When multiple template sets (subdirectories) exist:

「以下のカスタムテンプレートが見つかりました。どのテンプレートを使用しますか？番号で選択してください。」

1. {directory-name-1}/（{N}ファイル）
2. {directory-name-2}/（{N}ファイル）
3. 使用しない（通常モードで作成）

• 1 or 2 (directory number) → that directory's HTML files become the template set. Proceed to 0-3
• 3 (使用しない) → proceed to Phase 1 in 通常モード

When a single template set exists (one subdirectory, or loose HTML files only):

「以下のカスタムテンプレートが見つかりました。使用しますか？番号で選択してください。」

• {file1.html}, {file2.html}, ...

1. はい — このテンプレートを使用する
2. いいえ — 使用しない（通常モードで作成）

• 1 → proceed to 0-3
• 2 → proceed to Phase 1 in 通常モード

0-3. テンプレート読み込み

Read the selected template files and extract:

• Color palette (CSS custom properties / Tailwind classes)
• Font pair (primary JP + accent Latin)
• Header/footer structure and style
• Decorative elements and visual motifs
• Layout patterns used
• Template images — parse <img> tags in each template HTML and catalog:
  • src path, positioning attributes (position, z-index, width, height), and parent element location
  • Inferred role based on attributes:
    • 背景画像 (Background) — position: absolute + low z-index (0 or below) + large size (width > 400px or height > 400px)
    • ロゴ (Logo) — small size + located in header/footer region + appears across multiple slides
    • コンテンツ画像 (Content) — all other images (main content area, medium size)
  • Which slide type (Cover / Agenda / Content / Closing) uses each image
  • Also scan the template's images/ subdirectory to identify available image assets not referenced in HTML

Proceed to Phase 1 in テンプレートモード.

Cautions

• Mandatory Constraints still apply. Even if a custom template uses <table> or non-CDN assets, the generated output must follow all rules in the Mandatory Constraints section below. Extract only the visual design (colors, fonts, spacing, decorative style) — not non-compliant implementation details.
• Slide size must remain 1280x720px. Ignore any different dimensions in custom templates.
• Do not copy text content. Custom templates are style references only. All text content comes from Phase 1 hearing.
• Maximum 5 template files per set. If a template set contains more than 5 HTML files, read only the first 5 (sorted alphabetically) to limit context usage. Warn the user that remaining files were skipped.
• Supported formats: HTML and images. Image files (.jpg, .png, .webp, .svg) within the template's images/ subdirectory are included as template assets. Other non-HTML files (PDFs, etc.) are ignored.

---

Phase 1: ヒアリング

Before generating any files, ask the user questions to capture intent. All questions must be asked in Japanese.

Important rules:

• 1ターン1質問: Ask only one question per message. Wait for the user's answer before asking the next question.
• 番号選択: All questions with predefined options must be presented as numbered lists. The user answers by entering the number only. Questions requiring free text input (directory path, title, company name, etc.) are the exception.

The hearing questions differ depending on the mode determined in Phase 0.

テンプレートモード（テンプレートあり）

When custom templates were loaded in Phase 0, skip all design-related questions and ask only the following:

1. 出力ディレクトリ — same as 1-1 below
2. スライド内容のソース — same as 1-4 below
3. プレゼンタイトル — same as 1-5 below
4. スライド枚数 — same as 1-6 below
5. 会社名・ブランド名 — same as 1-7 below
6. テンプレートデザインの確認 — present the extracted design (colors, fonts, decorative style) to the user and ask:

「テンプレートから以下のデザインを検出しました。」

• カラー: {extracted colors}
• フォント: {extracted fonts}
• ヘッダー/フッター: {extracted structure}

「このデザインをどうしますか？番号で選択してください。」

1. そのまま使用する
2. 一部変更したい

• 1 → Phase 2 でテンプレートのデザインをそのまま確定
• 2 → 変更したい項目（カラー、フォント等）を聞き、テンプレートのデザインを部分的に上書き

通常モード（テンプレートなし）

Ask all of the following questions (1-1 through 1-9).

1-1. 出力ディレクトリ

「出力先ディレクトリを選択してください。番号で回答するか、パスを直接入力してください。」

1. デフォルト（output/slide-page{NN}/）
2. パスを指定する

• 1 → use output/slide-page{NN}/ (NN = next sequential number based on existing directories)
• 2 → follow up by asking for the path (text input)
• Direct path input → if the user directly types a path instead of a number, use that path

1-2. スタイル選択

「スタイルを選択してください。番号で回答してください。」

1. Creative — 大胆な配色、装飾要素、グラデーション、遊び心のあるレイアウト
2. Elegant — 落ち着いたパレット（ゴールド系）、セリフ寄りのタイポグラフィ、広めの余白
3. Modern — フラットデザイン、鮮やかなアクセントカラー、シャープなエッジ、テック志向
4. Professional — ネイビー/グレー系、構造的なレイアウト、情報密度高め
5. Minimalist — 少ない色数、極端な余白、タイポグラフィ主導、最小限の装飾

1-3. テーマ選択

「テーマを選択してください。番号で回答してください。」

1. Marketing — 製品発表、キャンペーン提案、市場分析
2. Portfolio — ケーススタディ、実績紹介、作品集
3. Business — 事業計画、経営レポート、戦略提案、投資家ピッチ
4. Technology — SaaS紹介、技術提案、DX推進、AI/データ分析
5. Education — 研修資料、セミナー、ワークショップ、社内勉強会

1-4. スライド内容のソース

Ask the user how they want to provide the content for the slides. This determines what text, data, and structure will appear in the deck.

「スライドの内容をどのように提供しますか？番号で回答してください。」

1. 参考ファイル — ファイル（Markdown、テキスト、Wordなど）を指定する
2. 直接入力 — チャットにテキストを入力する
3. トピックのみ — テーマだけ指定してClaude に内容を生成させる

When a reference file is provided:

1. Read the entire file
2. Extract the logical structure (headings, sections, bullet points, data)
3. Map the structure to the slide sequence — each major section becomes a section divider + content slides
4. Preserve key text, numbers, and data points faithfully
5. Adapt the content to fit the slide format (concise bullet points, not full paragraphs)

When direct text is provided:

1. Organize the text into a logical presentation flow
2. Ask clarifying questions if the structure is ambiguous

When only a topic is given:

1. Ask about the target audience (executives, engineers, clients, etc.)
2. Ask about key messages or points the user wants to convey
3. Generate content based on the answers

1-5. プレゼンタイトル

Ask for the presentation title. Skip if already clear from the content source in 1-4.

1-6. スライド枚数

「スライド枚数を選択してください。番号で回答してください。」

1. 10枚
2. 15枚
3. 20枚（推奨）
4. 25枚
5. 自動（内容に応じて最適な枚数を決定）

• 5（自動） を選択した場合の判断基準:
  • Reference file: count the major sections/headings → each section ≈ 1 divider + 2-3 content slides, plus cover/agenda/summary/closing
  • Direct text: estimate from the volume and structure of the provided text
  • Topic only: default to 15-20 based on topic complexity
• When 5 is selected, inform the user of the determined count before proceeding (e.g., "内容から判断して18枚で作成します。よろしいですか？")

1-7. 会社名・ブランド名

Ask for the company or brand name to display in the header/footer.

1-8. カラーの希望

「カラーに希望はありますか？番号で回答してください。」

1. おまかせ（スタイル × テーマに基づいて自動提案）
2. 指定したい（次の質問でカラーコードや色名を入力）

• 1 → auto-suggest based on the selected style × theme combination
• 2 → follow up by asking for specific color codes or color names (text input)

1-9. 背景画像の使用

「背景画像を使用しますか？番号で回答してください。」

1. 使用しない（CSSグラデーションのみ）
2. 使用する（次の質問で画像を指定）

• 1 → no background images (CSS gradients only)
• 2 → follow up by asking the user to provide or approve specific images

---

Phase 2: デザイン決定

Determine the following before generating any HTML:

テンプレートモード

If custom templates were loaded in Phase 0:

1. Color palette — use the palette extracted from the template (or with user-requested modifications from Phase 1)
2. Font pair — use the fonts extracted from the template (or with user-requested modifications from Phase 1)
3. Brand icon (1 Font Awesome icon)

If the user confirmed the template design as-is in Phase 1, present a brief summary and proceed. If the user requested partial changes, apply those changes and present the updated design for confirmation.

通常モード

Based on Phase 1 hearing results, determine:

1. Color palette (3-4 custom colors)
2. Font pair (1 Japanese + 1 Latin)
3. Brand icon (1 Font Awesome icon)

Present the design decisions to the user for confirmation before proceeding.

Proven Palette Examples

Template	Style	Primary Dark	Accent	Secondary	Fonts
01 Navy & Gold	Elegant	#0F2027	#C5A065	#2C5364	Noto Sans JP + Lato
02 Casual Biz	Professional	#1f2937	Indigo	#F97316	Noto Sans JP
03 Blue & Orange	Professional	#333333	#007BFF	#F59E0B	BIZ UDGothic
04 Green Forest	Modern	#1B4332	#40916C	#52B788	Noto Sans JP + Inter
05 Dark Tech	Creative	#0F172A	#F97316	#3B82F6	Noto Sans JP + Inter

---

Phase 3: スライド構成の設計

Plan the full deck structure before writing any HTML. This phase produces a slide map.

3-1. Required Slides (All Decks)

Position	Type	Pattern	Category
First	Cover	Center	cover
Second	Agenda	HBF	agenda
Second to last	Summary	HBF	conclusion
Last	Closing	Full-bleed / Center	conclusion

3-2. Section Dividers by Slide Count

Slides	Section Dividers	Content Slides
10	2	4
15	3	8
20	4	12
25	5	16

3-3. Build the Slide Map

For each slide, determine:

1. File number (001.html, 002.html, ...)
2. Type (Cover / Agenda / Section Divider / Content / Summary / Closing)
3. Layout pattern (from the 43 patterns — see Phase 4 reference)
4. Content summary (what text/data goes on this slide)

Rules:

• Never use the same layout pattern for 3 or more consecutive slides
• Match content from Phase 1-3 (reference file / text / topic) to appropriate slide types
• Use good variety across the 43 layout patterns
• Chart.js auto-detection: For slides with data visualizations, decide whether to use Chart.js or CSS-only based on the "When to Use Chart.js vs CSS-Only" table in references/patterns.md. Mark Chart.js slides in the slide map. CSS-only and Chart.js charts can coexist in the same deck

3-4. Standard Composition for 20 Slides (Reference)

File	Type	Pattern	Purpose
001.html	Cover	Center	Title, subtitle, presenter, date
002.html	Agenda	HBF	Numbered section list
003.html	Section Divider 1	Left-Right Split	Section 1 introduction
004.html	Content	HBF + Top-Bottom Split	Challenges vs. solutions + KPI
005.html	Content	HBF + 2-Column	Comparison / contrast
006.html	Section Divider 2	Left-Right Split	Section 2 introduction
007.html	Content	HBF + 3-Column	3-item cards
008.html	Content	HBF + Grid Table	Competitive comparison table
009.html	Content	HBF + 2x2 Grid	Risk analysis / SWOT
010.html	Section Divider 3	Left-Right Split	Section 3 introduction
011.html	Content	HBF + N-Column	Process flow
012.html	Content	HBF + Timeline/Roadmap	Quarterly roadmap
013.html	Content	HBF + KPI Dashboard	KPI cards + CSS bar chart
014.html	Section Divider 4	Left-Right Split	Section 4 introduction
015.html	Content	HBF + Funnel	Conversion funnel
016.html	Content	HBF + Vertical Stack	Architecture / org chart
017.html	Content	HBF + 3-Column	Strategy / policy (3 pillars)
018.html	Content	HBF + 2-Column	Detailed analysis / data
019.html	Summary	HBF	Key takeaways + next actions
020.html	Closing	Full-bleed / Center	Thank-you slide + contact info

---

Phase 4: HTML生成

Generate all slide HTML files based on the slide map from Phase 3.

4-0. テンプレート画像のコピー（テンプレートモードのみ）

If the selected template contains an images/ subdirectory:

1. Copy the template's images/ directory to {output_dir}/images/
2. All subsequent HTML generation must reference template-derived images using the same relative paths (e.g., images/bg_cover.jpg)

Skip this step in 通常モード or when the template has no images.

4-1. For Each Slide

1. Use the HTML Boilerplate (below)
2. Apply the design decisions from Phase 2 (colors, fonts, icon)
3. Use the layout pattern assigned in Phase 3
4. Fill in the content from Phase 1-3 (reference file / text / generated)
5. If the slide is marked "Chart.js" in the slide map: use Chart.js <canvas> patterns from references/patterns.md (Chart.js Patterns section). Include the Chart.js CDN <script> in <head> and initialization <script> before </body>
6. Template images (テンプレートモードのみ): if template images were cataloged in Phase 0, reproduce the template's image placement:
   • Cover / Closing slides → place background images (bg_*) using the same positioning as the template (absolute, low z-index, matching dimensions)
   • All content slides → place logo images in the header/footer region matching the template's layout
   • Slide-type matching → use the image set associated with each slide type from the Phase 0 catalog (e.g., Cover uses bg_cover.*, Agenda uses bg_agenda.*)
   • Reference images via relative path images/{filename} (copied in step 4-0)
7. Save as {output_dir}/{NNN}.html (zero-padded: 001.html, 002.html, ...)

HTML Boilerplate

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>{Slide Title}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family={PrimaryFont}:wght@300;400;500;700;900&family={AccentFont}:wght@400;600;700&display=swap" rel="stylesheet" />
    
    
    <style>
        body { margin: 0; padding: 0; font-family: '{PrimaryFont}', sans-serif; overflow: hidden; }
        .font-accent { font-family: '{AccentFont}', sans-serif; }
        .slide { width: 1280px; height: 720px; position: relative; overflow: hidden; background: #FFFFFF; }
        /* Custom color classes: .bg-brand-dark, .bg-brand-accent, .bg-brand-warm, etc. */
    </style>
</head>
<body>
    <div class="slide {layout-classes}">
        
    </div>
    
    
</body>
</html>

Chart.js CDN inclusion rules:

• Only uncomment the <script src="...chart.js..."> line on slides marked "Chart.js" in the Phase 3 slide map
• Only add the Chart.js CDN to slides that actually contain a <canvas> chart — do not include it on every slide
• The <script> for Chart initialization must be placed just before </body>, after the slide <div>
• Each chart <canvas> must have a unique id attribute

43 Layout Patterns

Use one pattern per slide. For full DOM trees and component snippets, see references/patterns.md.

#	パターン	ルートクラス	使用場面
1	中央揃え	flex flex-col items-center justify-center	表紙、謝辞スライド
2	左右分割	flex と w-1/3 + w-2/3	章の区切り、概念 + 詳細
3	ヘッダー・本文・フッター	flex flex-col とヘッダー + flex-1 + フッター	ほとんどのコンテンツスライド（デフォルト）
4	HBF + 2カラム	パターン 3 の本文と 2 つの w-1/2	比較、データ + 説明
5	HBF + 3カラム	パターン 3 の本文と grid grid-cols-3	カード一覧、3者比較
6	HBF + Nカラム	パターン 3 の本文と grid grid-cols-{N}	プロセスフロー（最大 5 カラム）
7	全面表示	relative と absolute inset-0 レイヤー	インパクトのある表紙（CSS グラデーションがデフォルト）
8	HBF + 上下分割	パターン 3 の本文と flex flex-col の 2 セクション	コンテンツ上部 + KPI/サマリーバー下部
9	HBF + タイムライン/ロードマップ	パターン 3 の本文とタイムラインバー + grid grid-cols-4	四半期ロードマップ、段階的計画
10	HBF + KPI ダッシュボード	パターン 3 の本文と KPI grid + flex-1 チャート領域	KPI カード + チャート/進捗の可視化
11	HBF + グリッドテーブル	パターン 3 の本文と flex ベースの行（w-1/N）	機能比較、競合分析
12	HBF + ファネル	パターン 3 の本文と幅が減少する中央揃えのバー	コンバージョンファネル、セールスパイプライン
13	HBF + 縦積み	パターン 3 の本文と全幅カードの積み重ね + セパレーター	アーキテクチャ図、レイヤー構成システム
14	HBF + 2x2 グリッド	パターン 3 の本文と grid grid-cols-2（2 行）	リスク分析、SWOT、機能概要
15	HBF + 積み重ねカード	パターン 3 の本文と縦に積み重ねた全幅カード + 番号バッジ	FAQ、Q&A、番号付きの要点、インタビュー要約
16	HBF + TAM/SAM/SOM	パターン 3 の本文と説明リスト + ネストした円または横棒	市場規模の可視化（2 バリエーション）
17	章の区切り	flex と w-1/4 のダーク + w-3/4 のライト（HBF なし）	大きな番号を伴う章/セクションの区切り
18	HBF + 連絡先	パターン 3 の本文と w-1/2 のメッセージ + w-1/2 の連絡先カード	連絡先情報、CTA スライド
19	HBF + 5カラムプロセス	パターン 3 の本文と grid grid-cols-5 + 任意の RACI ボックス	5 ステップのプロセスフロー、方法論
20	HBF + VS 比較	パターン 3 の本文と 2 つのカード + 中央の VS バッジ	直接対決の競合比較
21	セクション終了 / まとめ	flex flex-col と番号付きの要点 + アクセントボーダー	セクションの締めくくり、主な要点
22	目次	flex flex-col と番号付きのアジェンダ項目 + アクティブハイライト	アジェンダ、目次
23	HBF + 2×3 グリッド	パターン 3 の本文と grid grid-cols-3 grid-rows-2	6 要素の概要、機能グリッド
24	HBF + アイコンリスト	パターン 3 の本文とアイコン円 + テキスト行	機能一覧、メリットのハイライト
25	HBF + 画像ヘッダーパネル	パターン 3 の本文と画像を上部に配置したカード	ビジュアルカテゴリカード
26	HBF + 強調パネル	パターン 3 の本文と左ボーダーのアクセントパネル	重要メッセージの強調、コールアウト
27	グラスパネル（ダーク）	relative のダーク背景 + backdrop-blur のグラスパネル	プレミアムなダークテーマのコンテンツ
28	HBF + グラデーションパネル	パターン 3 の本文とグラデーション背景のパネル	強調されたコンテンツセクション
29	HBF + 画像付きカードレイアウト	パターン 3 の本文とアイコン + 説明のカード	サービス/製品の機能カード
30	右側背景画像	flex とテキスト左 + 画像右（w-2/5）	テキスト + 補足画像
31	引用スライド	flex flex-col items-center justify-center と大きな引用符	感動的な引用、推薦の声
32	複数画像分割	flex と複数の画像パネルを横並び	フォトギャラリー、ビジュアル比較
33	統計強調	パターン 3 の本文と大きな統計数値 + ラベル	KPI のハイライト、データのコールアウト
34	中央メッセージ	flex flex-col items-center justify-center と単一のメッセージ	重要な声明、遷移メッセージ
35	Q&A スライド	中央揃えの大きな「Q&A」テキストとサブタイトル	質疑応答セッション
36	質問スライド	中央揃えの疑問符と聴衆への問いかけ	聴衆の参加、振り返り
37	映画 / 書籍の引用	flex とダークなアクセントバー + 引用 + 出典	有名な引用、文学作品の参照
38	HBF + インライン画像	パターン 3 の本文と画像 + 番号付きテキスト項目	画像付きの説明
39	HBF + 統計比率	パターン 3 の本文と縦棒グラフの比較	比率の可視化、ベンチマーク
40	HBF + テキスト + 統計パネル	パターン 3 の本文とテキストブロック + 統計カード	ナラティブとデータの組み合わせ
41	まとめグラス縦積み	ダーク背景 + 要点を含む縦のグラスパネル	プレミアムなまとめ、ダークテーマの振り返り
42	HBF + シンプルリスト + 補足	パターン 3 と箇条書きリスト（60%）+ 補足パネル（40%）	追加の文脈を伴うリスト
43	HBF + ケーススタディ	パターン 3 と課題 → 解決策 → 結果のフロー	企業のケーススタディ、成功事例

Heading Convention

Bilingual: small English label above, larger Japanese title below.

<p class="text-xs uppercase tracking-widest text-gray-400 mb-1 font-accent">Market Analysis</p>
<h1 class="text-3xl font-bold text-brand-dark">市場分析</h1>

Number Emphasis Convention

Large digits + small unit span:

<p class="text-4xl font-black font-accent">415<span class="text-sm font-normal ml-1">M</span></p>

---

Phase 5: index.html 生成

After all slide HTML files are generated, create {output_dir}/index.html — a presentation viewer with keyboard navigation, viewport scaling, fullscreen, and PDF export.

Use the template at references/index-template.html as the base. Replace the placeholders:

1. {{TITLE}} → presentation title from Phase 1
2. `` → one <div> per slide:

<div class="slide-frame"><iframe src="001.html"></iframe></div>
<div class="slide-frame"><iframe src="002.html"></iframe></div>

Viewer Features

Feature	How it works
Keyboard nav	→ ↓ Space = next, ← ↑ = prev, F = fullscreen
Click nav	Click on deck area = next slide
Nav buttons	Prev / Next / PDF / Fullscreen (bottom-right overlay)
Slide counter	01 / 20 format (bottom-left)
Viewport scaling	transform: scale() to fit any window size
PDF export	window.print() with @media print (all slides visible, page breaks)
Print scale	URL param ?print-scale=120 for custom print size

Important

• The viewer shows one slide at a time (iframe toggle via .is-active class)
• In print mode, all slides are shown with break-after: page
• No external dependencies — the viewer is self-contained vanilla JS + CSS

---

Phase 6: チェックリスト確認

After Phase 4 and Phase 5 are complete, verify the following. Fix any issues before delivering to the user.

• All files use identical CDN links
• Custom colors defined identically in every <style>
• Root is single <div> under <body> with overflow: hidden (only sibling allowed: Chart.js <script> on chart slides)
• Slide size exactly 1280 x 720
• No external images (unless user approved or bundled with template)
• No JavaScript except Chart.js on chart slides (no other <script> tags allowed)
• All files for the chosen slide count are present
• Font sizes follow hierarchy
• Consistent header/footer on content slides
• Page numbers increment correctly
• Confidential in footer
• Decorative elements use low z-index and low opacity
• File naming: zero-padded 3 digits (001.html, 002.html, ...)
• Text uses <p> / <h*> (not <div>)
• No visible text in ::before / ::after
• No one-off colors outside palette
• Content density guidelines followed
• index.html generated with iframes for all slides + navigation engine

---

Phase 7: PPTX変換（任意）

After all checks pass, ask the user in Japanese:

「HTMLスライドの生成が完了しました。PowerPoint（PPTX）に変換しますか？」

If the user declines, the workflow ends here.

Prerequisite Check

Before invoking the pptx skill, verify it is available by checking the list of available skills in the current session. The pptx skill will appear in the system's skill list if installed.

If the pptx skill is NOT available, inform the user and provide installation instructions:

/pptx スキルが必要ですが、現在インストールされていません。

以下のコマンドでインストールできます:

claude install-skill https://github.com/anthropics/claude-code-agent-skills/tree/main/skills/pptx

インストール後、新しいセッションで /pptx を実行し、出力ディレクトリ {output_dir} を指定してください。

Then end the workflow. Do not attempt conversion without the pptx skill.

Chart.js Slides and PPTX Conversion

When the deck contains Chart.js <canvas> charts (determined in Phase 3):

1. Chart slides require screenshot-based conversion. The pptx converter cannot parse <canvas> elements rendered by JavaScript. Chart.js charts will be captured as raster images (PNG) and embedded in the PPTX slide
2. Non-chart elements remain editable. Text, icons, and CSS-only elements on the same slide are still extracted as native PPTX objects
3. Inform the pptx skill which slides contain Chart.js so it can apply the screenshot fallback selectively

呼び出し (pptx スキルが利用可能な場合)

pptx スキルが利用可能な場合は、Skill ツールを使用して /pptx を呼び出します。次のコンテキストを渡してください。

1. ソースディレクトリ — すべての NNN.html ファイルを含む出力パス
2. スライド数 — HTML ファイルの総数
3. プレゼンテーションタイトル — フェーズ 1 のヒアリングで決定したもの
4. カラーパレット — フェーズ 2 で選択した 3〜4 色のブランドカラー
5. フォントペア — プライマリ (日本語) フォントとアクセント (ラテン文字) フォント

Skill ツールへの呼び出しプロンプトの例:

Convert the HTML slide deck in {output_dir} to a single PPTX file.
- {N} slides (001.html through {NNN}.html)
- Title: {title}
- Colors: {primary_dark}, {accent}, {secondary}
- Fonts: {primary_font} + {accent_font}
- Chart.js slides: {list of slide numbers, e.g., "004, 013" or "none"}
- Output: {output_dir}/presentation.pptx

重要: HTML から PPTX への変換を自分で試みないでください。常に /pptx スキルに委任してください。このスキルには専用のワークフロー、QA プロセス、変換ツールがあります。

---

リファレンス: 必須の制約

ルール	値
スライドサイズ	width: 1280px; height: 720px
CSS フレームワーク	CDN 経由の Tailwind CSS 2.2.19
アイコン	CDN 経由の Font Awesome 6.4.0
フォント	Google Fonts (日本語プライマリ 1 つ + ラテン文字アクセント 1 つ)
言語	lang="ja"
ルート DOM	<body> -> 単一のラッパー <div> (許可される唯一の兄弟要素: グラフスライドの Chart.js <script>)
オーバーフロー	ルートラッパーに overflow: hidden
外部画像	デフォルトではなし。例外: 選択したテンプレートにバンドルされている画像 (images/ サブディレクトリ) は自動的に承認され、出力ディレクトリにコピーされます。その他の外部画像にはユーザーの明示的な承認が必要です
JavaScript	デフォルトでは禁止。 例外: データ可視化で必要な場合、Chart.js が自動的に使用されます (フェーズ 3 の自動検出を参照)。その他の JS ライブラリは許可されません
カスタム CSS	<head> 内のインライン <style> のみ; 外部 CSS ファイルは不可

PPTX 変換ルール (重要)

これらは PPTX 変換の精度に直接影響します。常に従ってください。

• テキストには <div> より <p> を優先してください (ツリーウォーカーが <div> のテキストを見逃す可能性があります)
• ::before / ::after に可視テキストを入れないでください
• 装飾要素は -z-10 / z-0 で分離してください
• DOM のネストは最大 5〜6 レベルまで
• Font Awesome アイコンは <i> タグ内に配置してください (コンバーターは <i> の fa- を検出します)
• <table> より flex ベースのテーブルを使用してください
• linear-gradient(...) はサポートされています; 複雑なマルチストップはスクリーンショットにフォールバックする場合があります
• box-shadow、border-radius、opacity はすべて抽出可能です
• Chart.js の <canvas> 要素 は DOM ツリーウォーカーで解析できません → PPTX にはスクリーンショットへのフォールバックが必要です。PPTX の編集性が優先される場合は CSS のみのグラフを優先してください

アンチパターン (避けるべき)

• 目的のないラッパー <div> (ネストが増加します)
• パレット外の単発的な色
• レイアウトのための <table>
• Tailwind で置き換え可能なインラインスタイル
• ::before / ::after 内のテキスト
• テキストのための <div> (<p>、<h1>〜<h6> を使用してください)

---

リファレンス: デザインガイドライン

カラーパレット

3〜4 色のカスタムカラーを <style> 内で Tailwind スタイルのユーティリティクラスとして定義します:

役割	クラスの例	目的
プライマリダーク	.bg-brand-dark	暗い背景、タイトル
プライマリアクセント	.bg-brand-accent	ボーダー、ハイライト、アイコン
ウォーム/セカンダリ	.bg-brand-warm	CTA、強調、バッジ
本文テキスト	Tailwind のグレー	本文、キャプション

すべてのスライドでパレットを一貫させてください。単発的な色は使用しないでください。

フォントペア

役割	例	使用箇所
プライマリ (日本語)	Noto Sans JP、BIZ UDGothic	本文、見出し
アクセント (ラテン文字)	Lato、Inter、Roboto	数字、英語ラベル、ページ番号

プライマリフォントは body に設定します; アクセントフォントには .font-accent を定義します。

フォントサイズの階層

目的	Tailwind クラス
メインタイトル	text-3xl〜text-6xl + font-bold/font-black
セクション見出し	text-xl〜text-2xl + font-bold
カード見出し	text-lg + font-bold
本文テキスト	text-sm〜text-base
キャプション/ラベル	text-xs

コンテンツ密度のガイドライン

要素	推奨最大値
箇条書き	5〜6
1 行あたりのカード数	3〜4
本文テキストの行数	6〜8
KPI ボックス	4〜6
プロセスステップ	4〜5