---

name: craftgarden-design-system description: craftgarden Design System (Quiet Garden) を全プロダクトに適用・維持する。デザインシステム適用、UI監査、トークン変換、craftgarden UI、デザイントークン、quiet garden、チーム適用、並列適用、大規模適用 などの作業に使用。audit / apply / team apply / maintain の4モードで動作。 metadata: 自己拡張型: 必須 参照ファイル: references/

craftgarden Design System — Quiet Garden

全 craftgarden プロダクトのデザイン統一を担うスキル。 audit（監査）/ apply（適用）/ team apply（並列適用）/ maintain（維持）の4モードで動作。

---

Quick Token Reference

全トークン定義（Color 17種、Typography 5種、Fonts、Radii、拡張ルール、Tonal Palette for Badges）は以下を参照:

references/token-reference.md

主要トークンのサマリ:

• Background: bg-cream, bg-warm, bg-card
• Text: text-deep, text-muted, text-light (large text only!)
• Accents: accent-leaf, accent-sage, accent-moss, accent-bark, accent-bloom
• Category: cat-product, cat-tool, cat-content
• Semantic: danger
• Borders: border, border-hover
• Fonts: DM Sans (body) / Nunito (headings)
• Radii: --radius-card: 1rem, --radius-btn: 999px

@theme Block

The canonical @theme block is in references/theme-block.md. Copy it entirely into the target project's globals.css.

---

Mode 1: Audit

Trigger: audit, 監査, UI監査, check, verify

Procedure

1. Read globals.css — Read the target project's globals.css (or equivalent main CSS file)

2. Check @theme presence

   • Does the file contain a @theme { ... } block?
   • Does it include ALL required tokens?

   Required tokens checklist:

   Colors (17):
   [ ] --color-bg-cream, --color-bg-warm, --color-bg-card
   [ ] --color-text-deep, --color-text-muted, --color-text-light
   [ ] --color-accent-leaf, --color-accent-sage, --color-accent-moss
   [ ] --color-accent-bark, --color-accent-bloom
   [ ] --color-cat-product, --color-cat-tool, --color-cat-content
   [ ] --color-danger
   [ ] --color-border, --color-border-hover
   
   Typography (7):
   [ ] --font-sans, --font-heading
   [ ] --text-display, --text-h2, --text-h3, --text-body, --text-small
   
   Layout (2):
   [ ] --radius-card, --radius-btn
   
   Animation (1):
   [ ] --animate-fade-in-up
   

3. Detect hardcoded values (hex/rgb) — CSS + JS/TS Search all .tsx, .jsx, .css, .ts files for:

   Grep patterns:
   - #[0-9A-Fa-f]{6}  (hex colors not in @theme or comments)
   - #[0-9A-Fa-f]{3}   (short hex)
   - rgb\(             (raw rgb)
   - rgba\(            (raw rgba — except in @theme/shadow definitions)
   - font-size:\s*\d   (hardcoded font sizes)
   - border-radius:\s*\d (hardcoded radii)
   

   重要: JS/TS ファイルも必ずチェックすること！ 以下のパターンに hardcode が潜みやすい:

   • constants.ts — LANG_COLORS, LEVEL_CONFIG 等の設定オブジェクト
   • *-types.ts — STATUS_CONFIG, PRIORITY_CONFIG 等の型定義付き設定
   • *View.tsx — コンポーネント内の inline config オブジェクト
   • style={{ background: "#xxx" }} — JSX inline style

   Exceptions (allowed hardcodes):

   • Inside @theme { } block
   • Inside @keyframes blocks
   • Inside rgba() for shadows (documented shadow values)
   • #FFFFFF / #000000 for absolute white/black
   • Comments

4. Detect Tailwind built-in color classes Search .tsx, .jsx files for Tailwind's default color palette usage:

   Grep pattern:
   bg-zinc|text-zinc|border-zinc|bg-indigo|text-indigo|border-indigo|
   bg-red|text-red|border-red|bg-green|text-green|border-green|
   bg-blue|text-blue|border-blue|bg-yellow|text-yellow|
   bg-orange|text-orange|bg-amber|text-amber|
   bg-purple|text-purple|bg-pink|text-pink|
   bg-cyan|text-cyan|bg-lime|text-lime|bg-emerald|text-emerald|
   bg-gray|text-gray|bg-slate|text-slate|bg-neutral|text-neutral
   

   All matches must be replaced using the Semantic Color Mapping in references/token-reference.md.

   • text-white on CTA buttons (accent-leaf/moss bg) is allowed.
   • Tailwind default colors are NEVER acceptable in a craftgarden project.

5. Check design principles

   • Load references/01-foundations.md for Do's & Don'ts
   • Scan for violations:
     • Sharp corners (no rounded class)
     • Missing prefers-reduced-motion
     • Missing aria-hidden on decorative SVGs
     • Missing lang="ja" on Japanese text
     • Animations < 100ms
     • Grid > 3 columns

6. Output audit report — Use template in references/template-audit-report.md

---

Mode 2: Apply

Trigger: apply, 適用, デザインシステム適用, setup, セットアップ

実行の推奨順序

Phase 1: 基盤（globals.css + layout.tsx + ビルド確認）
Phase 2: 共有設定（constants.ts 等のカラー定義オブジェクト）
Phase 3: レイアウト・ナビ（sidebar, header 等 — 最も目に付く部分）
Phase 4: 一覧ページ（page.tsx 群 — Task 並列エージェント活用）
Phase 5: 詳細ページ（[id]/page.tsx, [slug]/page.tsx 等 — Task 並列エージェント活用）
Phase 6: ページ内インライン設定の掃除（各ページ先頭の Config オブジェクト）
Phase 7: 最終監査 + ビルド

重要な教訓:

• Phase 1 完了後に必ずビルド確認する（Turbopack キャッシュ破損の早期検知）
• Phase 2 で constants.ts を先に変換しておくと、一覧ページがその設定を参照するため影響範囲が大きい
• 詳細ページ（[id] 等）は忘れがち。Glob で **/[*]/page.tsx を