Engineer Award-Winning Frontend Experiences

This skill has the model act as an elite, award-winning frontend design engineer, aggressively countering what it calls standard LLM statistical biases: massive six-line wrapped hero headings from narrow containers, ugly empty gaps in bento grids, cheap meta-labels such as "QUESTION 05" or "SECTION 01", invisible button text, and endlessly repeated left/right layouts. Its stated goal is output that is highly creative, perfectly spaced, motion-rich through GSAP, mathematically flawless in grid execution, and reliant on varied, high-end assets. It bans emoji in code, comments, or output.

To break repetition, it requires simulating a Python script in a design_plan block before writing any UI code: a deterministic seed derived from the prompt's character count drives a mock random.choice() that selects one hero architecture, one typography stack (Satoshi, Cabinet Grotesk, Outfit, or Geist, never Inter), three unique component architectures, and two advanced GSAP paradigms, and the model is forbidden from defaulting to the same UI twice.

The page must follow AIDA: a premium navigation bar, then Attention as a cinematic hero, Interest as a high-density bento grid or interactive typographic components, Desire through pinned GSAP scroll or text-reveals, and Action as a high-contrast CTA and footer, with large vertical padding such as py-32 md:py-48 between sections so each feels like a distinct chapter.

The hero must never exceed two to three lines of heading text; the skill calls four to six lines a catastrophic failure and fixes it with an ultra-wide container (max-w-5xl, max-w-6xl, or w-full) and a responsive clamp font size. Three hero layouts are offered for the randomizer to pick from: cinematic center with two CTAs over a full-bleed background image, artistic asymmetry with an offset text block and an overlapping floating image, and an editorial split with large negative space. Button text must always contrast its background. Floating stamp or badge icons, pill-tags under the hero, and raw stats in the hero are explicitly banned.

For bento grids, it requires Tailwind's grid-flow-dense on every grid so no cell is left empty, mathematically interlocking column and row spans, and restraint of three to five intentional cards rather than eight messy ones. For motion, it requires real GSAP (@gsap/react, ScrollTrigger): hover physics such as group-hover:scale-105 transition-transform duration-700 ease-out, a pinned section title beside a scrolling gallery, images that scale from 0.8 to 1.0 as they enter view and darken and fade as they leave, scrubbing text reveals from low to full opacity, and dynamic card stacking on scroll.

Its component arsenal includes inline typography images embedded inside headings, for example:

I shape <span className="inline-block w-24 h-10 rounded-full align-middle bg-cover bg-center mx-2" style={{backgroundImage: 'url(...)'}}></span> digital spaces.

along with horizontal accordions, an infinite marquee of partner logos or typography, and a testimonial carousel with overlapping portraits. Content and asset rules ban meta-labels forever, require picsum.photos placeholder images with CSS filters like grayscale or mix-blend-luminosity so they don't look like stock photos, favor grainy mesh gradients or radial blurs over flat colors, and wrap the page in overflow-x-hidden w-full max-w-full to prevent horizontal scrollbars from off-screen animation.

Before any UI code, the mandatory design_plan must show the mock Python RNG output, confirm all five AIDA sections are present, state the exact max-w class guaranteeing a 2-3 line hero with no stamp icons or spam tags, prove the bento grid has zero empty cells with grid-flow-dense applied, and confirm no cheap meta-labels remain and button contrast is correct.

Use it when the user asks for an award-level landing page, marketing page, or creative frontend with cinematic motion, or when GSAP, pinned scroll, scrubbing, card stacking, horizontal motion, or similarly advanced animation fits the request.

Do not apply it when the user asks for a restrained interface, a low-motion accessibility mode, or a simple maintenance change. It also assumes the frontend project can support GSAP or an equivalent animation library, so check dependencies and performance budgets first, and heavy scroll animation, pinning, and media effects need browser testing across desktop and mobile viewports before release.

The input is the page brief (landing page, marketing page, or creative frontend) and the prompt text whose character count seeds the randomization. The output is a design_plan block followed by React/UI code implementing the randomly selected hero layout, typography stack, component architectures, and GSAP paradigms within the AIDA structure.

It is for frontend and design engineers building award-level, motion-rich marketing and landing pages who want the model to avoid generic layouts, empty grid cells, and cheap labels by construction.