Initial commit

2025-11-30 08:45:02 +08:00
commit 3b105d3657
7 changed files with 868 additions and 0 deletions
--- a/skills/frontend-design-system/SKILL.md
+++ b/skills/frontend-design-system/SKILL.md
@@ -0,0 +1,152 @@
+---
+name: frontend-design-system
+description: フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。
+---
+
+# Frontend Design System
+
+## Overview
+
+このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。
+
+## Anti-Patterns（避けるべきパターン）
+
+以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです：
+
+### Typography（タイポグラフィ）
+
+- ❌ Inter, Roboto, Open Sans などの過度に使用されたフォント
+- ❌ すべてのテキストに同じフォントファミリーを使用
+- ❌ 標準的なフォントウェイトのみの使用
+
+### Colors（カラー）
+
+- ❌ 紫からピンクへのグラデーション
+- ❌ 汎用的な青/緑のアクセントカラー
+- ❌ 彩度の高すぎるネオンカラー
+- ❌ デフォルトのTailwindカラーパレットそのまま
+
+### Layout（レイアウト）
+
+- ❌ 左テキスト・右画像の標準ヒーローセクション
+- ❌ 3カラムの均等グリッド機能セクション
+- ❌ 中央揃えの単調なカードレイアウト
+
+### Effects（エフェクト）
+
+- ❌ 過度なぼかし効果（blur）
+- ❌ 全要素へのアニメーション適用
+- ❌ グラスモーフィズムの乱用
+
+## Best Practices（推奨パターン）
+
+### Typography
+
+**推奨フォントの組み合わせ例：**
+
+| ヘッダー         | ボディ          | 特徴                   |
+| ---------------- | --------------- | ---------------------- |
+| Playfair Display | Source Sans Pro | クラシック＆モダン     |
+| Space Grotesk    | Inter           | テック＆ミニマル       |
+| Fraunces         | Work Sans       | エレガント＆読みやすい |
+| DM Serif Display | DM Sans         | 統一感のある対比       |
+| Syne             | Outfit          | 大胆＆現代的           |
+
+**タイポグラフィ原則：**
+
+- 見出しと本文で異なるフォントファミリーを使用（セリフ×サンセリフの組み合わせ）
+- フォントウェイトのバリエーションを活用（300, 400, 600, 800）
+- レタースペーシングで視覚的階層を作成
+
+### Colors
+
+**カラーパレット構築原則：**
+
+```
+プライマリ：ブランドアイデンティティを表す主色
+セカンダリ：プライマリを補完する色（補色または類似色）
+アクセント：CTAやハイライトに使用する注目色
+ニュートラル：背景やテキストに使用するグレー系
+```
+
+**独自性を出すテクニック：**
+
+- HSL調整で微妙な色相のずれを作る
+- ダークモードでは彩度を下げ、明度を調整
+- セマンティックカラー（success, warning, error）もブランドに合わせて調整
+
+### Layout
+
+**差別化するレイアウトパターン：**
+
+- 非対称グリッド（5:7, 2:3比率）
+- オーバーラップ要素とネガティブマージン
+- 斜めのセクション区切り
+- ベントグリッドと有機的な配置
+- 大胆な余白（ホワイトスペース）の活用
+
+### Animation & Motion
+
+**効果的なアニメーション原則：**
+
+1. **高影響度の瞬間に集中**
+   - ページロード時の単一の調整されたアニメーション
+   - ユーザーアクション（クリック、ホバー）への即座のフィードバック
+   - 状態変化（成功、エラー）の視覚的表現
+
+2. **タイミングの指針**
+   - マイクロインタラクション: 150-300ms
+   - ページ遷移: 300-500ms
+   - 複雑なアニメーション: 500-800ms
+
+3. **イージング関数**
+   ```css
+   /* 推奨イージング */
+   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+   --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+   --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
+   ```
+
+### Background & Texture
+
+**背景デザインのアイデア：**
+
+- 微妙なノイズテクスチャ
+- 幾何学的パターン（控えめに）
+- グラデーションメッシュ
+- 抽象的なブロブ/シェイプ
+- パララックス効果のある背景レイヤー
+
+## Implementation Checklist
+
+進捗チェックリスト：
+
+- [ ] タイポグラフィ：見出しと本文に異なるフォントを選定
+- [ ] カラーパレット：5色以上の調和したパレットを作成
+- [ ] レイアウト：非対称または独自のグリッドシステムを検討
+- [ ] アニメーション：1-2の高影響度アニメーションを実装
+- [ ] 背景：テクスチャまたは独自の背景要素を追加
+- [ ] 一貫性：すべての要素がデザインシステムに従っているか確認
+
+## Theme Examples
+
+詳細なテーマ例については以下を参照：
+
+- [テーマ例集](themes.md)
+- [コンポーネントリファレンス](components.md)
+
+## Quick Reference
+
+**フォントペアリング即決リスト：**
+
+1. モダン・クリーン → Space Grotesk + Inter
+2. エレガント・高級 → Playfair Display + Lato
+3. テック・スタートアップ → Syne + Outfit
+4. 温かみ・親しみやすい → Fraunces + Work Sans
+5. 大胆・クリエイティブ → DM Serif Display + DM Sans
+
+**カラー参考：**
+
+- Coolors.co で調和したパレット生成
+- Realtime Colors でライブプレビュー
+- Happy Hues でインスピレーション
--- a/skills/frontend-design-system/components.md
+++ b/skills/frontend-design-system/components.md
@@ -0,0 +1,351 @@
+# Component Design Reference
+
+このドキュメントでは、独自性のあるコンポーネント設計のガイドラインを提供します。
+
+## Button Components
+
+### 避けるべきパターン
+
+```jsx
+// ❌ 汎用的すぎる
+<button className="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>
+```
+
+### 推奨パターン
+
+#### Brutalist Button
+
+```jsx
+<button
+  className="
+  relative px-8 py-4
+  bg-black text-white font-bold uppercase tracking-wider
+  border-4 border-black
+  shadow-[4px_4px_0_0_#00FF88]
+  hover:shadow-[8px_8px_0_0_#00FF88]
+  hover:translate-x-[-4px] hover:translate-y-[-4px]
+  transition-all duration-200
+"
+>
+  Take Action
+</button>
+```
+
+#### Organic Button
+
+```jsx
+<button
+  className="
+  px-8 py-4
+  bg-gradient-to-br from-amber-100 to-orange-100
+  text-amber-900 font-medium
+  rounded-[60%_40%_30%_70%/60%_30%_70%_40%]
+  border border-amber-200
+  hover:shadow-lg hover:shadow-amber-200/50
+  transition-all duration-300
+"
+>
+  Explore Nature
+</button>
+```
+
+#### Glassmorphic Button（控えめに使用）
+
+```jsx
+<button
+  className="
+  px-6 py-3
+  bg-white/10 backdrop-blur-md
+  text-white font-medium
+  rounded-full
+  border border-white/20
+  hover:bg-white/20
+  transition-all duration-300
+"
+>
+  Discover More
+</button>
+```
+
+---
+
+## Card Components
+
+### 独自性のあるカードパターン
+
+#### Overlapping Card
+
+```jsx
+<div className="relative">
+  {/* Background decorative element */}
+  <div className="absolute -inset-2 bg-gradient-to-br from-primary/20 to-accent/20 rounded-3xl" />
+
+  {/* Main card */}
+  <div className="relative bg-white rounded-2xl p-8 shadow-xl">
+    <div className="absolute -top-6 left-8">
+      <span className="bg-accent text-white px-4 py-2 rounded-full text-sm font-medium">
+        Featured
+      </span>
+    </div>
+    <h3 className="text-2xl font-bold mt-4">Card Title</h3>
+    <p className="text-gray-600 mt-2">Card description goes here.</p>
+  </div>
+</div>
+```
+
+#### Asymmetric Card
+
+```jsx
+<div
+  className="
+  bg-white rounded-tl-3xl rounded-br-3xl
+  p-8 shadow-lg
+  border-l-4 border-primary
+  hover:translate-x-2 transition-transform
+"
+>
+  <h3 className="text-xl font-bold">Asymmetric Design</h3>
+  <p className="text-gray-600 mt-2">Breaking the symmetry rule.</p>
+</div>
+```
+
+---
+
+## Hero Sections
+
+### 避けるべきレイアウト
+
+```
+[    Text     ] [   Image   ]  ← 50/50の均等分割
+```
+
+### 推奨レイアウト
+
+#### Asymmetric Split
+
+```
+[  Text  ] [      Large Image      ]  ← 35/65の非対称
+```
+
+```jsx
+<section className="grid grid-cols-[35fr_65fr] min-h-screen">
+  <div className="flex flex-col justify-center px-12">
+    <h1 className="text-6xl font-bold leading-tight">
+      Breaking
+      <br />
+      Conventions
+    </h1>
+    <p className="text-xl text-gray-600 mt-6">
+      Design that stands out from the crowd.
+    </p>
+  </div>
+  <div className="relative overflow-hidden">
+    <img src="hero.jpg" className="object-cover w-full h-full" />
+    <div className="absolute inset-0 bg-gradient-to-r from-white via-transparent to-transparent" />
+  </div>
+</section>
+```
+
+#### Overlapping Elements
+
+```jsx
+<section className="relative min-h-screen flex items-center">
+  {/* Background text */}
+  <h1
+    className="
+    absolute left-0 top-1/2 -translate-y-1/2
+    text-[20vw] font-black text-gray-100
+    select-none pointer-events-none
+  "
+  >
+    BOLD
+  </h1>
+
+  {/* Content */}
+  <div className="relative z-10 max-w-2xl mx-auto text-center">
+    <span className="text-primary font-medium tracking-widest uppercase">
+      Welcome to
+    </span>
+    <h2 className="text-5xl font-bold mt-4">Something Different</h2>
+  </div>
+</section>
+```
+
+---
+
+## Navigation Patterns
+
+### Creative Navigation Ideas
+
+#### Vertical Side Nav
+
+```jsx
+<nav
+  className="
+  fixed left-0 top-0 h-full w-20
+  bg-gray-900 text-white
+  flex flex-col items-center py-8
+"
+>
+  <div className="flex-1 flex flex-col items-center space-y-8 mt-12">
+    {navItems.map((item) => (
+      <a
+        key={item.id}
+        className="
+          group relative w-12 h-12
+          flex items-center justify-center
+          rounded-xl hover:bg-white/10
+          transition-colors
+        "
+      >
+        <Icon name={item.icon} />
+        <span
+          className="
+          absolute left-full ml-4 px-3 py-1
+          bg-gray-800 rounded text-sm whitespace-nowrap
+          opacity-0 group-hover:opacity-100
+          transition-opacity
+        "
+        >
+          {item.label}
+        </span>
+      </a>
+    ))}
+  </div>
+</nav>
+```
+
+#### Floating Navigation
+
+```jsx
+<nav
+  className="
+  fixed bottom-8 left-1/2 -translate-x-1/2
+  bg-white/80 backdrop-blur-lg
+  rounded-full px-8 py-4 shadow-lg
+  border border-gray-200
+"
+>
+  <ul className="flex items-center space-x-8">
+    {navItems.map((item) => (
+      <li key={item.id}>
+        <a className="font-medium hover:text-primary transition-colors">
+          {item.label}
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+```
+
+---
+
+## Animation Patterns
+
+### Page Load Animation
+
+```jsx
+// Staggered fade-in for content sections
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.6,
+      ease: [0.16, 1, 0.3, 1], // ease-out-expo
+    },
+  },
+};
+```
+
+### Scroll-Triggered Animation
+
+```jsx
+// Intersection Observer pattern
+const useScrollAnimation = () => {
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.1, rootMargin: '-50px' },
+    );
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return { ref, isVisible };
+};
+```
+
+---
+
+## Micro-Interactions
+
+### Button Hover Effect
+
+```css
+.button-magnetic {
+  position: relative;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.button-magnetic:hover {
+  transform: scale(1.05);
+}
+
+.button-magnetic::after {
+  content: '';
+  position: absolute;
+  inset: -10px;
+  background: radial-gradient(
+    circle at var(--x, 50%) var(--y, 50%),
+    rgba(var(--accent-rgb), 0.15) 0%,
+    transparent 70%
+  );
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.button-magnetic:hover::after {
+  opacity: 1;
+}
+```
+
+### Input Focus Animation
+
+```css
+.input-animated {
+  border: 2px solid transparent;
+  background:
+    linear-gradient(white, white) padding-box,
+    linear-gradient(135deg, var(--primary), var(--accent)) border-box;
+  background-size:
+    100% 100%,
+    0% 100%;
+  background-position:
+    0 0,
+    0 100%;
+  transition: background-size 0.3s ease;
+}
+
+.input-animated:focus {
+  background-size:
+    100% 100%,
+    100% 100%;
+  outline: none;
+}
+```
--- a/skills/frontend-design-system/themes.md
+++ b/skills/frontend-design-system/themes.md
@@ -0,0 +1,189 @@
+# Theme Examples
+
+このドキュメントでは、具体的なテーマ例とその実装ガイドラインを提供します。
+
+## 1. Nordic Minimal
+
+**コンセプト：** スカンジナビアデザインにインスパイアされた、機能美と静謐さ
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #2d3748; /* Charcoal */
+  --color-secondary: #718096; /* Slate */
+  --color-accent: #c17f59; /* Terracotta */
+  --color-background: #f7f5f3; /* Warm White */
+  --color-surface: #ffffff;
+  --color-text: #1a202c;
+  --color-text-muted: #4a5568;
+
+  /* Typography */
+  --font-heading: 'DM Serif Display', serif;
+  --font-body: 'DM Sans', sans-serif;
+
+  /* Spacing */
+  --space-unit: 8px;
+}
+```
+
+**特徴：**
+
+- 温かみのある白背景
+- テラコッタのアクセント
+- 大胆な余白
+- セリフ見出し × サンセリフ本文
+
+---
+
+## 2. Neon Brutalism
+
+**コンセプト：** ブルータリズムとサイバーパンクの融合、大胆で反抗的
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #000000;
+  --color-secondary: #ffffff;
+  --color-accent: #00ff88; /* Electric Green */
+  --color-accent-alt: #ff6b35; /* Safety Orange */
+  --color-background: #0a0a0a;
+  --color-surface: #1a1a1a;
+  --color-text: #ffffff;
+  --color-border: #333333;
+
+  /* Typography */
+  --font-heading: 'Space Grotesk', sans-serif;
+  --font-body: 'JetBrains Mono', monospace;
+
+  /* Effects */
+  --shadow-brutal: 4px 4px 0 var(--color-accent);
+  --border-brutal: 3px solid var(--color-secondary);
+}
+```
+
+**特徴：**
+
+- 高コントラスト
+- ハードシャドウ（ドロップシャドウなし）
+- モノスペースフォント
+- 太いボーダー
+
+---
+
+## 3. Organic Growth
+
+**コンセプト：** 自然と持続可能性、有機的な形状と穏やかな色調
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #2d4a3e; /* Forest */
+  --color-secondary: #8b7355; /* Earth */
+  --color-accent: #d4a574; /* Sand */
+  --color-background: #f5f1eb; /* Cream */
+  --color-surface: #ffffff;
+  --color-text: #2c3e2d;
+  --color-text-muted: #5d6b5e;
+
+  /* Typography */
+  --font-heading: 'Fraunces', serif;
+  --font-body: 'Work Sans', sans-serif;
+
+  /* Shapes */
+  --radius-organic: 60% 40% 30% 70% / 60% 30% 70% 40%;
+}
+```
+
+**特徴：**
+
+- アースカラーパレット
+- 有機的なブロブシェイプ
+- 手書き風アクセント
+- テクスチャ背景
+
+---
+
+## 4. Tech Noir
+
+**コンセプト：** ダークモードファースト、洗練されたテック感
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #6366f1; /* Indigo */
+  --color-secondary: #8b5cf6; /* Violet */
+  --color-accent: #22d3ee; /* Cyan */
+  --color-background: #0f0f23; /* Deep Navy */
+  --color-surface: #1a1a2e;
+  --color-surface-elevated: #252542;
+  --color-text: #e2e8f0;
+  --color-text-muted: #94a3b8;
+
+  /* Typography */
+  --font-heading: 'Syne', sans-serif;
+  --font-body: 'Outfit', sans-serif;
+
+  /* Effects */
+  --glow-primary: 0 0 20px rgba(99, 102, 241, 0.3);
+  --gradient-hero: linear-gradient(
+    135deg,
+    #6366f1 0%,
+    #8b5cf6 50%,
+    #22d3ee 100%
+  );
+}
+```
+
+**特徴：**
+
+- 深いネイビー背景
+- グロー効果のアクセント
+- グラデーションのポイント使用
+- モダンなサンセリフ
+
+---
+
+## 5. Editorial Elegance
+
+**コンセプト：** 雑誌のような洗練されたエディトリアルデザイン
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #1a1a1a;
+  --color-secondary: #6b7280;
+  --color-accent: #dc2626; /* Editorial Red */
+  --color-background: #fafafa;
+  --color-surface: #ffffff;
+  --color-text: #111827;
+  --color-text-muted: #6b7280;
+
+  /* Typography */
+  --font-heading: 'Playfair Display', serif;
+  --font-body: 'Source Serif Pro', serif;
+  --font-accent: 'Libre Baskerville', serif;
+
+  /* Layout */
+  --column-width: 65ch;
+  --grid-editorial: 1fr 2fr 1fr;
+}
+```
+
+**特徴：**
+
+- クラシックなセリフ体
+- 赤のアクセント（見出し・リンク）
+- 65文字幅のコラム
+- 豊富な余白と行間
+
+---
+
+## Application Guidelines
+
+### テーマ適用時のチェックリスト
+
+- [ ] CSS変数として定義し、一貫性を確保
+- [ ] ダークモード/ライトモードの両方を考慮
+- [ ] アクセシビリティ（コントラスト比4.5:1以上）を確認
+- [ ] レスポンシブ時のフォントサイズ調整
+- [ ] インタラクティブ要素のホバー/フォーカス状態を定義