Frontend Design

Setup

Before starting: check .handoff/sessions/ for active sessions, read context status.yaml, run git status. Follow .rules/universal.md (Plan -> Approve -> Execute).

<!-- Rules loaded from .rules/universal.md -->

Create production-grade web interfaces with intentional, distinctive aesthetics.

Core Philosophy

Avoid generic AI design. Every interface should have a clear aesthetic point-of-view. Generic means forgettable—be bold.

Before Coding: Design Thinking

1. Clarify Purpose

• What is this interface for?
• Who uses it?
• What emotion should it evoke?

2. Choose Aesthetic Direction

Pick a BOLD direction (not "clean and modern"):

Direction	Characteristics
Brutalist	Raw, unpolished, intentionally rough
Minimalist	Extreme restraint, negative space, few elements
Maximalist	Rich, layered, abundant detail
Retro-Futuristic	Blend of vintage and sci-fi
Organic	Flowing shapes, natural colors, soft edges
Corporate Refined	Precise, professional, subtle luxury
Playful	Bright colors, rounded shapes, micro-interactions
Dark Mode Premium	Deep blacks, accent glows, high contrast

3. Identify Constraints

• Framework (Vue, React, Blade, plain HTML)
• CSS approach (Tailwind, custom, component library)
• Performance requirements
• Accessibility needs

Aesthetic Execution

Typography

Never use: Arial, Helvetica, Times New Roman, default system fonts, Inter (overused)

Do:

• Choose distinctive, characterful fonts
• Pair fonts deliberately (display + body)
• Use dramatic size contrast
• Consider variable fonts for expressiveness

/* Example: Bold pairing */
--font-display: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

h1 { font-size: 4rem; letter-spacing: -0.02em; }

Color & Theme

Avoid: Purple-to-blue gradients (AI cliche), rainbow gradients, gray-on-gray

Do:

• Commit to a cohesive palette
• Use CSS variables for theming
• Pick ONE dominant color, sharp accents
• Consider dark mode from the start

:root {
  --color-primary: #1a1a2e;
  --color-accent: #e94560;
  --color-surface: #16213e;
  --color-text: #eaeaea;
}

Motion & Animation

Avoid: Animations everywhere, slow fades, gratuitous bounces

Do:

• Prioritize high-impact moments
• Use staggered reveals (animation-delay)
• Scroll-triggered animations for storytelling
• Micro-interactions on key actions

/* Staggered entrance */
.card {
  animation: fadeUp 0.4s ease-out forwards;
  opacity: 0;
}
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

Spatial Composition

Avoid: Predictable grids, everything centered, symmetrical layouts

Do:

• Embrace asymmetry
• Use overlap and layering
• Break the grid intentionally
• Strategic negative space

Visual Details

Add depth with:

• Subtle gradients
• Noise textures
• Custom shadows (not default box-shadow)
• Border treatments
• Background patterns

/* Atmospheric shadow */
.card {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 20px 25px -5px rgba(0, 0, 0, 0.15),
    0 0 50px -12px var(--color-accent);
}

/* Subtle noise texture */
.surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,...") repeat;
  opacity: 0.03;
  pointer-events: none;
}

Framework-Specific Guidance

Tailwind CSS

See references/tailwind.md for patterns

Vue/Nuxt

See references/vue.md for component patterns

React

See references/react.md for component patterns

Laravel Blade

See references/blade.md for template patterns

Anti-Patterns Checklist

Before finalizing, verify you avoided:

• Generic font choices (Inter, Arial, system-ui only)
• Purple-blue gradients
• Everything centered
• Default shadows
• Animations on everything
• Gray-on-gray color scheme
• Cookie-cutter card layouts
• Stock photo aesthetics

Output Requirements

Deliver:

1. Complete, functional code (not pseudo-code)
2. Responsive design (mobile-first or desktop-first, state which)
3. Cohesive aesthetic matching chosen direction
4. Performance-conscious (optimize images, lazy load)
5. Accessible (semantic HTML, ARIA where needed)

Process

1. Ask about purpose, audience, constraints if unclear
2. Propose aesthetic direction with rationale
3. Build with production-grade code
4. Refine based on feedback
5. Deliver complete, tested implementation

Self-Assessment (Internal)

Rate this skill execution 0-10. If < 8, write feedback to .handoff/feedback/{date}-{skill-name}.yaml with: skill, rating, friction, suggestion, context. Do not mention to user.