---
name: create-slide-html-diagram
description: スライド用のHTML図解を生成しPNG画像に変換するスキル。Tailwind CSS・Material Icons使用
allowed-tools: Read, Write, Bash
---

# Diagram Generator HTML Skill

HTML図解を生成し、PNG画像に変換します。Tailwind CSS・Material Icons使用

## Design Specifications

### サイズとフォーマット

-   **固定サイズ**: Landscape 1280 x 720 px (16:9), Portrait 960 x 1280 px (3:4)
-   **フォーマット**: HTML5 + Tailwind CSS
-   **最終出力**: PNG画像
-   **保存先**: `docs/article/[feature-name]/images/`

**保存先の例**:

-   HTML: `docs/article/tmp-driven-development/images/architecture-diagram.html`
-   PNG: `docs/article/tmp-driven-development/images/architecture-diagram.png`

### HTML作成の必須ルール

⚠️ **重要**: 以下のルールを必ず守ってください

1.  ✅ **1ファイル = 1図解**
2.  ✅ **固定サイズ・背景色必須**: Landscapeの場合 `<body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-[背景色]">`, Portraitの場合 `<body class="w-[960px] h-[1280px] m-0 p-0 overflow-hidden bg-[背景色]">`（背景色は内側divと統一）
3.  ✅ **外側padding**: `p-8` (32px) または `p-10` (40px) - 上下左右の余白を確保（Playwright変換で正確にレンダリング）
4.  ✅ **要素間隔**: `gap-4` (16px) - 標準的な間隔（縦に多くの要素がある場合は調整可能）
5.  ✅ **Tailwind CDN**: `<script src="https://cdn.tailwindcss.com"></script>`
6.  ✅ **JavaScriptによる動的要素禁止**
7.  ✅ **アニメーション禁止**: `animate-*`, `transition-*`, `hover:*`
8.  ✅ **カスタムCSS禁止**: Tailwind Utilityのみ使用
9.  ✅ **最小フォントサイズ**: 14px (`text-sm`) 以上
10.  ✅ **高さ制限厳守**: コンテンツが720px（Portraitなら1280px）に収まるよう、padding・gap・フォントサイズを調整

### アクセシビリティ要件

-   **コントラスト比**: WCAG Level AA準拠 (4.5:1以上)
-   **セマンティックHTML**: `role="img"`, `aria-label` を使用
-   **最小フォントサイズ**: `text-sm` (14px) 以上
-   **色依存の回避**: 色 + 形状の組み合わせ

### Tailwind カラーパレット

アクセシビリティを考慮した推奨配色：

| 用途           | Tailwind Class                                                         | 説明     |
| -------------- | ---------------------------------------------------------------------- | -------- |
| **Primary**    | `bg-blue-500`, `text-blue-900`                                         | 主要要素 |
| **Secondary**  | `bg-green-500`, `text-green-900`, `text-orange-600`, `text-yellow-600` | 補助要素 |
| **Accent**     | `bg-red-700`, `text-red-900`                                           | 強調要素 |
| **Text**       | `text-gray-900`                                                        | テキスト |
| **Background** | `bg-white`, `bg-gray-50`                                               | 背景     |
| **Border**     | `border-gray-300`                                                      | ボーダー |

### Material Icons 使用

図解にアイコンを使用する場合は、Google Material Iconsを利用できます。

**アイコンの取得方法**:

1.  <https://fonts.google.com/icons> にアクセス
2.  使用したいアイコンを検索して選択
3.  右側パネルで "Font" を選択
4.  "Material Symbols Outlined" フォントを選択
5.  アイコン名（例: `database`, `cloud`, `settings`）をコピー

**HTMLでの使用方法**:

```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>アイコン使用例</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <!-- Material Symbols Outlined フォント読み込み -->
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
        />
    </head>
    <body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden">
        <div
            class="w-full h-full bg-white flex items-center justify-center gap-8"
        >
            <!-- データベースアイコン -->
            <div class="flex flex-col items-center">
                <span class="material-symbols-outlined text-6xl text-blue-600"
                    >database</span
                >
                <p class="text-sm mt-2">データベース</p>
            </div>

            <!-- クラウドアイコン -->
            <div class="flex flex-col items-center">
                <span class="material-symbols-outlined text-6xl text-green-600"
                    >cloud</span
                >
                <p class="text-sm mt-2">クラウド</p>
            </div>

            <!-- 設定アイコン -->
            <div class="flex flex-col items-center">
                <span class="material-symbols-outlined text-6xl text-orange-600"
                    >settings</span
                >
                <p class="text-sm mt-2">設定</p>
            </div>
        </div>
    </body>
</html>
```

**推奨アイコンサイズ**:

-   小: `text-2xl` (24px)
-   中: `text-4xl` (36px)
-   大: `text-6xl` (60px)

**よく使うアイコン例**:

-   `database` - データベース
-   `cloud` - クラウド
-   `storage` - ストレージ
-   `api` - API
-   `settings` - 設定
-   `security` - セキュリティ
-   `code` - コード
-   `terminal` - ターミナル
-   `arrow_forward` - 右矢印
-   `arrow_downward` - 下矢印
-   `check_circle` - チェック
-   `error` - エラー

## Usage Flow

### 1. ユーザーからの依頼を確認

ユーザーが以下の情報を提供しているか確認してください：

-   図解のタイプ (アーキテクチャ、フロー、関係、比較など)
-   含めるべき要素 (コンポーネント、ステップ、関係など)
-   特記事項 (色の好み、強調すべき部分など)

### 2. 不足情報の確認

必要に応じて以下を質問してください：

-   図解のタイトル
-   主要な要素とその関係
-   強調すべきポイント
-   配色の好み (あれば)
-   保存先記事ディレクトリ名

### 3. HTML生成

以下のテンプレートを使用してHTMLを生成してください：

#### 基本テンプレート

```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>
        <!-- Material Icons（アイコン使用時のみ必要） -->
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
        />
    </head>
    <body class="w-[1280px] h-[720px] m-0 p-0 overflow-hidden bg-white">
        <div
            class="w-full h-full bg-white flex items-center justify-center p-10"
            role="img"
            aria-label="[図解の説明]"
        >
            <!-- 図解の内容 -->
            <!-- アイコン例: <span class="material-symbols-outlined text-4xl text-blue-600">database</span> -->
        </div>
    </body>
</html>
```

### 4. HTMLファイルを保存

ユーザーに記事ディレクトリを確認してから保存：

```
どの記事用の図解ですか？
例: tmp-driven-development, uv-workspace など
```

**保存先**: `docs/article/[feature-name]/images/[ファイル名].html`

**ファイル名の命名規則**:

-   小文字とハイフンを使用
-   図解の内容が分かる名前
-   例: `architecture-diagram.html`, `flow-user-auth.html`

### 5. PNG変換の実行

HTMLファイル保存後、`html-to-png` スキルを使用してPNG形式の画像に変換する

### 6. ユーザーへの報告

以下の情報をユーザーに報告してください：

```
✅ HTML図解を生成し、PNGに変換しました。

【図解情報】
- タイプ: [パターン名]
- タイトル: [タイトル]
- サイズ: [Orientation][サイズ]

【保存先】
- HTML: docs/article/[feature-name]/images/[ファイル名].html
- PNG: docs/article/[feature-name]/images/[ファイル名].png

【ファイルサイズ】
- PNG: [サイズ] KB ([200KB以下なら「推奨範囲内」])
```

## Important Notes

1.  **固定サイズ・背景色必須**: `<body class="w-[幅] h-[高さ] m-0 p-0 overflow-hidden bg-[背景色]">` を必ず指定
2.  **外側padding**: `p-8` (32px) または `p-10` (40px) で上下左右の余白を確保
3.  **高さ制限**: Playwright変換により自動的に固定サイズで正確にレンダリング（`gap-4`推奨）
4.  **Tailwind CDN必須**: `<script src="https://cdn.tailwindcss.com"></script>` を必ず含める
5.  **JavaScript禁止**: 動的要素は一切使用しない
6.  **アニメーション禁止**: `animate-*`, `transition-*`, `hover:*` は使用しない
7.  **カスタムCSS禁止**: `<style>` タグやインラインスタイルは使用しない
8.  **HTMLファイル保存**: PNG変換前に必ずHTMLファイルを保存

## Validation Checklist

HTML生成時に以下を確認してください：

-   [ ] `<!DOCTYPE html>` 宣言がある
-   [ ] Tailwind CDN が読み込まれている
-   [ ] `<body>` に `w-[幅] h-[高さ] m-0 p-0 overflow-hidden bg-[背景色]` クラスがある
-   [ ] 外側divに `p-8` または `p-10` が設定されている
-   [ ] 要素間隔に `gap-4` が使用されている（Playwright変換で正確にレンダリング）
-   [ ] JavaScript コードが含まれていない
-   [ ] アニメーションクラス（`animate-*` など）が使用されていない
-   [ ] カスタムCSSが含まれていない
-   [ ] 最小フォントサイズが `text-sm` (14px) 以上
-   [ ] `role="img"` と `aria-label` が適切に設定されている

## Troubleshooting

### HTMLファイルが生成されない

-   保存先ディレクトリが存在するか確認
-   ディレクトリが存在しない場合は作成してから保存

### PNG変換が失敗する

1.  HTMLファイルが正しく保存されているか確認
2.  `html-to-png` スキルがあるかどうかを確認

## Related Skills

-   **html-to-png**: 本Skillから内部的に呼び出すHTML→PNG変換スキル

## Related Documentation

-   Tailwind CSS: <https://tailwindcss.com/docs>
-   Material Icons: <https://fonts.google.com/icons>
