Engineer Awwwards-Tier UI/UX & Motion

This skill turns an AI agent into "Vanguard_UI_Architect," a principal UI/UX design and motion-choreography persona that generates Awwwards-tier, Apple-like, or Linear-like premium interface code instead of generic template layouts. Before writing any code, it silently rolls a "Creative Variance Engine": picking one vibe-and-texture archetype (Ethereal Glass for SaaS/AI/tech, Editorial Luxury for lifestyle/real estate/agency work, or Soft Structuralism for consumer/health/portfolio work) and one layout archetype (Asymmetrical Bento grids, Z-Axis Cascade overlapping cards, or Editorial Split typography-vs-media layouts), each with its own mobile-collapse behavior below 768px. It enforces an "Absolute Zero" list of banned defaults - Inter, Roboto, Arial, Open Sans, and Helvetica fonts, thick-stroked Lucide, FontAwesome, or Material icons, generic 1px gray borders and harsh drop shadows, edge-to-edge sticky navbars, symmetrical Bootstrap-style grids, and linear or ease-in-out transitions - substituting premium fonts such as Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans, ultra-light line icons, and custom cubic-bezier motion instead. Component construction follows a "Double-Bezel" nested-architecture pattern, an outer shell wrapper plus an inner core with its own radius and highlight, so cards read as machined hardware rather than flat divs, plus a "button-in-button" trailing-icon pattern for CTAs. Motion choreography covers a floating glass navbar with a hamburger-to-X morph and staggered link reveals, magnetic hover physics on buttons, and scroll-triggered fade-up entry animations via IntersectionObserver or Framer Motion's whileInView. A fixed five-step execution protocol (silent thought, scaffold, architect, choreograph, output) and an eleven-point pre-output checklist gate the final code before delivery.

Use this skill when building a landing page, portfolio, SaaS UI, consumer product page, or app surface that needs premium visual depth and motion, and the brief calls for a high-end agency, Awwwards-tier, Apple-like, Linear-like, or luxury polish that must avoid generic fonts, harsh shadows, static layouts, default navbars, and ordinary Bootstrap-style grids. Do not use it for brand strategy, conversion research, accessibility validation, or production QA - it is visual-design focused only and does not replace those disciplines. It should also not be applied to constrained dashboards, regulated products, or low-performance environments, where luxury motion and heavy visual treatments are inappropriate, and its output assumes premium fonts, icon sets, images, and motion libraries already exist in (or are intentionally added to) the target project.

The input is a UI-generation prompt or brief; the output is production React, Tailwind, or HTML code implementing the chosen vibe and layout archetype, the Double-Bezel component structure, button-in-button CTAs, and full motion choreography. The performance guardrails constrain that output: animations must run only via transform and opacity (never top, left, width, or height), backdrop-blur is restricted to fixed or sticky elements, grain and noise overlays are applied only to fixed pointer-events-none pseudo-elements, and z-index values are reserved for systemic layers such as sticky nav, modals, overlays, and tooltips rather than arbitrary values. Every asymmetric layout must collapse below 768px to a single-column, full-width stack with standard padding and no rotation or negative-margin overlaps.

Teams and builders who need agency-quality, motion-rich interface code generated directly from a prompt - for SaaS products, portfolios, consumer apps, or landing pages - without hand-authoring a full design system, but who still need the output to stay performant and mobile-safe.