Generate Premium Frontend UI with Design Taste

High-Agency Frontend Skill is a detailed design-engineering ruleset that pushes React/Next.js/Tailwind output away from statistically common LLM UI cliches - centered heroes, purple/blue "AI gradient" glows, generic three-column card rows, Inter font, and lifeless static states - toward senior-level, premium-feeling interfaces. It works off three dialed baseline variables (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY, default 8/6/4) that drive concrete choices across typography, color, layout, motion, and density, and it can be overridden dynamically whenever the user states a preference in chat.

Concretely, it enforces deterministic typography rules (large tracked-in display type using fonts like Geist, Outfit, Cabinet Grotesk, or Satoshi instead of Inter, with serif fonts banned on dashboards), color calibration (max one accent color under 80% saturation, an explicit ban on the "AI purple/blue" look, neutral Zinc/Slate bases), layout diversification (asymmetric split-screen or left/right-aligned heroes instead of centered ones), and "anti-card-overuse" rules for dense dashboards (border/divide-based grouping instead of boxed cards). It also mandates full interaction-state coverage - skeletal loaders, composed empty states, inline error states, and tactile :active feedback - rather than only a static happy-path UI, plus a dedicated "Motion-Engine" Bento-grid paradigm (rounded-2.5rem white cards, diffusion shadows, spring-physics perpetual micro-animations) for SaaS dashboards.

Use this skill when a user asks to create, improve, or review frontend UI that needs strong design taste and anti-generic constraints - anything touching React, Next.js, Tailwind, motion, component states, typography, spacing, color, or responsive behavior at a senior-design-judgment level, or when the goal is explicitly to override common LLM UI biases (centered heroes, purple gradients, card overuse, fragile layouts, missing states).

Do not force these rules when the existing product, brand system, or platform conventions require a different visual direction - the skill is opinionated by design and is meant to be overridden by explicit user direction, not imposed against an established design system. It also does not replace project-specific product requirements, accessibility review, or user testing, and framework versions, installed dependencies, responsive behavior, and build output must still be verified in the target repository before treating generated UI as production-ready.

Input is a natural-language frontend request (build, improve, or review a UI). Output is production-leaning React/Next.js + Tailwind code that respects Server Component defaults (interactive leaf components isolated with 'use client'), includes explicit loading/empty/error states, and - critically - checks package.json before importing any third-party library, printing the exact npm install command rather than assuming a dependency exists.

The skill's default stack spans Tailwind CSS (v3/v4, version-locked against package.json), Framer Motion for UI and Bento interactions (useMotionValue, useTransform, spring physics, layout/layoutId transitions), GSAP ScrollTrigger and Three.js/WebGL for isolated full-page scrolltelling or canvas backgrounds (never mixed with Framer Motion in the same component tree), @phosphor-icons/react or @radix-ui/react-icons for iconography, and shadcn/ui components - always restyled rather than left in their generic default state.

Frontend and product engineers, and AI coding agents, building consumer or SaaS interfaces where a distinctive, premium, non-generic visual identity is a deliberate goal rather than an afterthought.