slides-generator

スライドジェネレーター

React + Tailwind で、プロフェッショナルでインタラクティブなプレゼンテーションスライドを生成します。

プロジェクト構成

各スライドプロジェクトは専用のフォルダーに整理されます。

<project-folder>/
├── context.md          ← Collected knowledge and context from user
├── researches/         ← Research documents (when topic requires research)
│   └── YYYY-MM-DD-topic.md
├── slides.md           ← Markdown slides for preview/discussion
├── source/             ← React source code (from template)
│   ├── package.json
│   ├── vite.config.js
│   ├── vite.standalone.config.js
│   ├── tailwind.config.js
│   ├── index.html
│   └── src/
│       ├── App.jsx
│       ├── index.css
│       └── slides/
│           ├── 01-hero.jsx
│           ├── 02-content.jsx
│           └── ...
├── verify/             ← Verification screenshots (from browser testing)
└── slide.html          ← Final standalone HTML (auto-generated)

ワークフローの概要

Step 1: Initialize Project Folder
    ↓
Step 2: Collect Requirements (Progressive Disclosure)
    Phase 1: Topic → Phase 2: Audience → Phase 3: Style → Phase 4: Content
    ↓
Step 2.5: Research Checkpoint
    "Would you like me to research [topic]?" → User confirms
    ↓
Step 3: Create context.md + slides.md
    ↓
Step 4: Confirm Outline with User
    ↓
Step 5: Create Source Code → source/
    ↓
Step 6: Generate Slides (parallel subagents)
    ↓
Step 7: Dev Mode + Browser Verification (REQUIRED)
    ↓
Step 8: Build & Export → slide.html

ステップ 1：プロジェクトフォルダーを初期化する

指定されていない場合は、ユーザーにプロジェクトフォルダーを尋ねます。

Where would you like to save this presentation?
Default: ./presentation-name

フォルダー構成を作成します。

mkdir -p <project-folder>/source <project-folder>/researches <project-folder>/verify

ステップ 2：要件を収集する（段階的な開示）

段階的な開示を使用します。一度に 3〜5 個の質問をし、回答に応じて質問を追加します。

詳しい質問の流れについては、context-guide.md を参照してください。

質問の流れ

フェーズ 1 - クイックスタート（常に実施）：

"What's the presentation about?"
"Any content or notes to include?" (optional)

フェーズ 2 - 対象者と目的（常に実施）：

"Who will view this?"
  - Executives / Decision makers
  - Technical team / Developers
  - General audience / Mixed
  - Customers / External

"What's the goal?"
  - Inform / Persuade / Demo / Report

フェーズ 3 - スタイルの選定（常に実施）：

ステップ 1：ユーザーからキーワードを取得します

"Describe the vibe in a few words"
  Examples: "tech, modern, dark" or "professional, clean, corporate"

ステップ 2：包括的なデザイン提案を得るために ui-ux-pro-max スキルを使用します

python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<topic> <keywords> presentation" --design-system -p "<Presentation Name>"

次の内容が提供されます。

• 理由を添えたスタイルの提案
• カラーパレットの提案
• タイポグラフィの組み合わせ
• アニメーションのガイドライン

ステップ 3：palettes.md と組み合わせて、5 つの選択肢を提示します ユーザーへのプロンプト例：

Based on your description and design analysis, here are 5 style options:

1. **Dark Sapphire Blue** (glass) - Recommended by ui-ux-pro-max
   Dark tech with blue accents, gradient glows
   Typography: Sora + Source Sans 3
   Best for: Tech products, developer tools

2. **Electric City Nights** (glass)
   Urban dark with vibrant blue highlights
   Typography: DM Sans + Work Sans
   Best for: Modern SaaS, tech startups

3. **Cyberpunk** (glass)
   Neon colors, futuristic sci-fi feel
   Typography: Outfit + Nunito Sans
   Best for: Gaming, AI/ML, futuristic topics

4. **Minimal Modern Light** (flat)
   Clean light theme with blue accents
   Typography: DM Sans + Work Sans
   Best for: Corporate, professional presentations

5. **Hacker News** (glass)
   Dark with orange accents, geek aesthetic
   Typography: Sora + Source Sans 3
   Best for: Developer content, technical demos

Which style? (1-5)

選択内容は、context.md の Style セクションに記録します。

フェーズ 4 - コンテンツの詳細度（条件付き）：

"What are 3-5 key points to cover?"
"Any specific data to include?"
  - Yes, I have data → [Get details]
  - Research needed → [Trigger Step 2.5]
  - No data needed → [Skip]

抽象的な用語を掘り下げる

ユーザーが曖昧な用語を使った場合は、意味を確認します。

ユーザーの発言	質問
「プロフェッショナル」	「シンプルでミニマルなものですか、それとも情報量の多いものですか？」
「モダン」	「参考になる例を挙げてもらえますか？」
「魅力的」	「アニメーションのことですか、それとも説得力のある内容のことですか？」

context.md に保存する

質問の後、次の内容を記録した context.md を作成します。

• フェーズ 1〜2 で確認したトピック、目的、対象者
• フェーズ 3 で選択したスタイル（パレット ID、名前、スタイルの種類）
• フェーズ 4 で確認した重要なポイントとデータの要件

## Style (User Selected)
- **Palette ID**: dark-sapphire-blue
- **Palette Name**: Dark Sapphire Blue
- **Mode**: dark
- **Style**: glass
- **Typography**:
  - Display: Sora
  - Body: Source Sans 3
- **User Keywords**: "tech, modern, dark"
- **Design Source**: ui-ux-pro-max + palettes.md

ステップ 2.5：リサーチの確認

リサーチを始める前に必ず尋ねます。ジャストインタイムのリサーチパターンを適用してください。

リサーチを提案する場合

次の場合はリサーチを提案します。

• トピックに比較（A 対 B）が含まれる
• ユーザーがデータ、統計、ベンチマークに言及している
• トピックが時事問題や最近のテクノロジーに関するものである
• ユーザーが手元にない情報を必要としている

次の場合はリサーチを省略します。

• ユーザーが自分のデータを提供している
• トピックが個人的な内容、または社内向けである
• ユーザーが明示的に断っている

リサーチ用プロンプト

"This topic would benefit from research. Would you like me to:

[ ] Research current data/statistics
[ ] Find competitive comparisons
[ ] Gather industry trends
[ ] Skip research - I'll provide content"

リサーチのワークフロー

1. User confirms research needed
    ↓
2. Conduct targeted web search
    ↓
3. Document in researches/ folder
    ↓
4. Present summary to user:
   "I found: [key findings]. Does this look accurate?"
    ↓
5. User confirms → Update context.md

リサーチのテンプレート

次の内容については、research-templates.md を参照してください。

• 統計とデータ - 指標、ベンチマーク、数値
• 競合分析 - A 対 B の比較
• トレンドと予測 - 業界の見通し
• クイックファクト - 簡単な事実確認

ファイル構成

researches/
├── YYYY-MM-DD-statistics.md    # Data and numbers
├── YYYY-MM-DD-comparison.md    # A vs B analysis
└── YYYY-MM-DD-trends.md        # Industry trends

品質チェックリスト

リサーチしたデータを使用する前に、次の項目を確認します。

• 信頼できる情報源である
• データが新しい（変化の速い分野では 6 か月未満）
• 別の情報源と照合している
• ユーザーが正確性を確認している

リサーチ後、検証済みのデータと情報源を context.md に追加します。

ステップ 3：Markdown スライドを作成する

デザインシステムとコンテンツ構成を含む slides.md を作成します。詳しいパターンについては、slides-design.md を参照してください。

3.1 デザインシステムを生成する（任意ですが推奨）

包括的なデザイン提案を得るために、ui-ux-pro-max スキルを使用します。

python3 skills/ui-ux-pro-max/scripts/search.py "<topic> <style keywords>" --design-system -p "<Presentation Name>"

例：

python3 skills/ui-ux-pro-max/scripts/search.py "tech benchmark modern dark glass" --design-system -p "Claude Benchmark"

3.2 slides.md テンプレート

# [Presentation Title]

## Design System

### Theme
- **Palette**: [theme-id from palettes.md]
- **Mode**: dark / light
- **Style**: glass / flat

### Colors
| Token | Hex | Usage |
|-------|-----|-------|
| bg-base | #0f1c2e | Main background |
| primary-500 | #4d648d | Primary accent |
| accent-500 | #3d5a80 | Contrast accent |
| text-primary | #ffffff | Main text |
| text-secondary | #cee8ff | Secondary text |

### Typography
- **Display**: Sora (headings)
- **Body**: Source Sans 3 (content)

### Effects
- **Cards**: glass with border-white/20
- **Animations**: stagger reveal (0.1s delay)
- **Background**: gradient glow + grid pattern

---

## Slide 1: Hero
**Type**: Hero
**Layout**: centered
**Title**: Main Title Here
**Subtitle**: Supporting tagline
**Background**: gradient glow (primary top-left, accent bottom-right)
**Animation**: fade-in + scale (0.6s)

---

## Slide 2: Overview
**Type**: Content
**Layout**: three-column
**Title**: What We'll Cover
**Cards**: 3 cards, glass style
**Points**:
- [icon: Zap] First key point
- [icon: Shield] Second key point
- [icon: Rocket] Third key point
**Animation**: stagger reveal (0.1s)

---

## Slide 3: Details
**Type**: Data
**Layout**: stat-cards
**Title**: Key Metrics
**Stats**:
| Metric | Value | Trend | Context |
|--------|-------|-------|---------|
| Users | 10K+ | +25% | Monthly active |
| Growth | 40% | +15% | Year over year |
| NPS | 72 | +8 | Industry avg: 45 |
**Animation**: count-up numbers

---

## Slide 4: Comparison
**Type**: Comparison
**Layout**: versus
**Title**: Head to Head
**Comparison**:
| Feature | Option A | Option B |
|---------|----------|----------|
| Speed | ✓ Fast | ○ Medium |
| Cost | $99/mo | $149/mo |
| Support | 24/7 | Business |
**Highlight**: Option A for performance

---

## Slide 5: Summary
**Type**: Summary
**Layout**: takeaways
**Title**: Key Takeaways
**Takeaways**:
1. First key insight
2. Second key insight
3. Third key insight
**CTA**: "Get Started" → [link]
**Animation**: fade-in sequential

3.3 スライドの種類に関するリファレンス

種類	用途	レイアウト
ヒーロー	オープニングスライド	中央配置、分割、非対称
コンテンツ	情報、箇条書き	1 列、2 列、アイコンリスト
データ	統計、指標	統計カード、チャート重視、ダッシュボード
比較	並列分析	対比、機能マトリックス、ランキング
タイムライン	プロセス、ロードマップ	水平、垂直、マイルストーン
グリッド	複数のカード	2x2、2x3、弁当箱型
引用	お客様の声	中央配置、アバター付き
まとめ	クロージング、CTA	要点、CTA 重視

3.4 シナリオ別のデザインパターン

シナリオ	テーマ	スタイル	タイポグラフィ
テクノロジー／プロダクト	dark-sapphire-blue	glass	Sora + Source Sans 3
プロフェッショナル	banking-website	flat	DM Sans + Work Sans
クリエイティブ	cyberpunk or neon	glass	Outfit + Nunito Sans
自然	summer-meadow	flat	Manrope + Source Sans 3
ミニマル	black-and-white	flat	DM Sans + Work Sans

ステップ 4：ユーザーに確認する

アウトラインを提示して確認してもらいます。

## Presentation Outline

**Title**: [Title]
**Theme**: [theme-id] ([glass/flat] style)
**Folder**: [project-folder]

**Slides**:
1. Hero - Title and overview
2. Content - Key points
3. Data - Metrics/charts
4. Summary - Conclusions

**Files to create:**
- context.md ✓
- slides.md ✓
- source/ (React project)
- slide.html (final output)

**Confirm to generate?**

ステップ 5：ソースコードを作成する

テンプレートをコピーして設定します。

# 1. Copy template
cp -r <skill-path>/assets/template/* <project-folder>/source/

# 2. Update tailwind.config.js with theme colors
# 3. Update index.html title
# 4. Update App.jsx with presentation name

ステップ 6：スライドを生成する

slides.md の内容に基づいて、各スライドの JSX ファイルを生成します。

生成前に、以下を読みます。

• aesthetics.md - デザイン哲学
• principles.md - 技術原則

React コードを生成する際は、vercel-react-best-practices スキルを使用して、以下を確実に守ります。

• 適切なコンポーネント構成とパターン
• パフォーマンスを最適化したレンダリング
• クリーンで保守しやすいコード構造

技術要件：

• フレームワーク：React 関数コンポーネント
• スタイリング：Tailwind CSS
• アイコン：lucide-react
• アニメーション：framer-motion
• エクスポート：デフォルトの関数コンポーネント

テーマカラー（ハードコードせず、変数を使用）：

• primary-50 から primary-950
• accent-50 から accent-950
• bg-base、bg-card、bg-elevated
• text-primary、text-secondary、text-muted
• border-default、border-subtle

スタイルの選択肢：

• ガラス：glass クラスまたは bg-white/10 backdrop-blur-md border-white/20
• フラット：bg-bg-card shadow-sm border-border-default

レイアウトルール（重要）：

⛔ 禁止：

• h-screen、min-h-screen - レイアウトが崩れます
• コンテンツのラッパーでの h-full
• slide-page への余分なパディング

✅ 必須の構造：

<div className="slide-page">
  {/* Background - absolute positioning */}
  <div className="absolute inset-0 pointer-events-none">...</div>

  {/* Header */}
  <header className="relative z-10 mb-6 shrink-0">
    <h1>Title</h1>
  </header>

  {/* Content - auto-fills remaining space */}
  <div className="slide-content relative z-10">
    {/* Grid/cards here */}
  </div>
</div>

グリッドレイアウト：

• カード 2 枚：grid-auto-fit grid-cols-2
• カード 3 枚：grid-auto-fit grid-1x3
• カード 4 枚（2x2）：grid-auto-fit grid-2x2
• カード 6 枚（2x3）：grid-auto-fit grid-2x3

アニメーションパターン：

import { motion } from 'framer-motion';

// Stagger container
const container = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.1 } }
};

// Child item
const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

// Hover effect
<motion.div whileHover={{ scale: 1.02 }}>...</motion.div>

ファイル名： 01-hero.jsx、02-overview.jsx など

すべてのスライドを生成した後、App.jsx を更新します。

// Add imports at top
import Slide01 from './slides/01-hero';
import Slide02 from './slides/02-content';
// ...

// Update SLIDES array
const SLIDES = [Slide01, Slide02, ...];

// Update NAV_ITEMS array (used for navigation labels)
const NAV_ITEMS = [
  { slideIndex: 0, label: 'Hero' },
  { slideIndex: 1, label: 'Content' },
  // ...
];

// Update PRESENTATION_NAME
const PRESENTATION_NAME = 'Your Presentation Title';

ナビゲーション機能：

テンプレートには、すばやく移動できるナビゲーションが含まれています。

機能	使い方
スライドのドット	下部中央のドットをクリックします（スライド数 ≤12）
数字キー	1～9 を押して、スライド 1～9 に移動します
クイックナビ	G を押すか、プログレスバーをクリックしてグリッドピッカーを開きます
メニュー	ハンバーガーアイコンをクリックすると、ラベル付きのスライド一覧が表示されます
矢印	← → キーを押すか、シェブロンボタンをクリックします

ステップ 7：開発モードとブラウザーでの検証（必須）

重要： スタンドアロンのエクスポートをビルドする前に、必ず開発モードでスライドを検証します。これにより、UI、アニメーション、インタラクションの問題を早期に発見できます。

詳しい検証手順については、browser-verification.md を参照してください。

7.1 開発サーバーを起動する

cd <project-folder>/source
npm install
npm run dev
# Server runs at http://localhost:5173

7.2 agent-browser でブラウザー検証を行う

agent-browser が利用可能か確認します。

# Try to run agent-browser
agent-browser --version

インストールされていない場合は、ユーザーに確認を促します。

Browser verification requires agent-browser skill.

Install with:
npx skills add vercel-labs/agent-browser

Then restart Claude Code and retry.

7.3 検証ワークフロー

# Open presentation in browser
agent-browser open http://localhost:5173
agent-browser set viewport 1920 1080

# Create verify folder
mkdir -p <project-folder>/verify

# Capture first slide
agent-browser wait 2000
agent-browser screenshot <project-folder>/verify/slide-01.png

# Navigate and capture each slide
agent-browser press ArrowRight
agent-browser wait 1000
agent-browser screenshot <project-folder>/verify/slide-02.png
# ... repeat for all slides

7.4 検証チェックリスト

確認項目	方法	合格基準
レイアウト	各スライドのスクリーンショットを撮る	コンテンツがはみ出さず、適切な間隔が保たれている
ナビゲーション	ArrowRight／ArrowLeft を押す	スライドがスムーズに切り替わる
クイックジャンプ	1～5 または G キーを押す	正しいスライドに移動する
スライドのドット	下部のドットをクリックする	正しく移動する（スライド数 ≤12）
アニメーション	切り替えを確認する	カクつきがなく、要素がアニメーションする
インタラクティブ要素	要素にマウスカーソルを合わせる	視覚的なフィードバックが機能する
レスポンシブ対応	ビューポートを変更する	レイアウトが適切に調整される

7.5 よく確認する問題

レイアウトの問題：

• コンテンツがビューポートからはみ出している
• ナビゲーションバーが隠れている、または重なっている
• カードが窮屈、またははみ出している

アニメーションの問題：

• 切り替え時にカクつく
• 要素がアニメーションしない
• スタイル未適用のコンテンツが一瞬表示される

インタラクションの問題：

• キーボードナビゲーションが機能しない
• クリック領域が反応しない
• ホバー状態がない

7.6 修正して再検証する

問題が見つかった場合：

1. 問題のあるスライド JSX を修正します
2. ブラウザーが自動で再読み込みされます（ホットリロード）
3. 該当するスライドを再検証します
4. 修正を確認するため、新しいスクリーンショットを撮影します

Step 8: ビルドとエクスポート

検証に合格した後にのみ、スタンドアロン HTML をビルドします：

cd <project-folder>/source

# Build standalone HTML
npm run build:standalone

# Copy to project root
cp dist-standalone/index.html ../slide.html

8.1 最終検証

スタンドアロンファイルが正しく動作することを確認します：

# Test standalone file
agent-browser open file://<absolute-path>/slide.html
agent-browser set viewport 1920 1080
agent-browser screenshot <project-folder>/verify/final-standalone.png

# Quick navigation test
agent-browser press ArrowRight
agent-browser wait 500
agent-browser press ArrowLeft

最終出力：<project-folder>/slide.html

この単一の HTML ファイルは：

• すべての JS、CSS、フォントを埋め込みます
• オフラインで動作します（サーバーは不要です）
• どのブラウザーからも直接開けます（file://）
• React のインタラクティブ機能とアニメーションをすべて備えています

8.2 ブラウザーを閉じる

agent-browser close

Step 5.5: 画像を生成する（必要な場合）

スライドにカスタム画像、図、イラストが必要な場合は、ai-multimodal スキルを使用します。

使用する場合：

• 背景イラストが必要なヒーロースライド
• 図（アーキテクチャ、フローチャート、プロセス）
• 製品のモックアップやスクリーンショット
• カスタムアイコンやイラスト

ワークフロー：

1. Step 3 で画像が必要なスライドを特定します
2. スライド JSX を生成した後、ai-multimodal を呼び出します
3. source/public/images/ に画像を保存します
4. スライド内で参照します：<img src="/images/generated-image.png" />

テーマシステム

テーマは palettes.md で定義されています。

おすすめのテーマ：

ユーザーの指定	おすすめ
"Tech", "Modern"	dark-sapphire-blue (glass)
"Professional", "Business"	banking-website (flat)
"Cyberpunk", "Neon"	cyberpunk (glass)
"Natural", "Organic"	summer-meadow (flat)
"Minimal", "Clean"	black-and-white (flat)

デザイン原則

以下については principles.md を参照してください：

• 色変数の使用方法
• タイポグラフィのスケール
• 余白の規則
• コンポーネントの構成

やり取りの例

User: "Create a benchmark presentation for Claude vs GPT"

Claude: "I'll help create benchmark slides.

Where would you like to save this presentation?
Default: ./claude-benchmark"

User: "OK"

Claude: "What's this presentation about? Give me a brief description."

User: "Comparing Claude and GPT coding abilities for our dev team"

Claude: "Who will view this?
  - Executives / Decision makers
  - Technical team / Developers ←
  - General audience
  - Customers"

User: "Technical team"

Claude: "What's the goal?
  - Inform - Share findings
  - Persuade - Recommend one model
  - Demo - Show capabilities
  - Report - Present data"

User: "Inform"

Claude: "Describe the vibe in a few words (e.g., tech, modern, professional)"

User: "tech, modern, dark, sleek"

Claude: [Runs ui-ux-pro-max: python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "AI benchmark tech modern dark presentation" --design-system]

Claude: "Based on design analysis, here are 5 style options:

1. **Dark Sapphire Blue** (glass) - Recommended
   Dark tech with blue accents, gradient glows
   Typography: Sora + Source Sans 3
   Best for: Tech products, developer tools

2. **Electric City Nights** (glass)
   Urban dark with vibrant blue highlights
   Typography: DM Sans + Work Sans
   Best for: Modern SaaS, tech startups

3. **Purple Dark Black Blue** (glass)
   Deep purple-blue, cyberpunk undertones
   Typography: Outfit + Nunito Sans
   Best for: AI/ML, futuristic topics

4. **Hacker News** (glass)
   Dark with orange accents, geek aesthetic
   Typography: Sora + Source Sans 3
   Best for: Developer content, technical demos

5. **Space** (glass)
   Deep space theme with gold accents
   Typography: Manrope + Source Sans 3
   Best for: Innovation, visionary topics

Which style? (1-5)"

User: "1"

Claude: "Selected: Dark Sapphire Blue (glass) with Sora + Source Sans 3"

Claude: "What are 3-5 key points to cover?"

User: "Coding ability, reasoning, context window, speed"

Claude: "This topic would benefit from current benchmark data.
Would you like me to research:
  [ ] Current benchmark statistics
  [ ] Model comparison data
  [ ] Skip research"

User: "Yes, research current benchmarks"

Claude: [Conducts web search for current AI benchmarks]
Claude: "I found the following data:
- Claude scores 92% on HumanEval (coding)
- GPT-4 scores 87% on HumanEval
- Claude has 200K context, GPT-4 has 128K
[Sources: official docs, research papers]

Does this look accurate?"

User: "Yes, use that"

Claude: [Creates ./claude-benchmark/ folder structure]
Claude: [Saves research to ./claude-benchmark/researches/2026-01-29-benchmark-data.md]
Claude: [Creates ./claude-benchmark/context.md with verified data]
Claude: [Creates ./claude-benchmark/slides.md]
Claude: "Here's the outline:

## Presentation Outline

**Title**: Claude vs GPT Coding Benchmark
**Theme**: dark-sapphire-blue (glass)

**Slides**:
1. Hero - Title and model overview
2. Framework - Evaluation methodology
3. Task 1 - API development
4. Task 2 - React components
5. Task 3 - CLI tools
6. Summary - Results and recommendations

Confirm to generate?"

User: "OK"

Claude: [Creates source/ from template]
Claude: [Generates 6 slide JSX files]
Claude: [Updates App.jsx with imports]
Claude: [Starts dev server: npm run dev]
Claude: [Opens browser: agent-browser open http://localhost:5173]
Claude: [Verifies each slide, takes screenshots]
Claude: "Verification complete. All slides look good:
- Layout: ✓ No overflow issues
- Navigation: ✓ Arrow keys work
- Animations: ✓ Smooth transitions

Building standalone export..."

Claude: [Runs npm run build:standalone]
Claude: [Copies to slide.html]
Claude: [Final verification of slide.html]
Claude: [Closes browser]
Claude: "Presentation complete!

Files created:
- ./claude-benchmark/context.md
- ./claude-benchmark/researches/2026-01-29-benchmark-data.md
- ./claude-benchmark/slides.md
- ./claude-benchmark/source/ (React project)
- ./claude-benchmark/verify/ (verification screenshots)
- ./claude-benchmark/slide.html ← Open this in browser

Open slide.html to view your presentation."

リファレンスドキュメント

リファレンス	説明
context-guide.md	要件を収集するための段階的な質問フロー
research-templates.md	統計、比較、トレンド調査用のテンプレート
slides-design.md	デザインシステムのパターン、スライドの種類、レイアウト、アニメーション
browser-verification.md	agent-browser を使ったブラウザーテスト
aesthetics.md	デザイン哲学とビジュアルガイドライン
principles.md	技術的なレイアウトとコンポーネントのルール
palettes.md	使用ガイド付きの 76 種類のカラーテーマ

外部スキルとの連携

スキル	用途
vercel-react-best-practices	React コード生成のベストプラクティス（スライド JSX では必須）
ui-ux-pro-max	デザインシステムの生成、タイポグラフィ、カラーパレット
agent-browser	エクスポート前のブラウザー検証
ai-multimodal	カスタム画像や図の生成