Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)

Engineering $150k+ agency-level digital experiences. Output must exude haptic depth, cinematic spatial rhythm, obsessive micro-interactions, and flawless fluid motion. NEVER generate the same layout twice. Combine different premium archetypes while adhering to elite "Apple-esque / Linear-tier" design language.

Authority References (shokunin improvement)

Based on: Apple Human Interface Guidelines, Linear Design, Stripe Design, Emil Kowalski (design engineering), Paul Lewis (compositor-only), Ahmad Shadeed (Container Queries), WCAG 2.2.

1. THE "ABSOLUTE ZERO" DIRECTIVE (ANTI-PATTERNS)

• Banned Fonts: Inter, Roboto, Arial, Open Sans, Helvetica. Use Geist, Clash Display, PP Editorial New, Plus Jakarta Sans.
• Banned Icons: Standard thick-stroked Lucide, FontAwesome, Material. Use Phosphor Light, Remix Line.
• Banned Borders/Shadows: Generic 1px solid gray. Harsh rgba(0,0,0,0.3). Use tinted, ultra-diffuse shadows.
• Banned Layouts: Edge-to-edge sticky nav glued to top. Boring symmetric 3-column grids without massive whitespace.
• Banned Motion: Standard linear or ease-in-out. Instant state changes without interpolation.

2. THE CREATIVE VARIANCE ENGINE

Select ONE combination per project to ensure unique output:

Vibe & Texture Archetypes (Pick 1)

1. Ethereal Glass (SaaS/Tech): OLED black (#050505), radial mesh gradients (glowing purple/emerald orbs). Vantablack cards + backdrop-blur-2xl + white/10 hairlines. Wide geometric Grotesk.
2. Editorial Luxury (Lifestyle/Agency): Warm creams (#FDFBF7), muted sage, deep espresso. High-contrast Variable Serif for headings. CSS noise/film-grain overlay (opacity-[0.03]).
3. Soft Structuralism (Consumer/Health/Portfolio): Silver-grey or white backgrounds. Massive bold Grotesk. Airy, floating components with soft, highly diffused ambient shadows.

Layout Archetypes (Pick 1)

1. Asymmetrical Bento: Masonry-like grid of varying card sizes (col-span-8 row-span-2 next to stacked col-span-4). Mobile: Single column. All col-span overrides reset.
2. Z-Axis Cascade: Elements stacked like physical cards, overlapping with subtle -2deg or 3deg rotation. Mobile: Remove all rotations and negative margins. Stack vertically.
3. Editorial Split: Massive typography on left half (w-1/2), interactive horizontal scrollable cards on right. Mobile: Full-width vertical stack.

Universal Mobile Override: Any asymmetric layout ≥ md breakpoint MUST collapse to w-full px-4 py-8 below 768px. NEVER h-screen — always min-h-[100dvh].

3. HAPTIC MICRO-AESTHETICS

"Double-Bezel" Nested Architecture

• Outer Shell: Wrapper with subtle background (bg-black/5), hairline border (ring-1 ring-black/5), padding p-1.5, large radius rounded-[2rem].
• Inner Core: Content container with distinct background, its own inner highlight (shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]), mathematically calculated smaller radius rounded-[calc(2rem-0.375rem)].

CTA "Button-in-Button" Architecture

• Primary buttons: fully rounded pills (rounded-full, px-6 py-3).
• Trailing icon: NEVER naked. Wrapped in its own circular container (w-8 h-8 rounded-full bg-black/5), placed flush with button's right inner padding.

Spatial Rhythm

• Macro-whitespace: py-24 to py-40 for sections. Breathe heavily.
• Eyebrow Tags: Microscopic, pill-shaped badge (rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium) preceding major headings.

4. MOTION CHOREOGRAPHY

All motion uses custom cubic-bezier (transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]). Never linear or default ease-in-out.

"Fluid Island" Nav

• Closed: Floating glass pill detached from top (mt-6 mx-auto w-max rounded-full).
• Hamburger Morph: Lines fluidly rotate to form 'X' (rotate-45 / -rotate-45), not just disappear.
• Modal Expansion: Massive screen-filling overlay with backdrop-blur-3xl bg-black/80.
• Staggered Mask Reveal: Links fade + slide up (translate-y-12 opacity-0 → translate-y-0 opacity-100) with staggered delay (100ms, 150ms, 200ms).

Magnetic Button Physics

• group utility. active:scale-[0.98] for physical press.
• Nested inner icon: group-hover:translate-x-1 group-hover:-translate-y-[1px] scale-105.

Scroll Entry

• Elements fade + slide up + blur: translate-y-16 blur-md opacity-0 → translate-y-0 blur-0 opacity-100 over 800ms+.
• Use IntersectionObserver. NEVER window.addEventListener('scroll').

5. PERFORMANCE GUARDRAILS

• GPU-Safe: Only transform + opacity. will-change: transform sparingly.
• Blur: Only fixed/sticky elements. Never scrolling content.
• Grain: position: fixed; pointer-events: none only.
• Z-Index: Only systemic layers.
• prefers-reduced-motion: Mandatory on every animation (shokunin improvement).

6. PRE-OUTPUT CHECKLIST

• No banned fonts, icons, borders, shadows, layouts, motion (Section 1)
• Vibe + Layout Archetype consciously selected (Section 2)
• Double-Bezel nested architecture on major cards (Section 3)
• Button-in-Button on CTAs where applicable (Section 3)
• Section padding ≥ py-24
• Custom cubic-bezier on all transitions
• Scroll entry animations present
• Mobile collapse below 768px: single-column
• min-h-[100dvh] not h-screen
• transform + opacity only for animations
• prefers-reduced-motion respected
• Overall reads as "$150k agency build", not "template with nice fonts"

Workflow

Step 1: Select Archetypes

Pick exactly one Vibe Archetype and one Layout Archetype from Section 2 before writing any code. Document the selection so the entire build stays coherent:

Vibe: Ethereal Glass | Editorial Luxury | Soft Structuralism
Layout: Asymmetrical Bento | Z-Axis Cascade | Editorial Split

Never mix vibes. A page that blends Ethereal Glass gradients with Editorial Luxury serifs reads as confused, not premium.

Step 2: Block banned defaults

Before writing any Tailwind class, review Section 1 "Absolute Zero" and remove all banned fonts, icons, borders, shadows, and motion defaults from the project scaffold. This is a blocking step — do not proceed until every banned item is replaced.

Step 3: Build outer shell → inner core

Follow the Double-Bezel architecture (Section 3). For every major section:

1. Create the outer wrapper (bg-black/5 ring-1 ring-black/5 rounded-[2rem] p-1.5)
2. Place the inner content container (shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)])
3. Add content. Never skip the bezel — it is the signature of this aesthetic.

Step 4: Wire motion

Apply motion choreography (Section 4) to:

• Navigation: Fluid Island pattern with hamburger morph + staggered mask reveal
• CTAs: Magnetic button physics with nested icon animation
• Scroll entries: IntersectionObserver-driven fade + slide + blur

Step 5: Mobile collapse

Overwrite every asymmetric layout rule at the md breakpoint (768px). All col-span values reset, all rotations removed, all negative margins zeroed. Use min-h-[100dvh] everywhere; never h-screen.

Step 6: Pre-output checklist

Run through the 12-item checklist (Section 6) before delivering. Every unchecked box is a regression from "$150k agency" to "template with nice fonts."

Step 7: Accessibility verification

• All animations respect prefers-reduced-motion: reduce
• Color contrast meets WCAG 2.2 AA minimum (4.5:1 for text, 3:1 for large text)
• Focus indicators visible and non-removed (never outline: none without replacement)
• Grain overlay has pointer-events: none and aria-hidden="true"

Error Handling

Cause	Fix
CSS grain texture causes layout shift or scroll jank	Grain must be position: fixed; pointer-events: none; z-index: [system layer]. Never apply grain to a scrolling container.
backdrop-blur causes GPU compositing failure on low-end devices	Limit blur to fixed/sticky elements only. Feature-detect with @supports (backdrop-filter: blur(1px)). Provide solid fallback background.
Double-Bezel nested radii don't align mathematically	Outer radius R, inner radius must be R - padding. If rounded-[2rem] and p-1.5 (24px), inner is rounded-[calc(2rem-1.5rem)]. Always use calc() to prevent drift.
Magnetic button jitters on rapid hover/unhover	Apply transition-transform duration-200 on the inner element only. Use will-change: transform on the button and remove it on animationend.
Z-Axis Cascade cards overlap incorrectly on Safari	Safari handles z-index in stacking contexts differently with transforms. Apply explicit z-index values (not auto) and transform-style: flat on the parent.
Scroll entry animations fire multiple times on fast scroll	Use IntersectionObserver with threshold: 0.1 and a once: true flag. Track animated elements in a WeakSet to prevent re-triggering.
Custom cubic-bezier feels sluggish on quick interactions	For interactive elements (buttons, toggles), use shorter duration: duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]. Reserve duration-700 for scroll entries and page transitions only.

Sources

• Apple Human Interface Guidelines (developer.apple.com/design/human-interface-guidelines) — spatial layout, motion, and material principles
• Linear Design System (linear.app/docs/design-system) — opinionated component architecture and animation philosophy
• Stripe Design documentation (stripe.com/design) — premium SaaS visual language and interaction patterns
• Emil Kowalski "Animation Engineering" (animations.dev) — WAAPI, spring physics, and compositor-only animation
• Ahmad Shadeed "CSS Container Queries" (ishadeed.com) — modern responsive layout patterns
• WCAG 2.2 Specification (w3.org/TR/WCAG22) — accessibility compliance for motion, contrast, and focus
• Paul Lewis "The Compositor's Properties" (web.dev/animations-guide) — GPU-safe animation properties and layout thrashing prevention

Anti-Patterns

Pattern	Problem	Fix
Dropping the Double-Bezel on inner sections "for simplicity"	The page loses its signature depth. Cards become flat and generic.	Every major card/section gets the bezel. Only minor inline elements (tags, badges, tooltips) skip it.
Using h-screen instead of min-h-[100dvh]	100vh ignores mobile browser chrome (address bar), causing overflow and clipped content.	Always use min-h-[100dvh]. Dynamic viewport height compensates for browser UI.
Applying the same archetype combination to every project	The Creative Variance Engine exists to prevent repetition. Reusing the same vibe+layout produces indistinguishable output.	Track previously used combinations. Force new selection if the last 3 projects used the same archetype.
Omitting mobile overrides	Asymmetric bento and Z-axis cascade layouts break catastrophically below 768px.	Every col-span-* and rotation resets at md: breakpoint. Test at 375px width before delivery.
Linear or ease-in-out on any transition	These are explicitly banned in Section 1. Default easing reads as unpolished AI output.	Custom cubic-bezier with asymmetric curve on every transition. Interactive: duration-200. Scroll: duration-700.
Adding a fourth or fifth font to "make it unique"	Premium design uses 2 fonts max (heading + body). More fonts create visual noise and degrade performance.	Stick to 1-2 typefaces. Use weight, size, and letter-spacing for hierarchy instead of additional families.

Checklist

• Skill loads without errors in the AI agent
• YAML frontmatter is valid (description, compatibility, audience)
• Workflow section provides clear step-by-step instructions
• Error handling section covers common failure modes
• All referenced files (references/, scripts/, assets/) exist
• Skill triggers correctly for intended use cases
• No broken links or missing resources