name: pwa-icon-generator
PWA / Webアプリ用のアイコン・OG画像の生成、およびアイコン→アプリ間の視覚的連続性を設計するスキル。
Apple HIG + Liquid Glass デザインシステムに準拠したアイコン生成に加え、 アプリ内でのアイコン配置（透過/不透過の使い分け、manifest色統一、ヘッダー設計）もカバーする。
トリガー: アイコン生成、PWAアイコン、favicon、アプリアイコン、アイコン連続性、アイコンとページの統一、manifest色、pwa-icon-generator
| 方法 | 用途 | スクリプト |
|---|---|---|
| craftgarden 花アイコン | 全プロダクト統一 | generate_all_flowers_v2.py（推奨） |
| 絵文字アイコン | 手軽に花・シンボル系 | generate_emoji_icon.py |
| カスタム描画 | オリジナルデザイン | generate_dahlia_v2.py（参考実装） |
| OG画像 | SNSシェア用 | generate_og_image.py |
全13プロダクト分の固有花アイコンを一括生成する。
# クリーム背景（推奨 — アプリのファーストビューと統一）
python ~/.openclaw/skills/pwa-icon-generator/scripts/generate_all_flowers_v2.py \
--all --bg-color "#FAFAF5" /tmp/all-flower-icons-v2
# 花固有色背景（従来方式）
python ~/.openclaw/skills/pwa-icon-generator/scripts/generate_all_flowers_v2.py \
--all /tmp/all-flower-icons-v2
python ~/.openclaw/skills/pwa-icon-generator/scripts/generate_all_flowers_v2.py \
hydrangea /tmp/hydrangea-icons --bg-color "#FAFAF5"
--bg-color で花の固有色と異なる背景を指定すると、自動的にソフトモードが有効になる（ミュート35%、透明度75%、スケール85%）。
python ~/.openclaw/skills/pwa-icon-generator/scripts/distribute_icons.py [--src /tmp/all-flower-icons-v2]
注意: API Catalog JP と Life Project Mgmt は Web フロントエンドを持たないため配布対象外。
icon-192x192.png（OSが透明部分を黒/白で埋めるため）favicon-32x32.png（背景に溶け込む）background_color / theme_color を #FAFAF5 に統一python ~/.openclaw/skills/pwa-icon-generator/scripts/generate_og_image.py \
"アプリ名" /path/to/output "サブタイトル"
出力ファイル詳細:
references/generation-guide.md
python ~/.openclaw/skills/pwa-icon-generator/scripts/validate.py /path/to/icons
チェック項目: ファイルサイズ / ディメンション / フォーマット（PNG） / 透明度 / カラーモード（RGB）
python ~/.openclaw/skills/pwa-icon-generator/scripts/integrate_html.py /path/to/project
フレームワーク自動検出（Next.js, Astro, SvelteKit）、favicon + apple-touch-icon + OG メタタグ生成。
craftgarden プロダクトの場合:
1. generate_all_flowers_v2.py --all --bg-color "#FAFAF5" で一括生成
2. 比較 HTML で目視確認
3. distribute_icons.py で全リポジトリに配布
4. git commit & push（一括）
新規プロダクトの場合:
1. FLOWERS dict に花を追加 + 専用 draw 関数を実装
2. 単体生成で確認 → --all で全体再生成
3. 比較 HTML で他の花とのバランス確認（サイズ・色の調和）
4. 配布 → commit & push
~/.openclaw/skills/pwa-icon-generator/
├── SKILL.md # 本ファイル
├── LEARNINGS.md # 経験・教訓の蓄積
├── references/
│ ├── flower-mapping.md # 全13花のキー・色・プロダクト対応表
│ ├── generation-guide.md # ソフトモード設定・生成ファイル一覧・OG画像
│ ├── placement-guidelines.md # アプリ内アイコン配置・透過/不透過の使い分け
│ └── apple-hig-checklist.md # Apple HIG + Liquid Glass デザイン要件
└── scripts/
├── generate_all_flowers_v2.py # 全花一括生成（推奨）
├── generate_all_flowers.py # v1（汎用パターン、アーカイブ）
├── generate_emoji_icon.py # 絵文字アイコン
├── generate_dahlia_v2.py # ダリア単体（参考実装）
├── generate_dahlia.py # ダリア v1（アーカイブ）
├── generate_og_image.py # OG画像
├── distribute_icons.py # 全リポジトリへの一括配布
├── validate.py # バリデーション
└── integrate_html.py # HTMLタグ生成
pip install Pillow
# 絵文字アイコン用: Noto Color Emoji フォントをダウンロード
curl -sL "https://github.com/googlefonts/noto-emoji/raw/main/fonts/NotoColorEmoji.ttf" -o /tmp/NotoColorEmoji.ttf
--all モードで --bg-color が伝播しない: 過去に --all ブランチで bg_color パラメータを generate_all_sizes() に渡し忘れるバグがあった。新パラメータ追加時は単体生成・一括生成の両方のコードパスで渡されているか確認する--bg-color "#FAFAF5" 指定時はソフトモードが自動適用される設計だが、花色が強すぎると感じたらソフトモードの調整値（ミュート35%、透明度75%、スケール85%）を確認するfavicon-32x32.png を使う。icon-192x192.png を使うと背景色が浮く