Frontend Design Skill

This skill guides the creation of beautiful, distinctive, and production-ready frontend interfaces.

Core Principles

1. Design Thinking First

Before writing code, commit to a bold aesthetic direction:

• Understand the purpose and audience
• Select a distinct tone (minimal, maximalist, retro-futuristic, brutalist, etc.)
• Identify what makes this design unforgettable

Critical Guideline: "Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity."

2. Typography Excellence

• DO: Choose fonts that are beautiful, unique, and interesting
• AVOID: Generic fonts like Arial, Inter, Roboto, Helvetica (unless intentionally brutal)
• USE: Google Fonts with character, web-safe combinations, custom font pairings
• Consider font weight variations, letter spacing, and hierarchy

3. Color & Theme Mastery

• Create cohesive palettes with dominant colors and sharp accents
• Avoid clichéd schemes (especially purple gradients on white backgrounds)
• Use color psychology intentionally
• Consider dark mode from the start

4. Motion & Animation

• CSS animations with high-impact moments
• Scroll-triggered effects for engagement
• Micro-interactions that delight
• Performance-conscious implementation

5. Spatial Composition

• Unexpected layouts with asymmetry
• Strategic negative space
• Grid systems that break conventions thoughtfully
• Responsive design that adapts intelligently

6. Visual Details

• Atmosphere-building through gradients and textures
• Decorative elements with purpose
• Glassmorphism, neumorphism, or other modern effects (when appropriate)
• Attention to shadows, borders, and depth

What to Avoid (AI Slop)

Generic Patterns to Eliminate:

• ❌ Default fonts: Inter, Roboto, Arial, system fonts
• ❌ Purple gradients over white backgrounds
• ❌ Predictable card layouts without character
• ❌ Minimal animations or no animations
• ❌ Cookie-cutter patterns lacking context-specific character
• ❌ Copy-paste component libraries without customization

Implementation Guidelines

Match code complexity to aesthetic vision:

• Maximalist designs: Require elaborate animations, rich interactions
• Minimalist designs: Demand precision in spacing, typography, and restraint

Technology Stack:

• Pure HTML/CSS/JS for lightweight projects
• React + Tailwind CSS for rapid development
• shadcn/ui components (customized, not default)
• GSAP for advanced animations
• Framer Motion for React animations

Design Checklist

Before considering a design complete, verify:

✅ Typography: Custom fonts loaded, hierarchy clear, readability excellent ✅ Color: Cohesive palette, intentional contrasts, accessibility (WCAG AA) ✅ Layout: Responsive, interesting composition, appropriate white space ✅ Motion: Meaningful animations, no jank, respects prefers-reduced-motion ✅ Details: Polish on hover states, focus states, loading states ✅ Performance: Fast initial load, optimized assets, no layout shift ✅ Accessibility: Semantic HTML, ARIA labels, keyboard navigation

Examples of Great Design

Minimal & Refined:

• Clean typography hierarchies
• Generous white space
• Subtle micro-interactions
• Monochromatic or limited palettes

Maximal & Bold:

• Vibrant color explosions
• Complex layered animations
• Rich textures and patterns
• Distinctive custom illustrations

Brutalist & Raw:

• Intentionally harsh type
• Unconventional layouts
• High contrast
• Technical aesthetic

Working with This Skill

When creating interfaces:

1. Ask about the vision: What feeling should this evoke?
2. Propose a direction: Suggest 2-3 distinct aesthetic approaches
3. Execute with precision: Every detail should support the vision
4. Iterate based on feedback: Refine towards the intended aesthetic

Remember: Distinctive > Generic, Intentional > Default, Memorable > Safe