Frontend Design Skill | Agent Skills

Frontend Design

"Every design should feel specifically crafted for its context, never cookie-cutter."

Overview

This skill enables creation of distinctive, production-grade frontend interfaces that avoid the generic AI-generated aesthetic that has become ubiquitous. The goal is intentional design that reflects the specific context, brand, and purpose of the interface.

When to Invoke

Building UI components, dashboards, or page layouts
User requests "make this look good" or "design a UI"
React, HTML, CSS, or Tailwind styling work
Any request where visual quality and distinctiveness matter

The Anti-AI-Slop Principle

Generic AI-generated interfaces share predictable patterns that signal laziness:

Overused patterns to AVOID:

Centered hero layout with heading + subtext + CTA button
Inter, Arial, Roboto, or system-ui as primary font
Purple-to-blue gradient as accent color
Uniform 8px or 12px border-radius everywhere
Card grids with identical padding and shadow
Soft pastel color palette with low contrast
Animated gradient text as a "premium" signal
Generic icons (plus, arrow, chevron) for decorative purposes

What to do instead:

Choose an aesthetic direction and commit to it fully
Make typography do real work — size contrast, weight variation, spacing rhythm
Use color that creates tension or warmth, not just fills space
Let layout breathe asymmetrically — not everything needs to be centered

Aesthetic Directions

Brutalist Minimal

/* High contrast, raw, confident */
:root {
  --bg: #ffffff;
  --text: #000000;
  --accent: #ff0000;
  --border: 2px solid #000000;
  --radius: 0px;
}

.card {
  border: var(--border);
  padding: 2rem;
  background: var(--bg);
}

Typography: Bold grotesques (Neue Haas Grotesk, Aktiv Grotesk, GT America) Motion: Sharp, instant transitions — no easing Layout: Rigid grid, full bleed, stark whitespace

Maximalist Editorial

/* Rich, layered, expressive */
:root {
  --bg: #0a0a0f;
  --text: #e8e3d9;
  --accent: #c9a84c;
  --accent-2: #7b5ea7;
}

.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 50%, #1a0a2e, transparent);
}

Typography: Serif headlines (Playfair Display, Canela, GT Sectra) + tight monospace for data Motion: Cinematic reveals, staggered content entry, parallax depth Layout: Overlapping elements, diagonal breaks, generous negative space

Warm Artisan

/* Organic, crafted, human */
:root {
  --bg: #faf8f4;
  --text: #2c2416;
  --accent: #c17b4a;
  --accent-muted: #e8d5c0;
}

.surface {
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

Typography: Humanist serifs (Lora, Freight Text) + friendly sans (Sora, Plus Jakarta Sans) Motion: Gentle, spring-based animations Layout: Asymmetric columns, hand-crafted feel

High-Tech Data

/* Dense, precise, functional */
:root {
  --bg: #0d1117;
  --text: #c9d1d9;
  --accent: #58a6ff;
  --grid: rgba(255, 255, 255, 0.04);
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

.data-panel {
  background: rgba(13, 17, 23, 0.95);
  border: 1px solid rgba(48, 54, 61, 0.8);
  font-family: var(--mono);
}

Typography: Monospace throughout, tight line height, numerical data in tabular figures Motion: Real-time updates, pulsing activity indicators Layout: Dense grids, information hierarchy via size/weight/color

Typography System

Font Selection Principles

Don't reach for Inter, Arial, or system-ui. Choose fonts that carry meaning:

| Intention | Good Choices | Avoid | | --------------------- | ------------------------------- | ----------------- | | Premium / Editorial | Canela, GT Sectra, Freight Text | Georgia | | Technical / Precise | JetBrains Mono, IBM Plex Mono | Courier | | Modern / Professional | GT America, Neue Haas Grotesk | Inter, Helvetica | | Warm / Approachable | Sora, Plus Jakarta Sans, Nunito | Roboto, Open Sans | | Bold / Display | Clash Display, Cabinet Grotesk | Futura |

Type Scale

Use a clear hierarchy:

/* Display: hero headlines */
.text-display {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
}

/* Heading: section titles */
.text-h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
}

/* Body: readable text */
.text-body {
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* Caption: secondary info */
.text-caption {
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

Color System

Commit to a palette

:root {
  /* Dominant: 60% of UI */
  --color-base: #f7f4ef;
  --color-surface: #ffffff;

  /* Secondary: 30% of UI */
  --color-text: #1a1510;
  --color-text-muted: #6b5e4e;

  /* Accent: 10% of UI */
  --color-accent: #c17b4a; /* primary actions */
  --color-accent-sharp: #e05a2b; /* hover/active states */
}

The 60/30/10 rule prevents overwhelming accent usage.

Motion Design

Page Load Sequence

High-impact reveals on page load (not scattered micro-interactions):

/* Staggered content entry */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-heading {
  animation: slideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-sub {
  animation: slideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.hero-cta {
  animation: slideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

Purposeful Transitions

/* State transitions: fast and responsive */
.button {
  transition:
    background-color 150ms ease,
    transform 100ms ease;
}
.button:hover {
  transform: translateY(-1px);
}
.button:active {
  transform: translateY(0);
}

/* Panel reveals: deliberate */
.modal {
  transition:
    opacity 250ms ease,
    transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

Using Animation Libraries

For complex sequences:

Framer Motion (React) — spring physics, layout animations, shared element transitions
GSAP — timeline-based, scroll-triggered, high-performance
CSS @starting-style — native enter/exit animations (modern browsers)

Layout Principles

Break the Grid

Don't constrain everything to a uniform container:

/* Full-bleed accent with contained content */
.section-dark {
  background: #0d1117;
  /* No max-width here */
}

.section-dark .content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

Generous Negative Space

/* Let elements breathe */
.hero {
  padding: 12rem 0 8rem;
}
.section {
  padding: 8rem 0;
}
.card {
  padding: 2.5rem;
}

Intentional Asymmetry

/* 60/40 split instead of 50/50 */
.two-column {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 4rem;
}

Component Quality Checklist

Before declaring a component done:

[ ] Typography uses system-distinct font (not Inter/Arial/system-ui)
[ ] Colors are intentional, not default Tailwind palette
[ ] Hover/focus states are designed (not just opacity change)
[ ] Motion exists and is purposeful (not zero or scattered everywhere)
[ ] Spacing creates visual rhythm (not uniform padding everywhere)
[ ] The design would look at home in a portfolio, not a boilerplate

Memory Protocol

Before designing interfaces:

cat .claude/context/memory/learnings.md | grep -i "design\|ui\|frontend\|css"

After completing design work, record patterns:

Effective typography combinations → .claude/context/memory/learnings.md
Color system decisions → .claude/context/memory/decisions.md

Related Skills

web-artifacts-builder — Build React + Tailwind + shadcn/ui artifacts
react-expert — React component patterns
styling-expert — Tailwind CSS, CSS-in-JS patterns
shadcn-ui — shadcn/ui component customization
enhance-prompt — Transform vague UI requests into design specs

Agent Skills: Frontend Design

Install this agent skill to your local

Skill Files