---

name: apple-design description: Provides Apple-style modern UI design guidelines with monotone dark mode, blue accent colors, and minimal refined interface. Activates when user mentions "dark mode", "minimal UI", "Apple style", "ダークモード", "ミニマルデザイン", "UIコンポーネント作成". allowed-tools: Read, Grep, Glob, Edit, Write user-invocable: true

Apple Design System

このプロジェクトのデフォルトUIスタイル。

When to Use This Skill

• 新規UIコンポーネントを作成する時（デフォルト）
• ダークモードのデザインを実装する時
• ミニマルで洗練されたインターフェースを作成する時
• アニメーションやトランジションを実装する時
• 既存コンポーネントのスタイルを統一する時

詳細なガイドライン

UIコンポーネント編集時は .claude/rules/ui-design.md が自動適用されます。

デザイン哲学

1. ミニマリズム: 必要最小限の要素で最大の効果
2. 明確な階層: 視覚的な優先順位が一目で分かる
3. 流動性: スムーズなアニメーションと自然な動き
4. 余白の美学: 適切なスペーシングで呼吸する空間

カラーパレット（簡略）

Copyconst colors = {
  background: '#000000',
  card: '#1C1C1E',
  accent: '#0A84FF',
  text: '#FFFFFF',
  textSecondary: '#EBEBF5',
};

主要原則

• モノトーン（黒・グレー・白）を基調
• アクセントカラーは青系（#0A84FF）のみ
• ミニマルでクリーンなデザイン
• アニメーション: 200-300ms
• タッチターゲット: 最小44x44px

AI Assistant Instructions

このスキルが有効化された時:

1. デフォルト適用: このプロジェクトの標準スタイル
2. カラーパレット確認: モノトーン基調、青系アクセントのみ
3. 余白の確認: 適切なスペーシングで「呼吸する空間」を確保

Always:

• ダークモード（背景#000000）を基本にする
• アクセントカラーは青系（#0A84FF）のみ使用する
• アニメーションは200-300msで自然な動きにする
• タッチターゲットは最小44x44pxを確保する
• 余白を十分に取り、視覚的な階層を明確にする

Never:

• 派手な色やグラデーションを使用しない
• 複数のアクセントカラーを混在させない
• アニメーションを過度に長くしない（300ms超）
• Material Designスタイルと混在させない