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.
Instrucciones de origen · Vista previa de solo lectura
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
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.
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.
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.
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.
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.
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.
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').
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).
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
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.
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.
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.
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.
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.
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
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.
w-full
clamp()
Dependency discipline. Before importing any third-party library, verify it exists in package.json. Output the install command if it does not. Never assume framer-motion, gsap, zustand, or other libraries are present.
Framework-aware patterns. In Next.js: default to Server Components. Client Components ("use client") are isolated leaf components for interactivity. Never put global state in RSC. Check Tailwind version (v3 vs v4) before touching config — do not use v4 syntax in a v3 project.
