From 3b105d365765289cab34d7929f86c1a490080ab5 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:45:02 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 15 + README.md | 3 + agents/frontend-design-system-implementer.md | 101 ++++++ plugin.lock.json | 57 +++ skills/frontend-design-system/SKILL.md | 152 ++++++++ skills/frontend-design-system/components.md | 351 +++++++++++++++++++ skills/frontend-design-system/themes.md | 189 ++++++++++ 7 files changed, 868 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 agents/frontend-design-system-implementer.md create mode 100644 plugin.lock.json create mode 100644 skills/frontend-design-system/SKILL.md create mode 100644 skills/frontend-design-system/components.md create mode 100644 skills/frontend-design-system/themes.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..290d33d --- /dev/null +++ b/.claude-plugin/plugin.json @@ -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" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..706f88f --- /dev/null +++ b/README.md @@ -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. diff --git a/agents/frontend-design-system-implementer.md b/agents/frontend-design-system-implementer.md new file mode 100644 index 0000000..c9070b7 --- /dev/null +++ b/agents/frontend-design-system-implementer.md @@ -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\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\n\n\n\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\n\n\n\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\n +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. diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..9b091e8 --- /dev/null +++ b/plugin.lock.json @@ -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": [] + } +} \ No newline at end of file diff --git a/skills/frontend-design-system/SKILL.md b/skills/frontend-design-system/SKILL.md new file mode 100644 index 0000000..322a34f --- /dev/null +++ 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 でインスピレーション diff --git a/skills/frontend-design-system/components.md b/skills/frontend-design-system/components.md new file mode 100644 index 0000000..a4b265c --- /dev/null +++ b/skills/frontend-design-system/components.md @@ -0,0 +1,351 @@ +# Component Design Reference + +このドキュメントでは、独自性のあるコンポーネント設計のガイドラインを提供します。 + +## Button Components + +### 避けるべきパターン + +```jsx +// ❌ 汎用的すぎる + +``` + +### 推奨パターン + +#### Brutalist Button + +```jsx + +``` + +#### Organic Button + +```jsx + +``` + +#### Glassmorphic Button（控えめに使用） + +```jsx + +``` + +--- + +## Card Components + +### 独自性のあるカードパターン + +#### Overlapping Card + +```jsx +
+ {/* Background decorative element */} +
+ + {/* Main card */} +
+
+ + Featured + +
+

Card Title

+

Card description goes here.

+
+
+``` + +#### Asymmetric Card + +```jsx +
+

Asymmetric Design

+

Breaking the symmetry rule.

+
+``` + +--- + +## Hero Sections + +### 避けるべきレイアウト + +``` +[ Text ] [ Image ] ← 50/50の均等分割 +``` + +### 推奨レイアウト + +#### Asymmetric Split + +``` +[ Text ] [ Large Image ] ← 35/65の非対称 +``` + +```jsx +
+
+

+ Breaking +
+ Conventions +

+

+ Design that stands out from the crowd. +

+
+
+ +
+
+
+``` + +#### Overlapping Elements + +```jsx +
+ {/* Background text */} +

+ BOLD +

+ + {/* Content */} +
+ + Welcome to + +

Something Different

+
+
+``` + +--- + +## Navigation Patterns + +### Creative Navigation Ideas + +#### Vertical Side Nav + +```jsx + +``` + +#### Floating Navigation + +```jsx + +``` + +--- + +## 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; +} +``` diff --git a/skills/frontend-design-system/themes.md b/skills/frontend-design-system/themes.md new file mode 100644 index 0000000..6534087 --- /dev/null +++ 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以上）を確認 +- [ ] レスポンシブ時のフォントサイズ調整 +- [ ] インタラクティブ要素のホバー/フォーカス状態を定義