Frontend Design

A frontend design skill for AI agents. Every UI you touch should feel hot, sleek, sexy, usable, fun, and addictive.

Core Philosophy

Design is not decoration. It's communication. Every pixel exists to serve the user's intent while making them feel something. The best interfaces are invisible — they get out of the way while being impossibly beautiful.

Principles:

• Clarity over cleverness — if it needs a tooltip, redesign it
• Motion with meaning — every animation tells a story
• Contrast is king — visual hierarchy through bold contrast, not clutter
• White space is not empty — it's breathing room
• Dark mode first — because we live in the future

Design Patterns

Cards

Cards are the atomic unit of modern UI. Rules:

• Subtle border, generous padding (1.25rem+)
• Hover state: slight lift (translateY -2px) + border glow
• Never more than 3 levels of text hierarchy per card
• Background should be 1-2 shades lighter than page bg

Buttons

• Primary: solid fill, bold, slight shadow
• Secondary: outlined, transparent bg
• Ghost: no border, text only, underline on hover
• Always include hover + active + focus states
• Min touch target: 44px

Forms

• Labels above inputs, never floating
• Generous input padding (0.875rem)
• Focus ring = accent color border, not browser default
• Error states: pink/red border + helper text below
• Success: green accent, brief animation

Layout Principles

Spacing Scale

Use a consistent spacing scale based on 0.25rem increments:

• xs: 0.25rem (4px)
• sm: 0.5rem (8px)
• md: 1rem (16px)
• lg: 1.5rem (24px)
• xl: 2rem (32px)
• 2xl: 3rem (48px)
• 3xl: 4rem (64px)

Grid

• Max content width: 1200px
• Side padding: 2rem (1rem mobile)
• Column gap: 1.5-2rem
• Mobile: single column, always

Typography

• Display: bold, tight letter-spacing (-0.02em)
• Body: 1rem, line-height 1.6
• Small: 0.875rem for metadata
• Handwriting fonts for personality moments
• Monospace for code, versions, hashes