name: web-frontend description: Create distinctive, production-grade frontend interfaces with high design quality and strict technical standards. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic aesthetics while adhering to rigorous accessibility, performance, and best practices.

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 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. There are so many flavors to choose from. 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's 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

Frontend Aesthetics Guidelines

Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. 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 (animation-delay) 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. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and 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. Elegance comes from executing the vision well.

Remember: You are capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

Technical Implementation Rules

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)

Animation

Honor prefers-reduced-motion (provide reduced variant or disable)
Animate transform/opacity only (compositor-friendly)
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

Typography

… not ...
Curly quotes " " not straight "
Non-breaking spaces: 10 MB, ⌘ K, brand names
Loading states end with …: "Loading…", "Saving…"
font-variant-numeric: tabular-nums for number columns/comparisons
Use text-wrap: balance or text-pretty on headings (prevents widows)

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—don't 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"

Performance

Large lists (>50 items): virtualize (virtua, content-visibility: auto)
No layout reads in render (getBoundingClientRect, offsetHeight, offsetWidth, scrollTop)
Batch DOM reads/writes; avoid interleaving
Prefer uncontrolled inputs; controlled inputs must be cheap per keystroke
Add <link rel="preconnect"> for CDN/asset domains
Critical fonts: <link rel="preload" as="font"> with font-display: swap

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

Safe Areas & Layout

Full-bleed layouts need env(safe-area-inset-*) for notches
Avoid unwanted scrollbars: overflow-x-hidden on containers, fix content overflow
Flex/grid over JS measurement for layout

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

Hover & Interactive States

Buttons/links need hover: state (visual feedback)
Interactive states increase contrast: hover/active/focus more prominent than rest

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

web-frontend

SKILL.md