This skill guides creation of distinctive, production-grade frontend interfaces. It covers design philosophy, implementation constraints, accessibility, performance optimization, and UX best practices. Activate it for any frontend work: building components, pages, applications, reviewing UI code, or optimizing React/Next.js applications.

Part 1: Design Philosophy

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

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. Use these for inspiration but design one that is true to the aesthetic direction.
• Constraints: Technical requirements (framework, performance, accessibility).
• Differentiation: What makes this UNFORGETTABLE? What is the one thing someone will remember?

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

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

• Production-grade and functional
• Visually striking and memorable
• Cohesive with a clear aesthetic point-of-view
• Meticulously refined in every detail

Aesthetics

• Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive choices that elevate the interface. Pair a distinctive display font with a refined body font.
• Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
• Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
• Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
• Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.

NEVER use generic AI-generated aesthetics: overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.

Part 2: Implementation Constraints

Opinionated rules for consistent, high-quality UI code.

Stack

• MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested
• MUST use motion/react (formerly framer-motion) when JavaScript animation is required
• SHOULD use tw-animate-css for entrance and micro-animations in Tailwind CSS
• MUST use cn utility (clsx + tailwind-merge) for class logic

Components

• MUST use accessible component primitives for keyboard/focus behavior (Base UI, React Aria, Radix)
• MUST use the project's existing component primitives first
• NEVER mix primitive systems within the same interaction surface
• SHOULD prefer Base UI for new primitives if compatible with the stack
• NEVER rebuild keyboard or focus behavior by hand unless explicitly requested

Animation

• NEVER add animation unless it is explicitly requested
• MUST animate only compositor props (transform, opacity)
• NEVER animate layout properties (width, height, top, left, margin, padding)
• SHOULD avoid animating paint properties (background, color) except for small, local UI (text, icons)
• SHOULD use ease-out on entrance
• NEVER exceed 200ms for interaction feedback
• MUST pause looping animations when off-screen
• MUST respect prefers-reduced-motion (provide reduced variant or disable)
• NEVER introduce custom easing curves unless explicitly requested
• SHOULD avoid animating large images or full-screen surfaces
• NEVER animate large blur() or backdrop-filter surfaces
• NEVER transition: all -- list properties explicitly
• Set correct transform-origin
• SVG: transforms on <g> wrapper with transform-box: fill-box; transform-origin: center
• Animations interruptible -- respond to user input mid-animation
• NEVER apply will-change outside an active animation

Typography

• MUST use text-balance for headings and text-pretty for body/paragraphs
• MUST use tabular-nums for data columns and number comparisons
• SHOULD use truncate or line-clamp for dense UI
• NEVER modify letter-spacing (tracking-*) unless explicitly requested
• Use ... as … (ellipsis character, not three dots)
• Curly quotes " " not straight "
• Non-breaking spaces: 10 MB, brand names
• Loading states end with …: "Loading…", "Saving…"

Layout

• MUST use a fixed z-index scale (no arbitrary z-*)
• SHOULD use size-* for square elements instead of w-* + h-*
• NEVER use h-screen, use h-dvh
• Flex/grid over JS measurement for layout

Design Constraints

• NEVER use gradients unless explicitly requested
• NEVER use purple or multicolor gradients
• NEVER use glow effects as primary affordances
• SHOULD use Tailwind CSS default shadow scale unless explicitly requested
• MUST give empty states one clear next action
• SHOULD limit accent color usage to one per view
• SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones

Performance Guards

• NEVER use useEffect for anything that can be expressed as render logic
• Prefer uncontrolled inputs; controlled inputs must be cheap per keystroke
• No layout reads in render (getBoundingClientRect, offsetHeight, offsetWidth, scrollTop)
• Batch DOM reads/writes; avoid interleaving

Part 3: Accessibility & UX

Comprehensive rules for accessible, usable interfaces.

Accessibility

• Icon-only buttons need aria-label
• Form controls need <label> or aria-label
• Interactive elements need keyboard handlers (onKeyDown/onKeyUp)
• <button> for actions, <a>/<Link> for navigation (not <div onClick>)
• Images need alt (or alt="" if decorative)
• Decorative icons need aria-hidden="true"
• Async updates (toasts, validation) need aria-live="polite"
• Use semantic HTML (<button>, <a>, <label>, <table>) before ARIA
• Headings hierarchical <h1>-<h6>; include skip link for main content
• scroll-margin-top on heading anchors

Focus States

• Interactive elements need visible focus: focus-visible:ring-* or equivalent
• Never outline-none / outline: none without focus replacement
• Use :focus-visible over :focus (avoid focus ring on click)
• Group focus with :focus-within for compound controls

Forms

• Inputs need autocomplete and meaningful name
• Use correct type (email, tel, url, number) and inputmode
• Never block paste (onPaste + preventDefault)
• Labels clickable (htmlFor or wrapping control)
• Disable spellcheck on emails, codes, usernames (spellCheck={false})
• Checkboxes/radios: label + control share single hit target (no dead zones)
• Submit button stays enabled until request starts; spinner during request
• Errors inline next to fields; focus first error on submit
• Placeholders end with … and show example pattern
• autocomplete="off" on non-auth fields to avoid password manager triggers
• Warn before navigation with unsaved changes (beforeunload or router guard)
• MUST use an AlertDialog for destructive or irreversible actions

Content Handling

• Text containers handle long content: truncate, line-clamp-*, or break-words
• Flex children need min-w-0 to allow text truncation
• Handle empty states -- do not render broken UI for empty strings/arrays
• User-generated content: anticipate short, average, and very long inputs

Images

• <img> needs explicit width and height (prevents CLS)
• Below-fold images: loading="lazy"
• Above-fold critical images: priority or fetchpriority="high"

Navigation & State

• URL reflects state -- filters, tabs, pagination, expanded panels in query params
• Links use <a>/<Link> (Cmd/Ctrl+click, middle-click support)
• Deep-link all stateful UI (if uses useState, consider URL sync via nuqs or similar)
• Destructive actions need confirmation modal or undo window -- never immediate

Touch & Interaction

• touch-action: manipulation (prevents double-tap zoom delay)
• -webkit-tap-highlight-color set intentionally
• overscroll-behavior: contain in modals/drawers/sheets
• During drag: disable text selection, inert on dragged elements
• autoFocus sparingly -- desktop only, single primary input; avoid on mobile
• MUST respect safe-area-inset for fixed elements

Safe Areas & Layout

• Full-bleed layouts need env(safe-area-inset-*) for notches
• Avoid unwanted scrollbars: overflow-x-hidden on containers, fix content overflow

Dark Mode & Theming

• color-scheme: dark on <html> for dark themes (fixes scrollbar, inputs)
• <meta name="theme-color"> matches page background
• Native <select>: explicit background-color and color (Windows dark mode)

Locale & i18n

• Dates/times: use Intl.DateTimeFormat not hardcoded formats
• Numbers/currency: use Intl.NumberFormat not hardcoded formats
• Detect language via Accept-Language / navigator.languages, not IP

Hydration Safety

• Inputs with value need onChange (or use defaultValue for uncontrolled)
• Date/time rendering: guard against hydration mismatch (server vs client)
• suppressHydrationWarning only where truly needed
• Prevent hydration mismatch with inline scripts

Hover & Interactive States

• Buttons/links need hover: state (visual feedback)
• Interactive states increase contrast: hover/active/focus more prominent than rest
• SHOULD use structural skeletons for loading states

Content & Copy

• Active voice: "Install the CLI" not "The CLI will be installed"
• Title Case for headings/buttons (Chicago style)
• Numerals for counts: "8 deployments" not "eight"
• Specific button labels: "Save API Key" not "Continue"
• Error messages include fix/next step, not just problem
• Second person; avoid first person
• & over "and" where space-constrained

Anti-Patterns (flag these)

• user-scalable=no or maximum-scale=1 disabling zoom
• onPaste with preventDefault
• transition: all
• outline-none without focus-visible replacement
• Inline onClick navigation without <a>
• <div> or <span> with click handlers (should be <button>)
• Images without dimensions
• Large arrays .map() without virtualization
• Form inputs without labels
• Icon buttons without aria-label
• Hardcoded date/number formats (use Intl.*)
• autoFocus without clear justification

Part 4: React & Next.js Performance

Performance optimization patterns for React and Next.js, prioritized by impact.

Critical: Eliminate Waterfalls

• Defer await until needed (move into branches)
• Use Promise.all() for independent async operations
• Start promises early, await late
• Use better-all for partial dependencies
• Use Suspense boundaries to stream content

Critical: Reduce Bundle Size

• Avoid barrel file imports (import directly from source)
• Use next/dynamic for heavy components
• Defer non-critical third-party libraries
• Preload based on user intent
• Add <link rel="preconnect"> for CDN/asset domains
• Critical fonts: <link rel="preload" as="font"> with font-display: swap

High: Server-Side Patterns

• Use React.cache() for per-request deduplication
• Use LRU cache for cross-request caching
• Minimize serialization at RSC boundaries
• Parallelize data fetching with component composition

Medium-High: Client-Side Data Fetching

• Use SWR for automatic request deduplication
• Defer state reads to usage point
• Use lazy state initialization for expensive values
• Use derived state subscriptions
• Apply startTransition for non-urgent updates

Medium: Rendering Patterns

• Animate SVG wrappers, not SVG elements directly
• Use content-visibility: auto for long lists (>50 items)
• Use explicit conditional rendering (? : not &&)

Low-Medium: JavaScript Patterns

• Batch DOM CSS changes via classes
• Build index maps for repeated lookups
• Cache repeated function calls
• Use toSorted() instead of sort() for immutability
• Early length check for array comparisons

Part 5: Review Mode

When reviewing existing frontend code, output concise findings grouped by file. Use file:line format (VS Code clickable). Terse findings -- state issue + location. Skip explanation unless fix is non-obvious.

## src/Button.tsx

src/Button.tsx:42 - icon button missing aria-label
src/Button.tsx:18 - input lacks label
src/Button.tsx:55 - animation missing prefers-reduced-motion
src/Button.tsx:67 - transition: all -> list properties

## src/Modal.tsx

src/Modal.tsx:12 - missing overscroll-behavior: contain
src/Modal.tsx:34 - "..." -> ellipsis character

## src/Card.tsx

pass

Part 6: Design Review (Rams)

When reviewing existing frontend code for accessibility and visual design issues, use this structured review format.

Accessibility Review (WCAG 2.1)

Critical (Must Fix)

Serious (Should Fix)

Moderate (Consider Fixing)

Visual Design Review

Layout & Spacing

• Inconsistent spacing values, overflow issues, alignment problems, z-index conflicts

Typography

• Mixed font families/weights/sizes, line height issues, missing font fallbacks

Color & Contrast

• Contrast ratio below 4.5:1, missing hover/focus states, dark mode inconsistencies

Components

• Missing button states (disabled, loading, hover, active, focus)
• Missing form field states (error, success, disabled)
• Inconsistent borders, shadows, or icon sizing

Review Output Format

═══════════════════════════════════════════════════
DESIGN REVIEW: [filename]
═══════════════════════════════════════════════════

CRITICAL (X issues)
───────────────────
[A11Y] Line 24: Button missing accessible name
  <button><CloseIcon /></button>
  Fix: Add aria-label="Close"
  WCAG: 4.1.2

SERIOUS (X issues)
──────────────────
...

═══════════════════════════════════════════════════
SUMMARY: X critical, X serious, X moderate
Score: XX/100
═══════════════════════════════════════════════════