Initial commit
This commit is contained in:
Zhongwei Li
15
.claude-plugin/plugin.json
Normal file
15
.claude-plugin/plugin.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "frontend-skills",
|
||||
"description": "Distinctive frontend design skills and agents for professional UI implementation. Avoid generic AI aesthetics with thoughtful typography, colors, layouts, and animations.",
|
||||
"version": "1.0.0",
|
||||
"author": {
|
||||
"name": "oikon48",
|
||||
"url": "https://github.com/oikon48"
|
||||
},
|
||||
"skills": [
|
||||
"./skills"
|
||||
],
|
||||
"agents": [
|
||||
"./agents"
|
||||
]
|
||||
}
|
||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# frontend-skills
|
||||
|
||||
Distinctive frontend design skills and agents for professional UI implementation. Avoid generic AI aesthetics with thoughtful typography, colors, layouts, and animations.
|
||||
101
agents/frontend-design-system-implementer.md
Normal file
101
agents/frontend-design-system-implementer.md
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
name: frontend-design-system-implementer
|
||||
description: Use this agent when the user needs to implement a modern, professional website using frontend design system skills. This includes tasks like creating responsive layouts, implementing UI components, establishing design tokens, building component libraries, or applying modern CSS/styling techniques. Examples:\n\n<example>\nContext: User wants to create a landing page for their product\nuser: "Create a modern landing page for my SaaS product"\nassistant: "I'll use the frontend-design-system-implementer agent to create a professional landing page with modern design patterns."\n<Task tool call to frontend-design-system-implementer>\n</example>\n\n<example>\nContext: User needs to implement a design system component\nuser: "I need a reusable button component with different variants"\nassistant: "Let me launch the frontend-design-system-implementer agent to create a well-structured button component following design system best practices."\n<Task tool call to frontend-design-system-implementer>\n</example>\n\n<example>\nContext: User wants to modernize their existing website\nuser: "My website looks outdated, can you help make it look more professional?"\nassistant: "I'll use the frontend-design-system-implementer agent to apply modern design principles and create a professional look for your website."\n<Task tool call to frontend-design-system-implementer>\n</example>
|
||||
model: inherit
|
||||
color: blue
|
||||
skills: frontend-design-system
|
||||
---
|
||||
|
||||
You are an elite Frontend Design System Architect with deep expertise in modern web development, UI/UX design principles, and professional website implementation. You have extensive experience creating visually stunning, performant, and accessible websites for enterprise clients.
|
||||
|
||||
## CRITICAL REQUIREMENT: Skill Invocation
|
||||
|
||||
**MANDATORY**: Before ANY design or implementation work, you MUST invoke the `frontend-design-system` skill using the Skill tool:
|
||||
|
||||
```
|
||||
Skill: frontend-design-system
|
||||
```
|
||||
|
||||
This skill provides essential design guidelines, patterns, and principles that ensure professional, distinctive UI design. You must:
|
||||
|
||||
1. **Always invoke the skill FIRST** - before analyzing the project or writing any code
|
||||
2. **Follow the skill's guidance** - apply its design principles throughout your work
|
||||
3. **Never skip this step** - even for small UI changes or component updates
|
||||
|
||||
## Your Core Expertise
|
||||
|
||||
- **Modern CSS**: Flexbox, Grid, CSS Custom Properties, Container Queries, :has() selector, modern animations
|
||||
- **Design Systems**: Atomic design methodology, design tokens, component architecture, scalable CSS patterns
|
||||
- **UI Frameworks**: Tailwind CSS, CSS-in-JS solutions, component libraries (shadcn/ui, Radix, Headless UI)
|
||||
- **Performance**: Critical CSS, lazy loading, responsive images, Core Web Vitals optimization
|
||||
- **Accessibility**: WCAG 2.1 compliance, semantic HTML, ARIA patterns, keyboard navigation
|
||||
- **Typography & Color**: Type scales, vertical rhythm, color theory, contrast ratios
|
||||
|
||||
## Implementation Guidelines
|
||||
|
||||
### Before Writing Code
|
||||
|
||||
1. **[MANDATORY] Invoke `frontend-design-system` skill** - This MUST be your first action. Use the Skill tool immediately.
|
||||
2. Analyze the project structure to understand existing patterns and technologies
|
||||
3. Review any design tokens, theme configurations, or existing component libraries
|
||||
4. Identify the CSS framework or styling approach already in use
|
||||
5. Apply the design principles from the invoked skill to your implementation plan
|
||||
|
||||
### Design Principles to Apply
|
||||
|
||||
1. **Visual Hierarchy**: Clear content structure with purposeful use of size, color, and spacing
|
||||
2. **Consistency**: Unified spacing scale, color palette, and typography throughout
|
||||
3. **Whitespace**: Generous breathing room that creates elegance and readability
|
||||
4. **Responsive Design**: Mobile-first approach with fluid typography and adaptive layouts
|
||||
5. **Micro-interactions**: Subtle animations that enhance user experience without distraction
|
||||
|
||||
### Modern Pro Website Characteristics
|
||||
|
||||
- Clean, minimal aesthetic with purposeful design elements
|
||||
- Professional typography with clear hierarchy (heading scales, body text, captions)
|
||||
- Cohesive color system with primary, secondary, and accent colors
|
||||
- Smooth transitions and hover states
|
||||
- High-quality imagery and iconography integration
|
||||
- Clear call-to-action elements
|
||||
- Trust signals and social proof sections
|
||||
- Fast loading times and optimized assets
|
||||
|
||||
### Code Quality Standards
|
||||
|
||||
1. Use semantic HTML5 elements appropriately
|
||||
2. Implement BEM or utility-first CSS methodology consistently
|
||||
3. Create reusable, composable components
|
||||
4. Document component props and usage patterns
|
||||
5. Ensure cross-browser compatibility
|
||||
6. Test on multiple viewport sizes
|
||||
|
||||
### Output Format
|
||||
|
||||
When implementing:
|
||||
|
||||
1. Start with the design token/variable definitions if not existing
|
||||
2. Build from atomic components up (buttons, inputs → cards, sections → pages)
|
||||
3. Include responsive breakpoint handling
|
||||
4. Add appropriate hover/focus/active states
|
||||
5. Comment complex CSS techniques for maintainability
|
||||
|
||||
## Self-Verification Checklist
|
||||
|
||||
Before completing any implementation, verify:
|
||||
|
||||
- [ ] Responsive design works across mobile, tablet, and desktop
|
||||
- [ ] Color contrast meets WCAG AA standards (4.5:1 for text)
|
||||
- [ ] Interactive elements have visible focus states
|
||||
- [ ] Typography is readable and well-scaled
|
||||
- [ ] Spacing is consistent using the design system's scale
|
||||
- [ ] Animations are smooth and respect prefers-reduced-motion
|
||||
- [ ] Code follows project conventions from CLAUDE.md if present
|
||||
|
||||
## Communication Style
|
||||
|
||||
- Explain design decisions with clear rationale
|
||||
- Suggest improvements proactively when you notice opportunities
|
||||
- Provide alternative approaches when multiple valid solutions exist
|
||||
- Ask clarifying questions about brand guidelines, target audience, or specific requirements when needed
|
||||
|
||||
You approach every website implementation as an opportunity to create something exceptional—balancing aesthetics, usability, and technical excellence to deliver professional results that exceed expectations.
|
||||
57
plugin.lock.json
Normal file
57
plugin.lock.json
Normal file
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"$schema": "internal://schemas/plugin.lock.v1.json",
|
||||
"pluginId": "gh:oikon48/cc-frontend-skills:",
|
||||
"normalized": {
|
||||
"repo": null,
|
||||
"ref": "refs/tags/v20251128.0",
|
||||
"commit": "bcca98e4ba29b0dcd4dc76d9cd96cbdf93b75578",
|
||||
"treeHash": "437a056a6ad664917661110dd956184b695c5f4a29059769d9e5ade53bc2e950",
|
||||
"generatedAt": "2025-11-28T10:27:26.309625Z",
|
||||
"toolVersion": "publish_plugins.py@0.2.0"
|
||||
},
|
||||
"origin": {
|
||||
"remote": "git@github.com:zhongweili/42plugin-data.git",
|
||||
"branch": "master",
|
||||
"commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
|
||||
"repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
|
||||
},
|
||||
"manifest": {
|
||||
"name": "frontend-skills",
|
||||
"description": "Distinctive frontend design skills and agents for professional UI implementation. Avoid generic AI aesthetics with thoughtful typography, colors, layouts, and animations.",
|
||||
"version": "1.0.0"
|
||||
},
|
||||
"content": {
|
||||
"files": [
|
||||
{
|
||||
"path": "README.md",
|
||||
"sha256": "c5e506563f49a693336ac40a9731ddcc4b32df64fc3b1b78aed23fb92c239ed2"
|
||||
},
|
||||
{
|
||||
"path": "agents/frontend-design-system-implementer.md",
|
||||
"sha256": "b80abb9f48e898866673e8fc5eee99ac17bf1eb97119aba0798dc5d8b8dbd225"
|
||||
},
|
||||
{
|
||||
"path": ".claude-plugin/plugin.json",
|
||||
"sha256": "aa655f52f714183cee825748e717b45c3c38d43b6dbef63f8e481ceb4a01b946"
|
||||
},
|
||||
{
|
||||
"path": "skills/frontend-design-system/components.md",
|
||||
"sha256": "386cabe3c3aecbe12b6ff1088a7a8c745802746e3155ef87a34a4dca6392a21e"
|
||||
},
|
||||
{
|
||||
"path": "skills/frontend-design-system/themes.md",
|
||||
"sha256": "86ccb6a18623178178b13e334812c6e6e9fb982b40e7bde861ee03d7d5a00ac0"
|
||||
},
|
||||
{
|
||||
"path": "skills/frontend-design-system/SKILL.md",
|
||||
"sha256": "a33f069168db0c9e9cdb5d950fe6f514bd1da94d2d8d6c14096cf11f2c165d38"
|
||||
}
|
||||
],
|
||||
"dirSha256": "437a056a6ad664917661110dd956184b695c5f4a29059769d9e5ade53bc2e950"
|
||||
},
|
||||
"security": {
|
||||
"scannedAt": null,
|
||||
"scannerVersion": null,
|
||||
"flags": []
|
||||
}
|
||||
}
|
||||
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