Initial commit
This commit is contained in:
Zhongwei Li
152
skills/frontend-design-system/SKILL.md
Normal file
152
skills/frontend-design-system/SKILL.md
Normal file
@@ -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 でインスピレーション
|
||||
351
skills/frontend-design-system/components.md
Normal file
351
skills/frontend-design-system/components.md
Normal file
@@ -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;
|
||||
}
|
||||
```
|
||||
189
skills/frontend-design-system/themes.md
Normal file
189
skills/frontend-design-system/themes.md
Normal file
@@ -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以上）を確認
|
||||
- [ ] レスポンシブ時のフォントサイズ調整
|
||||
- [ ] インタラクティブ要素のホバー/フォーカス状態を定義
|
||||
Reference in New Issue
Block a user