---

name: botanical-scene-apply description: craftgarden 植物風景システム（Botanical Scene）を新プロダクトに適用、または既存の植物風景を改善・調整する。花の選定からSVGコンポーネント作成、レイアウト統合、opacity調整、ヘッダー・モバイルUI設計、品質確認まで一貫実行。 triggers:

• 植物風景を適用
• ボタニカルシーン適用
• 花を追加
• botanical scene
• 花を設定
• 植物の存在感を上げる
• opacity調整
• ボタニカル改善
• アイコンとページの連続性
• モバイルヘッダー設計 metadata: 自己拡張型: 必須 仕様書: /Users/satokeita/Dev/craftgarden-studio/docs/BOTANICAL-SCENE-GUIDE.md 参照実装: /Users/satokeita/Dev/ai-pm-service/src/components/botanical/ 参照ファイル: references/

---

Botanical Scene Apply — 植物風景システム適用・改善スキル

craftgarden の全プロダクトに「水彩庭園画」を適用・改善する。 新規適用: 花の選定 → SVG設計 → 3層コンポーネント作成 → レイアウト統合 → 品質確認。 改善・調整: opacity強化、ヘッダーアクセント追加、モバイルヘッダー設計、アイコン連続性向上。

---

Overview

craftgarden のすべてのプロダクトは「庭園の中にある」。 このスキルは新しいプロダクトに固有花の植物風景を適用するワークフローを実行する。

仕様書: /Users/satokeita/Dev/craftgarden-studio/docs/BOTANICAL-SCENE-GUIDE.md 参照実装: AI PM Service（ダリア / L1 Breath）

---

Step 0: 事前情報の収集

ユーザーに以下を確認する（未指定の場合のみ質問）:

情報	説明	例
対象リポジトリ	プロダクトのパス	/Users/satokeita/Dev/ai-pm-service
固有花	プロダクトに割り当てる花	ダリア、藤、百合など
適用レベル	L1 Breath / L2 Path / L3 Garden	L1（ダッシュボード系）

適用レベルの判断基準

ユーザーが指定しない場合、プロダクトの性質から判断する:

L1 Breath（息吹）→ ダッシュボード・ツール系
  - コンテンツ密度が高い
  - サイドバー + メインコンテンツ構造
  - 例: AI PM Service, Product Hub

L2 Path（小径）→ コンテンツ系・ブログ
  - 読み物中心
  - ヘッダー + コンテンツ + フッター構造
  - 例: Content Studio, Blog

L3 Garden（庭園）→ LP・ポートフォリオ
  - ビジュアル中心
  - セクション構成のシングルページ
  - 例: craftgarden.studio（本サイト）

---

Step 1: コードベース調査

対象リポジトリの構造を把握する。

1. 技術スタック確認
   - package.json: Next.js version, Tailwind version
   - globals.css: 既存 @theme ブロックの有無
   - layout.tsx: フォント設定、既存のボタニカルコンポーネント

2. レイアウト構造の把握
   - サイドバーの有無とファイルパス
   - ヘッダー/フッターの構造
   - メインコンテンツ領域の配置

3. 既存ボタニカル要素の確認
   - src/components/botanical/ の有無
   - globals.css 内の花カラートークン
   - SVG <defs> の有無

---

Step 2: 花のカラートークン追加

globals.css の @theme { } ブロック内に固有花のカラートークンを追加する。

規約

/* {Flower Name} — {Product Name} 固有花 */
--color-{flower}:     #XXXXXX;  /* 標準色 */
--color-{flower}-hot: #XXXXXX;  /* 強調色（やや鮮やかに） */

色選定の基準

• 既存プロダクトの花色と十分に区別できる色域
• craftgarden の和洋折衷の世界観に馴染む彩度（高彩度NG）
• 2色ペア: 標準（装飾の主色）+ hot（ホバー、グラデーション端）

既存の花色一覧

重複回避のため必ず確認すること: references/flower-color-registry.md

globals.css ヘッダーコメントも更新

/* Fixed flower: {Flower} ({花名}) — {Product Name} 固有花. */

---

Step 2.3: 機能色のミュート化（必須）

植物風景適用時、既存UIの機能色（ラベル、バッジ、ステータス等）もボタニカルトーンに統一する。 ビビッドな色（#e11d48, #7c3aed, #2563eb 等）がクリーム背景と衝突し「どぎつい」印象になる。

対象の検出

# 1. globals.css のアクセント変数
grep -E 'accent-(blue|emerald|amber|rose|violet)' src/app/globals.css

# 2. JS/TS の CONFIG オブジェクト（最重要。見落としやすい）
grep -rn '#[0-9a-fA-F]\{6\}' src/lib/ src/components/ --include='*.ts' --include='*.tsx'

ダスティボタニカルパレット

ビビッド→ダスティのマッピングと適用方法: references/dusty-botanical-palette.md

---

Step 2.5: oklch ベースの shadcn/ui 統合（該当する場合）

対象プロジェクトが shadcn/ui + oklch 色空間を使用している場合、hex 直書きではなく oklch 値で暖色ボタニカルトーンを注入する。

判断基準

globals.css に以下のような oklch 変数がある場合 → oklch 統合パターンを適用:
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0.024 285.82);
  --primary: oklch(0.45 0.2 264.05);

oklch マッピング

Light/Dark mode の oklch 値と花固有トークンの追加方法: references/oklch-mapping.css

---

Step 3: SVG シンボル定義コンポーネント（{Flower}Defs.tsx）

src/components/botanical/{Flower}Defs.tsx を作成する。

必須シンボル

ID	用途	構造
#{flower-prefix}	花（完全な姿）	ellipse 群 + circle 中心
#{flower-prefix}p	花びら1枚（散乱用）	単一 ellipse
#{flower-prefix}f	葉	ellipse + 葉脈 line

設計制約

• 1モチーフ ≤ 20 パス点
• <defs> + <use> パターン必須
• 花の性格をSVGの幾何学で表現する（写実ではない）

テンプレート

コンポーネントのテンプレート: references/template-flower-defs.tsx

代替パターン: インライン SVG（Defs/use 不要のケース）

花の種類やサイト構造によっては、Defs + use パターンよりインライン SVG の方が適切な場合がある。

Defs/use を使うべき場合:
  - 同じシンボルを 5 箇所以上で再利用する
  - 3層（Background/Midground/Foreground）が独立コンポーネント
  - L1 ダッシュボード系（サイドバー + メイン + 複数ページ）

インライン SVG で十分な場合:
  - シンプルなサイト（サイドバーなし、1-2ページ）
  - 花の形状がユニークで再利用より個別表現が重要（蒲公英の綿毛・飛ぶ種など）
  - L2 Path / L3 Garden でページ数が少ない

実例: Agent Skill Search（蒲公英）は単一の DandelionBackground.tsx に全要素をインラインSVGで配置。 puffball（放射状線 + 先端円）、浮遊種（achene + pappus）、花（radial ellipse）、葉（zigzag path）の 4種類の要素をそれぞれ独自の構造で描画し、<defs> + <use> は使用していない。

Hydration 安全なSVG座標計算

重要: SVGの座標計算に Math.sin() / Math.cos() を使うと、サーバーとクライアントで 浮動小数点の丸めが微妙に異なり、React hydration mismatch が発生する。

// NG: hydration mismatch の原因になる
<line x2={20 + 5 * Math.sin((60 * Math.PI) / 180)} />

// OK: 静的な値にプリコンピュート
<line x2="24.33" />

ルール: SVG内の三角関数・算術式はすべて事前に計算し、リテラル値として記述すること。

花のSVG設計は ui-designer エージェントに委託する

指示テンプレート: references/template-agent-ui-designer.md

---

Step 3.5: アイコン→ページ連続性の強化（既存改善時）

既存の植物風景を改善する場合、以下のパターンを適用する。 （pwa-icon-gen