Initial commit
This commit is contained in:
Zhongwei Li
484
skills/frontend-development/EXAMPLES.md
Normal file
484
skills/frontend-development/EXAMPLES.md
Normal file
@@ -0,0 +1,484 @@
|
||||
# Examples & Case Studies
|
||||
|
||||
Real-world examples demonstrating correct and incorrect application of frontend design principles.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Case Study: Blog Search Bar (Design Consistency)](#case-study-blog-search-bar)
|
||||
2. [Example: Component Reuse Decision Matrix](#example-component-reuse-decision)
|
||||
3. [Example: Typography Consistency](#example-typography-consistency)
|
||||
4. [Example: Layout Pattern Matching](#example-layout-pattern-matching)
|
||||
5. [Anti-Example: Generic AI Slop](#anti-example-generic-ai-slop)
|
||||
|
||||
---
|
||||
|
||||
## Case Study: Blog Search Bar
|
||||
|
||||
**Context:** Adding a search bar to a blog page in an existing Next.js application.
|
||||
|
||||
### ❌ WRONG APPROACH (Autopilot Mode)
|
||||
|
||||
**What happened:**
|
||||
```
|
||||
User: "Blog page needs a search bar"
|
||||
Assistant: [Sees SearchBar component exists] → [Pastes component into blog page] → Done
|
||||
```
|
||||
|
||||
**Implementation:**
|
||||
```tsx
|
||||
// Blog page
|
||||
<section className="py-6 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<SearchBar value={searchQuery} onChange={setSearchQuery} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// SearchBar component (from tools page)
|
||||
export default function SearchBar({ value, onChange }: SearchBarProps) {
|
||||
return (
|
||||
<div className="relative max-w-2xl mx-auto"> {/* ← PROBLEM: Centered with narrow container */}
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" />
|
||||
<Input value={value} onChange={onChange} className="pl-10" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Result:**
|
||||
- ❌ Search bar centered on left-aligned page
|
||||
- ❌ max-w-2xl container inside max-w-5xl container
|
||||
- ❌ Visual inconsistency with rest of blog page
|
||||
- ❌ Breaks design language
|
||||
|
||||
**Visual outcome:**
|
||||
```
|
||||
Blog Page (LEFT-ALIGNED, max-w-5xl)
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ Blog │
|
||||
│ Real-world guides... │
|
||||
│ │
|
||||
│ ┌──────────────────┐ │ ← Centered, narrow
|
||||
│ │ [Search bar] │ │
|
||||
│ └──────────────────┘ │
|
||||
│ │
|
||||
│ [All Posts - left-aligned cards] │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### ✅ RIGHT APPROACH (Design-Thinking Mode)
|
||||
|
||||
**Process:**
|
||||
|
||||
**Phase 1: Design Language Analysis**
|
||||
|
||||
```markdown
|
||||
## Design Language Analysis
|
||||
|
||||
### Files Scanned
|
||||
- src/app/blog/page.tsx (blog landing page)
|
||||
- src/app/page.tsx (tools page for comparison)
|
||||
- src/components/SearchBar.tsx
|
||||
- src/components/CategoryFilter.tsx
|
||||
- src/app/globals.css
|
||||
|
||||
### Layout Patterns
|
||||
- Blog page: LEFT-ALIGNED layout throughout
|
||||
- All blog sections use max-w-5xl container
|
||||
- Category filter buttons are left-aligned
|
||||
- Blog cards grid is left-aligned
|
||||
|
||||
- Tools page (for comparison): CENTERED layout
|
||||
- Tools hero uses max-w-3xl centered
|
||||
- Tools SearchBar uses max-w-2xl centered
|
||||
|
||||
**Key insight:** Blog page has CONSISTENT left-aligned pattern with max-w-5xl containers.
|
||||
|
||||
### Component Patterns
|
||||
- SearchBar component exists with built-in max-w-2xl mx-auto (centered)
|
||||
- This pattern works for tools page but NOT for blog page
|
||||
- Category filter on blog page is left-aligned (not centered)
|
||||
```
|
||||
|
||||
**Phase 2: Design Decisions**
|
||||
|
||||
```markdown
|
||||
## Design Decisions
|
||||
|
||||
### Pattern Application
|
||||
Blog page requires LEFT-ALIGNED full-width search within max-w-5xl container.
|
||||
Cannot use SearchBar's centered max-w-2xl pattern - would break consistency.
|
||||
|
||||
### Component Approach
|
||||
Options:
|
||||
1. Add width/alignment variant props to SearchBar component
|
||||
2. Create inline search input specifically for blog page
|
||||
3. Create new FullWidthSearchBar component
|
||||
|
||||
Decision: Option 1 - Extend SearchBar with optional props
|
||||
- Maintains component reuse
|
||||
- Allows flexibility for different layout contexts
|
||||
- Avoids code duplication
|
||||
|
||||
### Consistency Requirements
|
||||
MUST maintain:
|
||||
- max-w-5xl container (matches rest of blog page)
|
||||
- Full width within container (left-aligned, not centered)
|
||||
- Same input styling (h-11, pl-10, bg-card, search icon)
|
||||
- Same search functionality
|
||||
|
||||
CAN vary:
|
||||
- Container width and alignment (adapts to page context)
|
||||
```
|
||||
|
||||
**Phase 3: Implementation**
|
||||
|
||||
```tsx
|
||||
// Enhanced SearchBar component with layout props
|
||||
interface SearchBarProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
fullWidth?: boolean; // New prop
|
||||
}
|
||||
|
||||
export default function SearchBar({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "Search...",
|
||||
fullWidth = false // Default to centered (backward compatible)
|
||||
}: SearchBarProps) {
|
||||
return (
|
||||
<div className={`relative ${fullWidth ? 'w-full' : 'max-w-2xl mx-auto'}`}>
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" />
|
||||
<Input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="w-full pl-10 pr-4 h-11 bg-card"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Blog page usage
|
||||
<section className="py-6 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<SearchBar
|
||||
value={searchQuery}
|
||||
onChange={setSearchQuery}
|
||||
placeholder="Search posts by title, author, or tags..."
|
||||
fullWidth={true} // Matches blog's left-aligned pattern
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Tools page usage (unchanged, backward compatible)
|
||||
<section className="py-6 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<SearchBar
|
||||
value={searchQuery}
|
||||
onChange={setSearchQuery}
|
||||
// No fullWidth prop = defaults to centered
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Result:**
|
||||
- ✅ Search bar matches blog page's left-aligned layout
|
||||
- ✅ Consistent max-w-5xl container width
|
||||
- ✅ Component reuse with flexibility
|
||||
- ✅ Backward compatible (tools page unchanged)
|
||||
- ✅ Design language preserved
|
||||
|
||||
**Visual outcome:**
|
||||
```
|
||||
Blog Page (LEFT-ALIGNED, max-w-5xl)
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ Blog │
|
||||
│ Real-world guides... │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────┐ │ ← Full width, left-aligned
|
||||
│ │ [Search bar] │ │
|
||||
│ └─────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [All Posts - left-aligned cards] │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Key Lessons
|
||||
|
||||
1. **Don't skip analysis** - The checklist exists for a reason
|
||||
2. **Scan multiple files** - Understanding context requires comprehensive analysis
|
||||
3. **Document patterns** - Explicit output makes thinking visible
|
||||
4. **Consider reuse vs creation** - Adapt existing components when possible
|
||||
5. **Match the context** - Blog's left-aligned pattern ≠ Tools' centered pattern
|
||||
|
||||
---
|
||||
|
||||
## Example: Component Reuse Decision
|
||||
|
||||
**Scenario:** Need a card component for a new dashboard section.
|
||||
|
||||
### Analysis
|
||||
|
||||
**Existing components found:**
|
||||
1. `ToolCard` - Border, rounded corners, hover effect, vertical layout
|
||||
2. `BlogPostCard` - Border, rounded corners, gradient header, vertical layout
|
||||
3. `FeatureCard` - No border, shadow effect, horizontal layout
|
||||
|
||||
### Decision Matrix
|
||||
|
||||
| Option | Pros | Cons | Decision |
|
||||
|--------|------|------|----------|
|
||||
| Reuse ToolCard | Matches border/rounded style | Vertical layout might not fit | ❌ Layout mismatch |
|
||||
| Reuse FeatureCard | Horizontal layout fits | No border/rounded style | ❌ Style mismatch |
|
||||
| Create DashboardCard | Perfect fit for needs | New component = maintenance | ⚠️ Only if truly different |
|
||||
| **Extend ToolCard with layout prop** | Reuses existing + flexible | Small refactor needed | ✅ **Best choice** |
|
||||
|
||||
### Implementation
|
||||
|
||||
```tsx
|
||||
// Extended ToolCard with layout variant
|
||||
interface ToolCardProps {
|
||||
tool: Tool;
|
||||
layout?: 'vertical' | 'horizontal';
|
||||
}
|
||||
|
||||
export default function ToolCard({ tool, layout = 'vertical' }: ToolCardProps) {
|
||||
const isHorizontal = layout === 'horizontal';
|
||||
|
||||
return (
|
||||
<div className={`border rounded-lg p-4 hover:border-foreground/20 transition-all
|
||||
${isHorizontal ? 'flex items-center gap-4' : 'flex flex-col'}`}
|
||||
>
|
||||
{/* Content adapts to layout */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example: Typography Consistency
|
||||
|
||||
**Scenario:** Adding a new "About" page to existing site.
|
||||
|
||||
### Analysis Output
|
||||
|
||||
```markdown
|
||||
## Typography Patterns (from existing pages)
|
||||
|
||||
### Heading Hierarchy
|
||||
- H1: text-3xl md:text-4xl, font-semibold, tracking-tight
|
||||
- H2: text-xl md:text-2xl, font-semibold
|
||||
- H3: text-lg, font-medium
|
||||
|
||||
### Body Text
|
||||
- Default: text-base, leading-relaxed
|
||||
- Small: text-sm
|
||||
- Meta/timestamps: text-xs, text-muted-foreground
|
||||
|
||||
### Font Family
|
||||
- Primary: Inter with fallbacks
|
||||
- No display font used
|
||||
- No monospace needed (no code samples)
|
||||
```
|
||||
|
||||
### Correct Implementation
|
||||
|
||||
```tsx
|
||||
// About page - matches existing hierarchy
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h1 className="text-3xl md:text-4xl font-semibold tracking-tight mb-4">
|
||||
About Us
|
||||
</h1>
|
||||
|
||||
<p className="text-base leading-relaxed mb-6">
|
||||
Our story begins...
|
||||
</p>
|
||||
|
||||
<h2 className="text-xl md:text-2xl font-semibold mb-3">
|
||||
Our Mission
|
||||
</h2>
|
||||
|
||||
<p className="text-base leading-relaxed">
|
||||
We believe in...
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### ❌ Incorrect Implementation
|
||||
|
||||
```tsx
|
||||
// DON'T: Different sizes, weights, tracking
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h1 className="text-5xl font-bold tracking-wide mb-6"> {/* ← Too large, too bold */}
|
||||
About Us
|
||||
</h1>
|
||||
|
||||
<p className="text-lg leading-normal mb-8"> {/* ← Larger than existing pages */}
|
||||
Our story begins...
|
||||
</p>
|
||||
|
||||
<h2 className="text-2xl font-bold mb-4"> {/* ← font-bold instead of font-semibold */}
|
||||
Our Mission
|
||||
</h2>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Example: Layout Pattern Matching
|
||||
|
||||
**Scenario:** Adding a "Pricing" page.
|
||||
|
||||
### Pattern Analysis
|
||||
|
||||
**Existing page patterns:**
|
||||
- Home: Centered hero (max-w-3xl) → Wide content (max-w-5xl)
|
||||
- Blog: All sections left-aligned (max-w-5xl)
|
||||
- Tools: Centered hero (max-w-3xl) → Wide grid (max-w-5xl)
|
||||
|
||||
**Decision:** Pricing is marketing content, matches "Home" pattern.
|
||||
|
||||
### Correct Implementation
|
||||
|
||||
```tsx
|
||||
// Pricing page - matches Home pattern
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<main>
|
||||
{/* Hero: Centered, narrow */}
|
||||
<section className="py-12 px-6">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h1 className="text-3xl md:text-4xl font-semibold">
|
||||
Simple, Transparent Pricing
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Plans: Wide, centered grid */}
|
||||
<section className="py-8 px-6">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Pricing cards */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Anti-Example: Generic AI Slop
|
||||
|
||||
### ❌ The Problem
|
||||
|
||||
**Request:** "Create a landing page for a SaaS product"
|
||||
|
||||
**Generic AI Output:**
|
||||
```tsx
|
||||
// Predictable, seen-it-before structure
|
||||
<main className="bg-white">
|
||||
{/* Purple gradient hero */}
|
||||
<section className="bg-gradient-to-r from-purple-600 to-blue-500 text-white py-20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-5xl font-bold mb-6">
|
||||
Revolutionize Your Workflow
|
||||
</h1>
|
||||
<p className="text-xl mb-8">
|
||||
The all-in-one platform for modern teams
|
||||
</p>
|
||||
<button className="bg-white text-purple-600 px-8 py-3 rounded-lg">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Three feature cards */}
|
||||
<section className="py-20">
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-3 gap-8">
|
||||
<Card icon="⚡" title="Fast" description="Lightning fast performance" />
|
||||
<Card icon="🔒" title="Secure" description="Bank-level security" />
|
||||
<Card icon="📈" title="Scalable" description="Grows with you" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
{/* CTA */}
|
||||
</main>
|
||||
```
|
||||
|
||||
**Font:** Inter (of course)
|
||||
**Colors:** Purple gradient (of course)
|
||||
**Layout:** Centered everything (of course)
|
||||
|
||||
**Problem:** Indistinguishable from 1000 other AI-generated SaaS pages.
|
||||
|
||||
### ✅ Better Approach
|
||||
|
||||
**Apply design thinking:**
|
||||
- What makes THIS product different?
|
||||
- Who is the audience? (Technical? Creative? Enterprise?)
|
||||
- What feeling should the design evoke?
|
||||
- What's ONE memorable element?
|
||||
|
||||
**Example re-design (Brutalist/Technical Direction):**
|
||||
```tsx
|
||||
// Bold, distinctive approach
|
||||
<main className="bg-black text-green-400 font-mono">
|
||||
{/* Terminal-style hero */}
|
||||
<section className="min-h-screen p-6 flex items-center">
|
||||
<div className="max-w-4xl">
|
||||
<pre className="text-sm mb-4">$ initialize_revolution.sh</pre>
|
||||
<h1 className="text-6xl font-bold mb-4 glitch-effect">
|
||||
SYSTEM<br/>
|
||||
OVERRIDE
|
||||
</h1>
|
||||
<p className="text-lg text-green-300 mb-8 max-w-xl">
|
||||
For developers who don't compromise. Raw power. Zero abstraction.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<button className="border-2 border-green-400 px-6 py-2 hover:bg-green-400 hover:text-black transition-colors">
|
||||
> ssh access@deploy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Asymmetric feature layout */}
|
||||
<section className="p-6">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-12 gap-4">
|
||||
<div className="col-span-8 border-2 border-green-400 p-8">
|
||||
{/* Main feature */}
|
||||
</div>
|
||||
<div className="col-span-4 border-2 border-green-400 p-4">
|
||||
{/* Stats ticker */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
```
|
||||
|
||||
**Distinctive elements:**
|
||||
- Terminal/command-line aesthetic
|
||||
- Monospace typography
|
||||
- High-contrast green-on-black
|
||||
- Asymmetric grid layout
|
||||
- Technical/hacker vibe
|
||||
- Memorable and specific to audience
|
||||
|
||||
---
|
||||
|
||||
## More Examples
|
||||
|
||||
For additional examples and techniques, see:
|
||||
- [REFERENCE.md](REFERENCE.md#advanced-techniques) - Deep-dive patterns
|
||||
- [NEW-PROJECT-DESIGN.md](NEW-PROJECT-DESIGN.md) - Aesthetic philosophy
|
||||
- [EXISTING-CODEBASE-CHECKLIST.md](EXISTING-CODEBASE-CHECKLIST.md) - Consistency workflow
|
||||
174
skills/frontend-development/EXISTING-CODEBASE-CHECKLIST.md
Normal file
174
skills/frontend-development/EXISTING-CODEBASE-CHECKLIST.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# Existing Codebase: Design Consistency Checklist
|
||||
|
||||
**⚠️ MANDATORY WORKFLOW FOR EXISTING CODEBASES**
|
||||
|
||||
When adding components, pages, or UI elements to an existing codebase, you MUST complete this analysis and OUTPUT your findings BEFORE writing any code. This prevents design language inconsistencies.
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Design Language Analysis (REQUIRED OUTPUT)
|
||||
|
||||
**YOU MUST OUTPUT A "DESIGN LANGUAGE ANALYSIS" SECTION** showing:
|
||||
|
||||
### 1. Files Scanned
|
||||
- List specific files you examined (components, pages, layouts)
|
||||
- Minimum 3-5 related files
|
||||
|
||||
### 2. Layout Patterns Identified
|
||||
- Document: Centered vs left-aligned content
|
||||
- Document: Container max-widths used (e.g., max-w-2xl, max-w-5xl, max-w-7xl)
|
||||
- Document: Spacing patterns (section padding, element gaps)
|
||||
- Document: Grid systems and responsive breakpoints
|
||||
|
||||
### 3. Typography Patterns Identified
|
||||
- Document: Font families used (primary, display, mono)
|
||||
- Document: Heading hierarchy (h1, h2, h3 styles)
|
||||
- Document: Font sizes, weights, line heights
|
||||
- Document: Text colors and muted text patterns
|
||||
|
||||
### 4. Component Patterns Identified
|
||||
- Document: How similar existing components are structured
|
||||
- Document: Reusable UI components available (buttons, inputs, cards)
|
||||
- Document: State management patterns
|
||||
- Document: Animation and interaction patterns
|
||||
|
||||
### 5. Color & Theme Patterns
|
||||
- Document: CSS variables or theme system used
|
||||
- Document: Color palette (background, foreground, accent, muted)
|
||||
- Document: Light/dark mode approach
|
||||
|
||||
### Example Output Format
|
||||
|
||||
```markdown
|
||||
## Design Language Analysis
|
||||
|
||||
### Files Scanned
|
||||
- src/app/page.tsx (tools landing page)
|
||||
- src/app/blog/page.tsx (blog landing page)
|
||||
- src/components/SearchBar.tsx
|
||||
- src/components/ToolCard.tsx
|
||||
- src/app/globals.css
|
||||
|
||||
### Layout Patterns
|
||||
- Blog page: LEFT-ALIGNED with max-w-5xl containers
|
||||
- Tools page: CENTERED hero with max-w-3xl, then max-w-5xl for content
|
||||
- Consistent: py-8 px-6 section padding
|
||||
- Consistent: max-w-5xl for main content areas
|
||||
|
||||
### Typography Patterns
|
||||
- Font: Inter with fallbacks
|
||||
- H1: text-3xl md:text-4xl, font-semibold
|
||||
- Body: text-base, text-sm for meta
|
||||
- Muted text: text-muted-foreground
|
||||
|
||||
### Component Patterns
|
||||
- SearchBar: Exists, uses max-w-2xl centered layout
|
||||
- Cards: Border, rounded-lg, hover states
|
||||
- Inputs: h-11 height, pl-10 with icon, bg-card background
|
||||
|
||||
### Color & Theme
|
||||
- Dark theme via CSS variables
|
||||
- Background: hsl(0 0% 7%)
|
||||
- Muted: hsl(0 0% 60%)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Design Decisions (REQUIRED OUTPUT)
|
||||
|
||||
**YOU MUST OUTPUT A "DESIGN DECISIONS" SECTION** documenting:
|
||||
|
||||
### 1. Which patterns apply to this new component/page?
|
||||
- What layout approach matches the context?
|
||||
- What typography styles should be used?
|
||||
- What spacing values maintain consistency?
|
||||
|
||||
### 2. Should you adapt existing components or create new ones?
|
||||
- Can existing components be reused as-is?
|
||||
- Do existing components need props/variants added?
|
||||
- Is a new component justified, or would it create inconsistency?
|
||||
|
||||
### 3. What are the consistency requirements?
|
||||
- What MUST stay the same (e.g., container width on blog pages)
|
||||
- What CAN vary (e.g., component-specific details)
|
||||
|
||||
### Example Output Format
|
||||
|
||||
```markdown
|
||||
## Design Decisions
|
||||
|
||||
### Pattern Application
|
||||
Blog page uses LEFT-ALIGNED layout with max-w-5xl containers throughout.
|
||||
The search bar must match this pattern, NOT the centered max-w-2xl pattern from tools page.
|
||||
|
||||
### Component Approach
|
||||
SearchBar component exists but is designed for centered layouts (max-w-2xl mx-auto).
|
||||
Options:
|
||||
1. Add width variant prop to SearchBar
|
||||
2. Create inline search input for blog page
|
||||
Decision: Option 2 - create inline search to match blog's full-width pattern
|
||||
|
||||
### Consistency Requirements
|
||||
MUST maintain:
|
||||
- max-w-5xl container (matches rest of blog page)
|
||||
- Full width within container (left-aligned, not centered)
|
||||
- Same input styling (h-11, pl-10, bg-card)
|
||||
- Same search icon positioning
|
||||
|
||||
CAN vary:
|
||||
- Container width (must match blog's max-w-5xl, not tools' max-w-2xl)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Implementation
|
||||
|
||||
**ONLY AFTER** completing Phase 1 and Phase 2 outputs above, proceed with writing code.
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**For existing codebases**, maintain consistency with identified patterns:
|
||||
|
||||
- **Typography**: Use existing font families, sizes, weights
|
||||
- **Color & Theme**: Use existing CSS variables and color tokens
|
||||
- **Spacing**: Match existing padding, margin, gap patterns
|
||||
- **Components**: Reuse or extend existing components when possible
|
||||
- **Animations**: Match existing motion and interaction patterns
|
||||
|
||||
**See also:**
|
||||
- [EXAMPLES.md](EXAMPLES.md) - Real-world case studies
|
||||
- [REFERENCE.md](REFERENCE.md) - Deep aesthetic principles (apply only where consistent)
|
||||
|
||||
---
|
||||
|
||||
## Common Mistakes to Avoid
|
||||
|
||||
❌ **Skipping Phase 1** - Jumping straight to implementation without analysis
|
||||
❌ **Shallow scanning** - Only looking at 1-2 files instead of comprehensive analysis
|
||||
❌ **Ignoring patterns** - Seeing patterns but not applying them
|
||||
❌ **Component bloat** - Creating new components when existing ones could be adapted
|
||||
❌ **Inconsistent widths** - Mixing centered and left-aligned layouts on the same page type
|
||||
❌ **Typography drift** - Using different fonts, sizes, or weights without justification
|
||||
❌ **Color divergence** - Adding new color values instead of using existing tokens
|
||||
|
||||
---
|
||||
|
||||
## Checklist Summary
|
||||
|
||||
Before writing any code:
|
||||
|
||||
- [ ] Scanned 3-5 related files
|
||||
- [ ] Documented layout patterns (alignment, containers, spacing)
|
||||
- [ ] Documented typography patterns (fonts, hierarchy, colors)
|
||||
- [ ] Documented component patterns (structure, reusable components)
|
||||
- [ ] Documented color/theme patterns (variables, palette, mode)
|
||||
- [ ] OUTPUT complete "Design Language Analysis" section
|
||||
- [ ] Decided which patterns apply to new work
|
||||
- [ ] Decided on component reuse vs creation strategy
|
||||
- [ ] Identified consistency requirements (MUST vs CAN)
|
||||
- [ ] OUTPUT complete "Design Decisions" section
|
||||
- [ ] **Only then**: Proceed to implementation
|
||||
|
||||
---
|
||||
|
||||
**Remember:** The goal is consistency, not perfection. When in doubt, match existing patterns.
|
||||
335
skills/frontend-development/NEW-PROJECT-DESIGN.md
Normal file
335
skills/frontend-development/NEW-PROJECT-DESIGN.md
Normal file
@@ -0,0 +1,335 @@
|
||||
# New Project: Aesthetic Design Philosophy
|
||||
|
||||
**Use this when building from scratch** - no existing codebase to match, full creative freedom.
|
||||
|
||||
This guide helps you create bold, distinctive frontend interfaces that avoid generic "AI slop" aesthetics and deliver memorable user experiences.
|
||||
|
||||
---
|
||||
|
||||
## Design Thinking Process
|
||||
|
||||
Before coding, understand the context and commit to a BOLD aesthetic direction.
|
||||
|
||||
### 1. Understand the Context
|
||||
|
||||
**Purpose**
|
||||
- What problem does this interface solve?
|
||||
- Who are the users?
|
||||
- What are their goals and pain points?
|
||||
|
||||
**Constraints**
|
||||
- Technical requirements (framework, performance targets)
|
||||
- Accessibility standards (WCAG compliance)
|
||||
- Browser support needs
|
||||
- Device/viewport considerations
|
||||
|
||||
**Differentiation**
|
||||
- What makes this interface UNFORGETTABLE?
|
||||
- What's the one thing someone will remember?
|
||||
- How does it stand out from competitors?
|
||||
|
||||
### 2. Choose an Aesthetic Direction
|
||||
|
||||
**Pick an extreme** - commit fully to a clear conceptual direction:
|
||||
|
||||
- **Brutally minimal**: Sparse layouts, monochrome palette, extreme negative space
|
||||
- **Maximalist chaos**: Dense information, bold colors, layered complexity
|
||||
- **Retro-futuristic**: Nostalgic elements with modern tech aesthetic
|
||||
- **Organic/natural**: Flowing forms, earthy tones, biomimicry
|
||||
- **Luxury/refined**: Sophisticated typography, muted elegance, premium feel
|
||||
- **Playful/toy-like**: Rounded shapes, bright colors, whimsical interactions
|
||||
- **Editorial/magazine**: Strong typography hierarchy, grid-based, content-focused
|
||||
- **Brutalist/raw**: Exposed structure, harsh contrasts, utilitarian
|
||||
- **Art deco/geometric**: Symmetry, geometric patterns, metallic accents
|
||||
- **Soft/pastel**: Gentle gradients, low contrast, calming atmosphere
|
||||
- **Industrial/utilitarian**: Function-first, mechanical aesthetics, technical precision
|
||||
|
||||
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
|
||||
|
||||
### 3. Implementation Goals
|
||||
|
||||
Create working code that is:
|
||||
|
||||
✅ **Production-grade and functional**
|
||||
- Real, working code (not mockups)
|
||||
- Properly structured components
|
||||
- Responsive across devices
|
||||
- Accessible to all users
|
||||
|
||||
✅ **Visually striking and memorable**
|
||||
- Immediate visual impact
|
||||
- Distinctive from generic templates
|
||||
- Reinforces brand/purpose
|
||||
|
||||
✅ **Cohesive with clear aesthetic point-of-view**
|
||||
- Every element serves the chosen direction
|
||||
- Consistent visual language
|
||||
- Intentional design decisions throughout
|
||||
|
||||
✅ **Meticulously refined in every detail**
|
||||
- Precise spacing and alignment
|
||||
- Thoughtful micro-interactions
|
||||
- Polish in typography, color, motion
|
||||
|
||||
---
|
||||
|
||||
## Frontend Aesthetics Guidelines
|
||||
|
||||
Apply these principles when executing your design vision:
|
||||
|
||||
### Typography
|
||||
|
||||
**Go beyond generic fonts** - typography is personality.
|
||||
|
||||
✅ **DO:**
|
||||
- Choose distinctive, characterful fonts
|
||||
- Pair a bold display font with a refined body font
|
||||
- Use font variation (weight, width, slant) for hierarchy
|
||||
- Consider custom/variable fonts for uniqueness
|
||||
- Test readability across sizes and contexts
|
||||
|
||||
❌ **AVOID:**
|
||||
- Generic system fonts (Arial, Helvetica, system-ui)
|
||||
- Overused web fonts (Inter, Roboto - unless intentional)
|
||||
- Poor contrast or readability
|
||||
- Inconsistent font pairing
|
||||
|
||||
**Examples:**
|
||||
- Display: Ginto, Clash Display, Syne, Archivo Black, Fraunces
|
||||
- Body: Work Sans, Söhne, Untitled Sans, Sentient, Supreme
|
||||
- Mono: JetBrains Mono, Commit Mono, Berkeley Mono
|
||||
|
||||
### Color & Theme
|
||||
|
||||
**Commit to a cohesive palette** - colors create atmosphere.
|
||||
|
||||
✅ **DO:**
|
||||
- Use CSS variables for consistency
|
||||
- Choose dominant colors with sharp accents
|
||||
- Create intentional color relationships
|
||||
- Consider color psychology (warm/cool, energetic/calming)
|
||||
- Test contrast for accessibility (WCAG AA minimum)
|
||||
|
||||
❌ **AVOID:**
|
||||
- Timid, evenly-distributed palettes
|
||||
- Clichéd combinations (purple gradient on white)
|
||||
- Poor contrast ratios
|
||||
- Randomness without purpose
|
||||
|
||||
**Approaches:**
|
||||
- **Monochrome + accent**: Single base color with one bold accent
|
||||
- **Analogous harmony**: Adjacent colors on color wheel
|
||||
- **Bold contrast**: High-contrast complementary colors
|
||||
- **Muted elegance**: Desaturated tones with subtle variation
|
||||
|
||||
### Motion & Animation
|
||||
|
||||
**Animate with purpose** - motion should delight and inform.
|
||||
|
||||
✅ **DO:**
|
||||
- Prioritize CSS-only solutions for performance
|
||||
- Use Motion library (Framer Motion) for React when needed
|
||||
- Focus on high-impact moments (page load, key interactions)
|
||||
- Use staggered reveals (animation-delay) for orchestration
|
||||
- Add scroll-triggered animations for engagement
|
||||
- Create surprising hover states
|
||||
|
||||
❌ **AVOID:**
|
||||
- Scattered, meaningless micro-interactions
|
||||
- Performance-heavy JavaScript animations for simple effects
|
||||
- Motion that distracts from content
|
||||
- Animations without easing (linear motion feels robotic)
|
||||
|
||||
**High-Impact Patterns:**
|
||||
- Staggered fade-in on page load
|
||||
- Smooth scroll-triggered reveals
|
||||
- Morphing shapes on interaction
|
||||
- Parallax effects (use sparingly)
|
||||
- Magnetic cursor effects
|
||||
- Elastic hover states
|
||||
|
||||
### Spatial Composition
|
||||
|
||||
**Break expectations** - layouts should surprise and guide.
|
||||
|
||||
✅ **DO:**
|
||||
- Use asymmetry intentionally
|
||||
- Overlap elements for depth
|
||||
- Create diagonal flow to guide eye
|
||||
- Add grid-breaking elements for interest
|
||||
- Use generous negative space OR controlled density (not in-between)
|
||||
|
||||
❌ **AVOID:**
|
||||
- Predictable centered layouts
|
||||
- Uniform spacing everywhere
|
||||
- Tight, cramped compositions
|
||||
- Lack of visual hierarchy
|
||||
|
||||
**Techniques:**
|
||||
- **Asymmetric grids**: Offset columns, uneven distribution
|
||||
- **Z-index layering**: Overlap for depth and dimensionality
|
||||
- **Diagonal flow**: Angles create energy and movement
|
||||
- **Negative space**: Breathing room emphasizes important content
|
||||
- **Controlled density**: Information-rich areas with clear structure
|
||||
|
||||
### Backgrounds & Visual Details
|
||||
|
||||
**Create atmosphere** - go beyond solid colors.
|
||||
|
||||
✅ **DO:**
|
||||
- Add contextual textures and effects
|
||||
- Use gradient meshes for depth
|
||||
- Apply subtle noise/grain overlays
|
||||
- Create layered transparencies
|
||||
- Add dramatic shadows for elevation
|
||||
- Consider decorative borders and ornaments
|
||||
- Experiment with custom cursor styles
|
||||
|
||||
❌ **AVOID:**
|
||||
- Plain solid color backgrounds everywhere
|
||||
- Overused gradient patterns
|
||||
- Details that don't match aesthetic direction
|
||||
- Visual noise without purpose
|
||||
|
||||
**Techniques:**
|
||||
- **Gradient meshes**: Soft, organic color transitions
|
||||
- **Noise textures**: Subtle grain for tactile quality
|
||||
- **Geometric patterns**: Structured, repeating motifs
|
||||
- **Radial gradients**: Spotlight effects, vignettes
|
||||
- **Blurred shapes**: Abstract background elements
|
||||
- **Glass morphism**: Frosted glass effects (backdrop-filter)
|
||||
|
||||
---
|
||||
|
||||
## Anti-Patterns: Avoiding AI Slop
|
||||
|
||||
**NEVER** create generic AI-generated aesthetics. Recognize and avoid these patterns:
|
||||
|
||||
❌ **Overused font families**
|
||||
- Inter everywhere (it's become the Arial of AI-generated designs)
|
||||
- Roboto (overused, lacks character)
|
||||
- System fonts without intentionality
|
||||
- Space Grotesk (recently overused in AI designs)
|
||||
|
||||
❌ **Clichéd color schemes**
|
||||
- Purple gradients on white backgrounds
|
||||
- Generic blue/teal combinations
|
||||
- Pastel everything without purpose
|
||||
- Rainbow gradients without restraint
|
||||
|
||||
❌ **Predictable layouts**
|
||||
- Centered hero → 3 feature cards → testimonials → CTA
|
||||
- Same component patterns as every SaaS landing page
|
||||
- No surprises, no memorable moments
|
||||
- Cookie-cutter grid systems
|
||||
|
||||
❌ **Lack of context-specific character**
|
||||
- Designs that could be for any product/service
|
||||
- No connection to brand, purpose, or audience
|
||||
- Generic stock photography aesthetic
|
||||
- Templated feel throughout
|
||||
|
||||
---
|
||||
|
||||
## Creative Freedom Guidelines
|
||||
|
||||
**Interpret creatively** - make unexpected choices that feel genuinely designed for the context.
|
||||
|
||||
### Vary Your Approach
|
||||
|
||||
**No two designs should be the same.** Intentionally vary:
|
||||
|
||||
- **Theme**: Light vs dark (or something in between)
|
||||
- **Density**: Spacious vs information-rich
|
||||
- **Tone**: Professional vs playful vs experimental
|
||||
- **Complexity**: Minimal vs maximalist
|
||||
- **Typography**: Serif vs sans-serif vs mixed
|
||||
- **Color**: Monochrome vs vibrant vs muted
|
||||
|
||||
**NEVER converge on common choices** across different projects. If you used Space Grotesk last time, choose something completely different this time.
|
||||
|
||||
### Match Complexity to Vision
|
||||
|
||||
**Aesthetic vision dictates code complexity:**
|
||||
|
||||
**Maximalist designs** → Elaborate implementation
|
||||
- Extensive animations and effects
|
||||
- Complex layering and composition
|
||||
- Rich interactions and micro-animations
|
||||
- Advanced CSS techniques
|
||||
|
||||
**Minimalist designs** → Restrained implementation
|
||||
- Precise spacing and alignment
|
||||
- Subtle, purposeful animations
|
||||
- Careful typography tuning
|
||||
- Attention to micro-details
|
||||
|
||||
**Elegance comes from executing the vision well**, not from choosing "simple" vs "complex."
|
||||
|
||||
---
|
||||
|
||||
## Implementation Checklist
|
||||
|
||||
Before finalizing your design:
|
||||
|
||||
### Context & Strategy
|
||||
- [ ] Clearly defined purpose and audience
|
||||
- [ ] Identified key differentiator (the memorable element)
|
||||
- [ ] Chosen specific aesthetic direction (not generic)
|
||||
- [ ] Considered technical constraints
|
||||
|
||||
### Typography
|
||||
- [ ] Distinctive font choices (not Inter/Roboto by default)
|
||||
- [ ] Clear hierarchy (display vs body vs UI)
|
||||
- [ ] Tested readability across sizes
|
||||
- [ ] Proper font pairing
|
||||
|
||||
### Color & Theme
|
||||
- [ ] Cohesive color palette with CSS variables
|
||||
- [ ] Intentional color relationships
|
||||
- [ ] Tested contrast for accessibility (WCAG AA+)
|
||||
- [ ] Avoided clichéd combinations
|
||||
|
||||
### Motion & Animation
|
||||
- [ ] High-impact moments identified and animated
|
||||
- [ ] CSS-first approach for performance
|
||||
- [ ] Easing curves feel natural
|
||||
- [ ] Animations enhance, not distract
|
||||
|
||||
### Spatial Composition
|
||||
- [ ] Unexpected or intentional layout choices
|
||||
- [ ] Visual hierarchy guides user attention
|
||||
- [ ] Appropriate use of space (generous or dense)
|
||||
- [ ] Breaking the grid where appropriate
|
||||
|
||||
### Visual Details
|
||||
- [ ] Contextual backgrounds and textures
|
||||
- [ ] Atmospheric depth (gradients, shadows, layers)
|
||||
- [ ] Details match chosen aesthetic
|
||||
- [ ] Polish in every interaction
|
||||
|
||||
### Originality
|
||||
- [ ] Doesn't look like generic AI output
|
||||
- [ ] Context-specific character throughout
|
||||
- [ ] Memorable and distinctive
|
||||
- [ ] Different from previous projects
|
||||
|
||||
---
|
||||
|
||||
## Remember
|
||||
|
||||
**Claude is capable of extraordinary creative work.**
|
||||
|
||||
Don't hold back. Show what can truly be created when:
|
||||
- Thinking outside the box
|
||||
- Committing fully to a distinctive vision
|
||||
- Avoiding generic templates and patterns
|
||||
- Designing with intention and purpose
|
||||
|
||||
Create something unforgettable.
|
||||
|
||||
---
|
||||
|
||||
**See also:**
|
||||
- [EXAMPLES.md](EXAMPLES.md) - Real-world design examples and case studies
|
||||
- [REFERENCE.md](REFERENCE.md) - Deep-dive into specific aesthetic techniques
|
||||
769
skills/frontend-development/REFERENCE.md
Normal file
769
skills/frontend-development/REFERENCE.md
Normal file
@@ -0,0 +1,769 @@
|
||||
# Frontend Design Reference
|
||||
|
||||
Comprehensive guide to aesthetic principles, advanced techniques, and deep-dive guidance for creating exceptional frontend interfaces.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Advanced Typography Techniques](#advanced-typography-techniques)
|
||||
2. [Color Theory & Application](#color-theory--application)
|
||||
3. [Motion Design Principles](#motion-design-principles)
|
||||
4. [Spatial Composition Techniques](#spatial-composition-techniques)
|
||||
5. [Visual Depth & Atmosphere](#visual-depth--atmosphere)
|
||||
6. [Responsive Design Patterns](#responsive-design-patterns)
|
||||
7. [Accessibility & Inclusive Design](#accessibility--inclusive-design)
|
||||
8. [Performance Optimization](#performance-optimization)
|
||||
9. [Design System Patterns](#design-system-patterns)
|
||||
|
||||
---
|
||||
|
||||
## Advanced Typography Techniques
|
||||
|
||||
### Font Pairing Strategies
|
||||
|
||||
**Rule of Contrast**
|
||||
Pair fonts that are different enough to create hierarchy, but harmonious enough to feel cohesive.
|
||||
|
||||
**Successful Pairings:**
|
||||
```css
|
||||
/* Display + Sans */
|
||||
--font-display: 'Clash Display', sans-serif; /* Bold, geometric */
|
||||
--font-body: 'Inter', sans-serif; /* Clean, readable */
|
||||
|
||||
/* Serif + Sans */
|
||||
--font-display: 'Fraunces', serif; /* Classic, elegant */
|
||||
--font-body: 'Untitled Sans', sans-serif; /* Modern, neutral */
|
||||
|
||||
/* Mono + Sans */
|
||||
--font-code: 'JetBrains Mono', monospace; /* Technical */
|
||||
--font-body: 'Work Sans', sans-serif; /* Professional */
|
||||
```
|
||||
|
||||
**Font Pairing Framework:**
|
||||
1. **Contrast in style** - Serif vs Sans, Geometric vs Humanist
|
||||
2. **Harmony in proportion** - Similar x-heights or cap heights
|
||||
3. **Shared characteristics** - Similar stroke contrast or terminals
|
||||
4. **Appropriate mood** - Both match the aesthetic direction
|
||||
|
||||
### Variable Fonts
|
||||
|
||||
**Advantages:**
|
||||
- Single file, multiple styles
|
||||
- Smooth animations between weights/widths
|
||||
- Fine-tuned responsive typography
|
||||
- Performance benefits
|
||||
|
||||
**Implementation:**
|
||||
```css
|
||||
@font-face {
|
||||
font-family: 'InterVariable';
|
||||
src: url('/fonts/Inter-Variable.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: 'InterVariable', sans-serif;
|
||||
font-weight: 700;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-weight: 600; /* Lighter weight on mobile */
|
||||
}
|
||||
}
|
||||
|
||||
/* Animate weight on interaction */
|
||||
.button {
|
||||
font-weight: 500;
|
||||
transition: font-weight 0.2s ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
font-weight: 700;
|
||||
}
|
||||
```
|
||||
|
||||
### Typographic Rhythm
|
||||
|
||||
**Vertical Rhythm:**
|
||||
Consistent spacing based on baseline grid.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--baseline: 8px;
|
||||
--line-height: 1.5;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
line-height: calc(var(--baseline) * 8); /* 64px */
|
||||
margin-bottom: calc(var(--baseline) * 4); /* 32px */
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: calc(var(--baseline) * 3); /* 24px */
|
||||
margin-bottom: calc(var(--baseline) * 3); /* 24px */
|
||||
}
|
||||
```
|
||||
|
||||
**Modular Scale:**
|
||||
Type sizes based on mathematical ratio.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--ratio: 1.25; /* Major third */
|
||||
--base-size: 16px;
|
||||
}
|
||||
|
||||
.text-xs { font-size: calc(var(--base-size) / var(--ratio) / var(--ratio)); }
|
||||
.text-sm { font-size: calc(var(--base-size) / var(--ratio)); }
|
||||
.text-base { font-size: var(--base-size); }
|
||||
.text-lg { font-size: calc(var(--base-size) * var(--ratio)); }
|
||||
.text-xl { font-size: calc(var(--base-size) * var(--ratio) * var(--ratio)); }
|
||||
.text-2xl { font-size: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio)); }
|
||||
```
|
||||
|
||||
### Advanced Typography CSS
|
||||
|
||||
**Optical alignment:**
|
||||
```css
|
||||
.heading {
|
||||
/* Hanging punctuation */
|
||||
hanging-punctuation: first last;
|
||||
|
||||
/* Adjust spacing for visual balance */
|
||||
letter-spacing: -0.02em; /* Tighter tracking for large headings */
|
||||
}
|
||||
```
|
||||
|
||||
**OpenType features:**
|
||||
```css
|
||||
.body-text {
|
||||
/* Enable ligatures and contextual alternates */
|
||||
font-feature-settings:
|
||||
"liga" 1, /* Standard ligatures */
|
||||
"calt" 1, /* Contextual alternates */
|
||||
"kern" 1; /* Kerning */
|
||||
|
||||
/* Better for body text */
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.numbers {
|
||||
/* Tabular figures for alignment */
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Color Theory & Application
|
||||
|
||||
### Color Psychology
|
||||
|
||||
**Warm Colors** - Energy, passion, urgency
|
||||
- Red: Bold, attention-grabbing, urgent
|
||||
- Orange: Friendly, enthusiastic, creative
|
||||
- Yellow: Optimistic, cheerful, attention
|
||||
|
||||
**Cool Colors** - Trust, calm, professionalism
|
||||
- Blue: Trustworthy, stable, corporate
|
||||
- Green: Natural, growth, health
|
||||
- Purple: Luxury, creativity, wisdom
|
||||
|
||||
**Neutral Colors** - Balance, sophistication
|
||||
- Black: Elegant, powerful, formal
|
||||
- White: Clean, minimal, pure
|
||||
- Gray: Professional, timeless, neutral
|
||||
|
||||
### Advanced Color Systems
|
||||
|
||||
**HSL-Based Design:**
|
||||
Benefits of HSL over RGB/Hex:
|
||||
- Easier to create variations (lighter, darker)
|
||||
- Intuitive manipulation (hue, saturation, lightness)
|
||||
- Better for programmatic generation
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Base color in HSL */
|
||||
--hue: 220;
|
||||
--saturation: 70%;
|
||||
--lightness: 50%;
|
||||
|
||||
/* Generate color scale */
|
||||
--color-50: hsl(var(--hue), var(--saturation), 95%);
|
||||
--color-100: hsl(var(--hue), var(--saturation), 90%);
|
||||
--color-200: hsl(var(--hue), var(--saturation), 80%);
|
||||
--color-300: hsl(var(--hue), var(--saturation), 70%);
|
||||
--color-400: hsl(var(--hue), var(--saturation), 60%);
|
||||
--color-500: hsl(var(--hue), var(--saturation), 50%);
|
||||
--color-600: hsl(var(--hue), var(--saturation), 40%);
|
||||
--color-700: hsl(var(--hue), var(--saturation), 30%);
|
||||
--color-800: hsl(var(--hue), var(--saturation), 20%);
|
||||
--color-900: hsl(var(--hue), var(--saturation), 10%);
|
||||
}
|
||||
```
|
||||
|
||||
**Semantic Color Tokens:**
|
||||
```css
|
||||
:root {
|
||||
/* Primitive colors */
|
||||
--blue-500: hsl(220, 70%, 50%);
|
||||
--red-500: hsl(0, 70%, 50%);
|
||||
--green-500: hsl(140, 60%, 45%);
|
||||
|
||||
/* Semantic tokens */
|
||||
--color-primary: var(--blue-500);
|
||||
--color-danger: var(--red-500);
|
||||
--color-success: var(--green-500);
|
||||
|
||||
/* Contextual usage */
|
||||
--button-bg: var(--color-primary);
|
||||
--error-text: var(--color-danger);
|
||||
}
|
||||
|
||||
/* Easily theme by changing primitives */
|
||||
[data-theme="orange"] {
|
||||
--blue-500: hsl(30, 70%, 50%); /* Override to orange */
|
||||
}
|
||||
```
|
||||
|
||||
### Color Accessibility
|
||||
|
||||
**WCAG Contrast Requirements:**
|
||||
- **AA** (minimum): 4.5:1 for normal text, 3:1 for large text
|
||||
- **AAA** (enhanced): 7:1 for normal text, 4.5:1 for large text
|
||||
|
||||
**Testing contrast:**
|
||||
```css
|
||||
/* Bad: Insufficient contrast */
|
||||
.low-contrast {
|
||||
color: #999; /* Gray */
|
||||
background: #fff; /* White */
|
||||
/* Ratio: ~2.8:1 - FAILS AA */
|
||||
}
|
||||
|
||||
/* Good: Meets AA */
|
||||
.good-contrast {
|
||||
color: #666; /* Darker gray */
|
||||
background: #fff; /* White */
|
||||
/* Ratio: ~5.7:1 - PASSES AA */
|
||||
}
|
||||
|
||||
/* Better: Meets AAA */
|
||||
.best-contrast {
|
||||
color: #333; /* Even darker */
|
||||
background: #fff; /* White */
|
||||
/* Ratio: ~12.6:1 - PASSES AAA */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Motion Design Principles
|
||||
|
||||
### Easing Functions
|
||||
|
||||
**Never use linear easing** - it feels robotic and unnatural.
|
||||
|
||||
**Standard easings:**
|
||||
```css
|
||||
/* Ease-out: Fast start, slow end (entering elements) */
|
||||
.enter {
|
||||
animation: slideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Ease-in: Slow start, fast end (exiting elements) */
|
||||
.exit {
|
||||
animation: slideOut 0.2s cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
/* Ease-in-out: Smooth both ends (position changes) */
|
||||
.move {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Spring/bounce: Playful, energetic */
|
||||
.bounce {
|
||||
animation: bounce 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
}
|
||||
```
|
||||
|
||||
**Custom easings for character:**
|
||||
```css
|
||||
:root {
|
||||
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
--ease-snap: cubic-bezier(0.87, 0, 0.13, 1);
|
||||
}
|
||||
```
|
||||
|
||||
### Orchestrated Animations
|
||||
|
||||
**Staggered delays create rhythm:**
|
||||
```css
|
||||
.card-grid > .card {
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.5s var(--ease-smooth) forwards;
|
||||
}
|
||||
|
||||
.card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.card:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Or programmatic delays:**
|
||||
```jsx
|
||||
{items.map((item, index) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
style={{
|
||||
animationDelay: `${index * 0.1}s`
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
```
|
||||
|
||||
### Performance-First Animation
|
||||
|
||||
**Use transform and opacity only** - these are GPU-accelerated.
|
||||
|
||||
```css
|
||||
/* ❌ BAD: Causes repaints */
|
||||
.slow {
|
||||
transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
|
||||
}
|
||||
|
||||
/* ✅ GOOD: GPU-accelerated */
|
||||
.fast {
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
```
|
||||
|
||||
**Will-change hint:**
|
||||
```css
|
||||
.animated-element {
|
||||
/* Tell browser this will animate */
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Remove after animation completes */
|
||||
.animated-element.animation-done {
|
||||
will-change: auto;
|
||||
}
|
||||
```
|
||||
|
||||
### Scroll-Triggered Animations
|
||||
|
||||
**Intersection Observer pattern:**
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
document.querySelectorAll('.reveal-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
```
|
||||
|
||||
```css
|
||||
.reveal-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.6s var(--ease-smooth),
|
||||
transform 0.6s var(--ease-smooth);
|
||||
}
|
||||
|
||||
.reveal-on-scroll.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Spatial Composition Techniques
|
||||
|
||||
### Grid Breaking
|
||||
|
||||
**Start with a grid, then selectively break it:**
|
||||
|
||||
```css
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Standard grid items */
|
||||
.grid-item {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
/* Break the grid for emphasis */
|
||||
.featured-item {
|
||||
grid-column: 1 / -1; /* Full width */
|
||||
grid-row: span 2; /* Double height */
|
||||
}
|
||||
|
||||
.offset-item {
|
||||
grid-column: 3 / 11; /* Offset from edges */
|
||||
}
|
||||
```
|
||||
|
||||
### Asymmetric Layouts
|
||||
|
||||
**Visual tension creates interest:**
|
||||
|
||||
```css
|
||||
/* Asymmetric two-column */
|
||||
.asymmetric-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr; /* 66% / 33% split */
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
/* Diagonal composition */
|
||||
.diagonal-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
transform: rotate(-2deg); /* Subtle tilt */
|
||||
}
|
||||
|
||||
.diagonal-section > * {
|
||||
transform: rotate(2deg); /* Counter-rotate content */
|
||||
}
|
||||
```
|
||||
|
||||
### Z-Index Layering
|
||||
|
||||
**Create depth through layering:**
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Z-index scale */
|
||||
--z-base: 0;
|
||||
--z-elevated: 10;
|
||||
--z-sticky: 100;
|
||||
--z-overlay: 1000;
|
||||
--z-modal: 10000;
|
||||
}
|
||||
|
||||
.layered-composition {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.background-shape {
|
||||
position: absolute;
|
||||
z-index: var(--z-base);
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: var(--z-elevated);
|
||||
}
|
||||
|
||||
.floating-element {
|
||||
position: absolute;
|
||||
z-index: calc(var(--z-elevated) + 1);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Visual Depth & Atmosphere
|
||||
|
||||
### Shadow System
|
||||
|
||||
**Layered shadows for realism:**
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Elevation system */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1),
|
||||
0 10px 10px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* Colored shadows for vibrancy */
|
||||
.vibrant-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
```
|
||||
|
||||
### Gradient Meshes
|
||||
|
||||
**Complex, organic color transitions:**
|
||||
|
||||
```css
|
||||
.gradient-mesh {
|
||||
background:
|
||||
radial-gradient(at 20% 30%, hsl(220, 70%, 60%) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 20%, hsl(280, 70%, 60%) 0px, transparent 50%),
|
||||
radial-gradient(at 40% 80%, hsl(180, 70%, 50%) 0px, transparent 50%),
|
||||
radial-gradient(at 90% 70%, hsl(30, 80%, 60%) 0px, transparent 50%),
|
||||
hsl(240, 20%, 10%);
|
||||
}
|
||||
```
|
||||
|
||||
### Texture & Grain
|
||||
|
||||
**Subtle texture adds tactility:**
|
||||
|
||||
```css
|
||||
.noise-texture {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.noise-texture::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E");
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
}
|
||||
```
|
||||
|
||||
### Glass Morphism
|
||||
|
||||
**Frosted glass effect:**
|
||||
|
||||
```css
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Dark mode variation */
|
||||
[data-theme="dark"] .glass {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Responsive Design Patterns
|
||||
|
||||
### Container Queries
|
||||
|
||||
**Component-based responsive design:**
|
||||
|
||||
```css
|
||||
.card-container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Respond to container width, not viewport */
|
||||
@container (min-width: 400px) {
|
||||
.card {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Fluid Typography
|
||||
|
||||
**Smooth scaling between viewports:**
|
||||
|
||||
```css
|
||||
:root {
|
||||
--fluid-min-width: 320;
|
||||
--fluid-max-width: 1200;
|
||||
|
||||
--fluid-screen: 100vw;
|
||||
--fluid-bp: calc(
|
||||
(var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
|
||||
(var(--fluid-max-width) - var(--fluid-min-width))
|
||||
);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, calc(2rem + 2 * var(--fluid-bp)), 4rem);
|
||||
}
|
||||
|
||||
/* Or use modern clamp directly */
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 4rem);
|
||||
/* Min: 2rem, Preferred: 5vw, Max: 4rem */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility & Inclusive Design
|
||||
|
||||
### Focus Management
|
||||
|
||||
**Visible, clear focus indicators:**
|
||||
|
||||
```css
|
||||
/* Remove default outline, add custom */
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* High contrast for keyboard users */
|
||||
.button:focus-visible {
|
||||
outline: 3px solid var(--color-primary);
|
||||
outline-offset: 4px;
|
||||
box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.2);
|
||||
}
|
||||
```
|
||||
|
||||
### Screen Reader Considerations
|
||||
|
||||
**Visually hidden but accessible:**
|
||||
|
||||
```css
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
<button>
|
||||
<Icon />
|
||||
<span className="sr-only">Open menu</span>
|
||||
</button>
|
||||
```
|
||||
|
||||
### Reduced Motion
|
||||
|
||||
**Respect user preferences:**
|
||||
|
||||
```css
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### Critical CSS
|
||||
|
||||
**Inline critical CSS, defer rest:**
|
||||
|
||||
```html
|
||||
<head>
|
||||
<!-- Critical CSS inline -->
|
||||
<style>
|
||||
/* Above-the-fold styles */
|
||||
body { margin: 0; font-family: system-ui; }
|
||||
.header { /* ... */ }
|
||||
</style>
|
||||
|
||||
<!-- Defer non-critical CSS -->
|
||||
<link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
||||
<noscript><link rel="stylesheet" href="/styles/main.css"></noscript>
|
||||
</head>
|
||||
```
|
||||
|
||||
### Image Optimization
|
||||
|
||||
**Modern formats with fallbacks:**
|
||||
|
||||
```jsx
|
||||
<picture>
|
||||
<source srcSet="/image.avif" type="image/avif" />
|
||||
<source srcSet="/image.webp" type="image/webp" />
|
||||
<img src="/image.jpg" alt="Description" loading="lazy" />
|
||||
</picture>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design System Patterns
|
||||
|
||||
### Token Architecture
|
||||
|
||||
**Layered token system:**
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Layer 1: Primitive tokens */
|
||||
--color-blue-500: hsl(220, 70%, 50%);
|
||||
--color-red-500: hsl(0, 70%, 50%);
|
||||
--spacing-4: 1rem;
|
||||
|
||||
/* Layer 2: Semantic tokens */
|
||||
--color-primary: var(--color-blue-500);
|
||||
--color-danger: var(--color-red-500);
|
||||
--button-padding: var(--spacing-4);
|
||||
|
||||
/* Layer 3: Component tokens */
|
||||
--button-bg: var(--color-primary);
|
||||
--button-text: white;
|
||||
--button-padding-x: var(--button-padding);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**This reference provides deep-dive guidance. For workflows, see:**
|
||||
- [SKILL.md](SKILL.md) - Scenario router
|
||||
- [EXISTING-CODEBASE-CHECKLIST.md](EXISTING-CODEBASE-CHECKLIST.md) - Consistency workflow
|
||||
- [NEW-PROJECT-DESIGN.md](NEW-PROJECT-DESIGN.md) - Aesthetic philosophy
|
||||
- [EXAMPLES.md](EXAMPLES.md) - Real-world case studies
|
||||
60
skills/frontend-development/SKILL.md
Normal file
60
skills/frontend-development/SKILL.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
name: frontend-design
|
||||
description: Create distinctive, production-grade frontend interfaces with exceptional design quality. Two modes - (1) New projects - bold aesthetic design philosophy including typography, color theory, spatial composition, motion design, visual details, avoiding generic AI aesthetics, creating unforgettable interfaces. (2) Existing codebases - mandatory design language analysis enforcing consistency by scanning layout patterns, typography hierarchy, component structure, spacing, theme systems before implementation. Use when building components, pages, applications, design systems, UI modifications. Covers React, Vue, Next.js, HTML/CSS, Tailwind. Keywords - create component, build page, design interface, add UI, aesthetic design, visual design, typography, animations, spatial layout, design system, consistency, pattern analysis, existing codebase.
|
||||
---
|
||||
|
||||
# Frontend Design Skill
|
||||
|
||||
This skill provides two distinct workflows for creating production-grade frontend interfaces:
|
||||
|
||||
## Scenario Detector
|
||||
|
||||
**Answer this question:** Is there an existing codebase with components, pages, or a design system?
|
||||
|
||||
### ✅ YES → Existing Codebase (Most Common)
|
||||
**Use this workflow:** [EXISTING-CODEBASE-CHECKLIST.md](EXISTING-CODEBASE-CHECKLIST.md)
|
||||
|
||||
**Purpose:** Enforce design language consistency by analyzing existing patterns before implementation.
|
||||
|
||||
**When to use:**
|
||||
- Adding components to existing project
|
||||
- Creating new pages in existing app
|
||||
- Modifying UI in established codebase
|
||||
- Working with design system
|
||||
|
||||
**Process:** Mandatory 3-phase checklist (Design Analysis → Decisions → Implementation)
|
||||
|
||||
---
|
||||
|
||||
### ✅ NO → New Project (Greenfield)
|
||||
**Use this workflow:** [NEW-PROJECT-DESIGN.md](NEW-PROJECT-DESIGN.md)
|
||||
|
||||
**Purpose:** Create bold, distinctive aesthetic design from scratch.
|
||||
|
||||
**When to use:**
|
||||
- Starting new projects
|
||||
- Building standalone components/pages
|
||||
- No existing design system to match
|
||||
- Full creative freedom
|
||||
|
||||
**Process:** Design thinking → Aesthetic principles → Implementation
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference
|
||||
|
||||
**For consistency in existing codebases:**
|
||||
→ [EXISTING-CODEBASE-CHECKLIST.md](EXISTING-CODEBASE-CHECKLIST.md)
|
||||
|
||||
**For aesthetic design philosophy:**
|
||||
→ [NEW-PROJECT-DESIGN.md](NEW-PROJECT-DESIGN.md)
|
||||
|
||||
**For real-world examples:**
|
||||
→ [EXAMPLES.md](EXAMPLES.md)
|
||||
|
||||
**For deep-dive principles:**
|
||||
→ [REFERENCE.md](REFERENCE.md)
|
||||
|
||||
---
|
||||
|
||||
**Still unsure which scenario applies?** Default to **EXISTING-CODEBASE-CHECKLIST** if there's any existing code to reference.
|
||||
Reference in New Issue
Block a user