Frontend Development

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.

For technical constraints (animation, typography, accessibility), see ui-rules skill.

When This Skill Activates

• Building web components or pages
• Creating dashboards or applications
• Styling or beautifying web UI
• React, Vue, HTML/CSS development
• Landing pages or marketing sites

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick a direction: brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
• Constraints: Technical requirements (framework, performance, accessibility)
• Differentiation: What makes this memorable?

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality.

Creative Philosophy

Typography

Choose fonts that fit the aesthetic. Pair display fonts with body fonts thoughtfully. Consider the project's existing typography system first.

Color & Theme

Commit to a cohesive aesthetic. Use CSS variables for consistency. Strong primary colors with intentional accents create memorable interfaces.

Motion

Use animation purposefully - for feedback, transitions, and delight. Focus on high-impact moments over scattered micro-interactions.

Spatial Composition

Consider unexpected layouts, asymmetry, overlap, grid-breaking elements. Balance negative space with density based on the design direction.

Visual Texture

Create atmosphere through background treatment, shadows, borders, and layering. Avoid flat, sterile defaults.

Anti-Patterns

NEVER create generic AI-generated aesthetics:

• Predictable layouts without character
• Cookie-cutter components that could be from any project
• Designs that converge on the same "safe" choices

Interpret creatively. Make unexpected choices. No two interfaces should look the same.

Implementation

Match implementation complexity to the aesthetic vision:

• Maximalist designs need elaborate detail
• Minimalist designs need restraint and precision

Commit fully to the chosen direction.