frontend

name	frontend
description	Activate when a user requests a polished, high-quality web interface — landing pages, SaaS dashboards, product pages, portfolios, or any frontend requiring strong visual craft and attention to detail.
version	1
category	frontend-code
outputs	code

Frontend

Purpose

This skill generates production-oriented web interfaces with strong visual quality. It corrects for statistical biases in AI-generated frontend code that produce repetitive layouts, generic typography, and poor interaction states. The output should feel deliberately crafted: varied composition, calibrated motion, structured component hierarchy, and accessible interactions.

When to Activate

• User requests a landing page, marketing site, SaaS dashboard, or product UI
• User asks for a "premium," "high-end," or "polished" frontend
• User wants a React, Next.js, or Tailwind component with strong design quality
• User has not specified an aesthetic (default skill for general frontend tasks)

When Not to Activate

• User wants industrial brutalist interface (use brutalist)
• User wants editorial minimalism specifically (use minimal)
• User wants GSAP scrolltelling or motion as the primary feature (use motion)
• User needs to redesign an existing project (use redesign)
• The task is purely technical (data migration, API integration, non-visual logic)

Core Principles

1. Typography is a layout tool. Use size contrast, weight variation, and tracking to create visual hierarchy — not colored backgrounds or heavy borders. Display text at 3× or more the body text scale creates immediate reading order without relying on containers.

2. One accent color. Choose one accent with saturation below 80%. Use it consistently for CTAs, active states, and key data points. Introduce no secondary accent unless a formal design system requires it.

3. No full-symmetry layouts by default. At medium variance (6+), break symmetry with: offset margins, mixed aspect ratios, left-aligned headings over centered content, or asymmetric grid framing. Symmetric layouts require explicit justification.

4. Cards communicate elevation, not containment. Do not wrap every content block in a bordered card. Use cards only when visual depth (z-axis) communicates hierarchy. At high density (8+), replace cards with border-top dividers or negative space.

5. All interactive elements have four states. Default, hover, focus, and active. Loading, empty, and error states are mandatory for any component connected to data or user input. Skeletal loaders match the layout shape of the content they represent.

6. Accessible by default. Body text minimum 4.5:1 contrast ratio against its background. All interactive elements have visible focus indicators (focus-visible styles — never remove outline without replacing it). Touch targets minimum 44×44px. Use semantic HTML (<nav>, <main>, <article>, <section>, <button>). Never use <div> for interactive roles without ARIA.

7. GPU-safe animation. Animate only transform and opacity. Never animate top, left, width, or height. Apply backdrop-filter: blur only to fixed or sticky elements — never to scrolling containers. Use IntersectionObserver for scroll-triggered animations; never window.addEventListener('scroll').

8. Mobile layout must be explicitly handled. Full-height sections use min-h-[100dvh] (never h-screen). Asymmetric layouts at VARIANCE > 4 collapse to single-column below 768px with . Fluid typography uses . Maximum container width set (1280–1440px).

Configuration

Parameter	Scale	Default	Effect
VARIANCE	1–10	8	1: symmetric grids; 8: asymmetric offset layouts; 10: masonry, overlapping layers
MOTION	1–10	6	1: CSS hover/active only; 6: scroll-entry + spring hover; 10: full GSAP/Framer choreography
DENSITY	1–10	4	1: gallery spacing, massive whitespace; 4: standard web rhythm; 8+: cockpit density, cards replaced by dividers

Override via natural language: "minimal motion" → MOTION 2; "dense dashboard" → DENSITY 8; "symmetric layout" → VARIANCE 2.

Workflow

1. Establish the design direction. Before writing code, select: theme (light / dark / solid color / quiet neutral), typography character (geometric sans / refined grotesk / editorial serif+sans), and hero architecture (centered / asymmetric / image-first / typographic statement). Commit to these choices.

2. Set up the component architecture. Declare the framework, Tailwind version, state approach (local vs global), and which components require "use client". Verify all dependencies against package.json.

3. Build the macro structure. Establish maximum container width (max-w-[1400px] mx-auto), section spacing (minimum py-24 for major sections), and breakpoint strategy. Apply fluid typography with clamp() for display headings.

4. Implement components. Build each component's default state completely before adding interaction states. Add hover, focus, and active states to all interactive elements. Implement loading, empty, and error states for all data-connected components.

5. Apply animation (if MOTION > 3). Scroll-entry: translateY(16px) opacity: 0 → resolved over 600ms, IntersectionObserver. Spring-physics hover: cubic-bezier(0.34, 1.56, 0.64, 1) or equivalent spring easing. If MOTION > 7, use framer-motion or GSAP isolated in Client Components with cleanup.

6. Verify quality. Run Quality Gates before delivering.

Forbidden Patterns

Fonts: Inter, Roboto, Arial, Open Sans as headline fonts in creative or premium contexts

Colors: Pure #000000 black · more than one accent color · oversaturated accents (above 80% saturation) · purple-blue gradient as the primary design identity

Layout: Three equal-width card columns as a feature section · centered hero at VARIANCE > 4 · h-screen for full-height sections · flexbox percentage math when CSS Grid solves it · no max-width container

Components: Circular loading spinners · window.alert() for errors · dead href="#" links · missing focus rings (outline: none without replacement) · empty states that show nothing

Copy: "Elevate" · "Seamless" · "Unleash" · "Next-Gen" · "Game-changer" · "In the world of" · placeholder names "John Doe" / "Acme Corp" / "Nexus" / "NovaCore" · fake round numbers "99.99%" / "$100.00"

Animation: Animating top, left, width, height · window.addEventListener('scroll') for entry animations · backdrop-filter: blur on scrolling containers · arbitrary z-index: 9999

Icons: Generic thick-stroked Lucide defaults without explicitly setting strokeWidth and verifying the import path exists in package.json

Component Arsenal (reference for high-quality components)

When building feature sections or dashboards, pull from these patterns rather than defaulting to 3-card rows:

• Asymmetric bento grid: CSS Grid with col-span and row-span variation — large visual block + two stacked smaller info panels
• Nested container architecture: Outer wrapper with hairline border + padding 6–8px, inner core with its own background and inner highlight shadow
• Staggered card cascade: Cards positioned with slight Z-axis depth variation and fractional rotation (±2°) for physical tactile feel
• Editorial split: Typography on one half, scrollable image or UI crops on the other — not equal 50/50 splits
• Vertical rhythm strip: Fine rules and spacing systems reinforcing order and elegance without decoration
• Product UI panel stack: Layered interface crops implying a product story — not fake dashboards with random charts
• Infinite marquee strip: Brand or proof logos in continuous horizontal scroll — keep logos at readable scale, not mosquito-sized

Quality Gates

• Design direction established (theme, typography, hero architecture) before coding
• No banned fonts, colors, layouts, or animation patterns present
• All interactive elements have 4 states (default, hover, focus, active)
• Loading, empty, and error states implemented for data-connected components
• Body text meets 4.5:1 contrast ratio against its background
• Focus indicators are visible and not removed without replacement
• Touch targets are minimum 44×44px
• Full-height sections use min-h-[100dvh] not h-screen
• All animations use only transform and opacity
• VARIANCE > 4: asymmetric layout collapses to single-column below 768px
• All third-party imports verified against package.json
• No placeholder content (lorem ipsum, generic names, fake round numbers)
• Semantic HTML throughout

Failure Modes

"Generic SaaS shell": Output has correct code but looks like a starter template. Detection: symmetric 3-column features, centered hero, Inter font, purple gradient. Fix: apply forbidden patterns check; force a specific design direction choice in step 1.

"Static interface": No hover, focus, or active states. Detection: search for :hover, focus-visible, :active — if absent, add them. Rule: no interactive element should be stateless.

"Missing states": Components show the happy path but have no loading, empty, or error states. Fix: add skeleton loaders and error message components before delivering.

"Animation on wrong properties": Scroll-entry animations use top or height transitions. Detection: search for transition-top or transition-height. Fix: replace with transform: translateY() + opacity.

"RSC/client boundary violation": Global state or useEffect in a Server Component causes a runtime error. Detection: look for useState or useEffect without "use client" at the top of the file. Fix: extract to an isolated Client Component.

Response Format

Deliver complete, runnable code. Apply complete behavior — no truncation. If the design direction is non-obvious, prepend a short note (3–5 bullet points: theme, type choice, layout archetype, motion level). No post-delivery commentary.