frontend-dev

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

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:

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

Implementation

Match implementation complexity to the aesthetic vision:

Commit fully to the chosen direction.

Source Transparency