slidev-creator

Slidev Creator

独自性のある、本番品質のSlidevプレゼンテーションを作成するスキル。

使用するタイミング

• 「このテーマでスライドを作成して」
• 「プレゼン資料を作って」
• 「Slidevでスライドを作成して」
• 「発表用スライドを作成して」

ワークフロー

1. コンテキスト理解

   • プレゼンテーションの目的
   • 対象オーディエンス
   • 発表時間（目安スライド数）

2. 美的方向性の決定

   • DESIGN.md を参照して大胆な美的方向性を選択
   • 汎用的なデザインは避け、記憶に残る方向性を選ぶ

3. スライド作成

   • TEMPLATES.md のテンプレートを活用
   • カスタムスタイリングを適用
   • アニメーション・トランジションを設定
   • 情報量の調整: 1枚に詰め込みすぎず、必要に応じて2枚以上に分割する
   • レイアウト品質: 上下左右の見切れや配置バランスの崩れを防ぐ

4. 出力

   • プロジェクトディレクトリに slides.md と関連ファイルを出力（後述のディレクトリ構成に従う）

ディレクトリ構成

スライドはプロジェクトごとにディレクトリを分けて管理する。ルートディレクトリに直接ファイルを配置しない。

slide/
├── projects/
│   ├── ai-tos-ban/
│   │   ├── slides.md          # スライド本体
│   │   ├── slides-export.pdf  # エクスポートされたPDF
│   │   ├── style.css          # カスタムスタイル（必要に応じて）
│   │   └── public/            # 画像などのアセット
│   ├── chrome-ext/
│   │   ├── slides.md
│   │   ├── slides-export.pdf
│   │   └── public/
│   └── claude-code-slash-commands/
│       ├── slides.md
│       ├── slides-export.pdf
│       └── public/
├── package.json
└── node_modules/

ディレクトリ構成ルール

• ルート直下にスライドファイル（.md/.pdf）を置かない
• projects/ ディレクトリ配下にテーマごとのサブディレクトリを作成
• 各プロジェクトディレクトリ内に slides.md（統一名）と関連ファイルを配置
• プロジェクト名はケバブケースで命名（例: ai-tos-ban, chrome-ext）

参照ファイル

• DESIGN.md: 美的デザインガイドライン
• TEMPLATES.md: スライドテンプレート

必須ルール

• グラデーションは絶対に使用禁止 - linear-gradient, radial-gradient など全て不可
• 汎用的なAI生成デザインを避ける（Inter、紫グラデーションなど）
• 一貫した美的方向性を持つ
• タイポグラフィ・カラー・モーションに細心の注意を払う
• アイコンを積極的に使用する
  • テキストのみのスライドは避ける
  • 見出し、リスト、フロー図にアイコンを添える
  • 技術スタック紹介には logos-* アイコンを使用
• スライドの情報量を適切にコントロールする
  • 1枚のスライドに詰め込みすぎない（箇条書きは最大5〜6項目を目安）
  • 情報量が多い場合は複数枚に分割する
  • 「概要 → 詳細」のように段階的に情報を展開する
• レイアウトの見切れ・バランス崩れを防ぐ
  • コンテンツが上下左右にはみ出さないよう余白を確保する
  • 長いテキストやリストは text-sm や text-xs で調整するか、スライドを分割する
  • グリッドやフレックスで配置する際は overflow-hidden を意識する
  • 要素間の間隔（gap, margin, padding）を適切に設定する