awards

Design and build ONE award-worthy component inside an existing site, or as a standalone piece: a hero, preloader, navigation overlay, custom cursor, marquee, sticky stack, horizontal gallery, hover-preview list, image-distortion grid, theme switcher, compare slider, magnetic CTA, page transition, footer or 404. Use whenever the user asks to make a specific element 'award-worthy', 'award-level', 'more premium / impressive / memorable', to 'add a menu / cursor / marquee like the creative studios do', or to build a single section or component with real motion without redesigning the whole site. Inherits the site's tokens and motion library, adds one signature interaction, every state, keyboard, touch and reduced-motion paths, and verifies with a component capture. Not for whole-site builds (awards:craft), dashboards, admin UI or plain bug fixes.

Find the concept for an award-worthy site or component before any code: the one idea the page owns, its narrative or scroll story, the signature interaction and a committed visual world, grounded in a corpus of analysed award-winning sites and deliberately diverging from them. Use whenever the user asks for ideas, creative direction, a concept or 'big idea', storytelling or scrollytelling structure for a product story, 'how would an award-winning studio approach this', 'what would make this site win', 'would this win', or when a build request arrives with no direction yet. Deals three directions plus a conventional exit with a seeded roll, lets the user lock one in a single question, and writes the AWARDS.md direction contract. Never copies a reference site. Not for copywriting alone, dashboards, admin tools or feature work with no award framing.

Design and build award-worthy websites end to end (Site of the Day / Month / Year and Developer Award league): brief → concept → visual system → page structure → stack → motion → WebGL → jury → ship. Use whenever the user wants a site, landing page, portfolio, campaign, product, studio or brand site that should be 'award-worthy', 'award-level', 'the best site you can build', 'immersive', 'cinematic', 'creative-developer style', 'with smooth scroll / GSAP / Lenis / WebGL', names studios or sites (Lusion, basement, Igloo, Lando Norris, Léo Parpeix) or says 'make it stunning'. Also the entry point when unsure which awards skill applies: it routes single elements to awards:component and critiques to awards:jury, and it owns AWARDS.md. Not for dashboards, admin CRUD, bug fixes, API docs or accessibility work with no award framing.

Scores a site, page or single component the way a design-award jury does. Design, Usability, Creativity and Content on anchored 0–10 scales (Site of the Day winners sit at 7.3–8.2), the five Developer Award criteria, the memory test, the specificity test (could a juror name the source site?), the keyboard and reduced-motion walk and a slop scan, ending in an ordered fix list and one disposition (ship, fix, rebuild or recapture). Use whenever the user asks to review, critique, score, judge, rate or evaluate a site or component, asks "would this win", "is this award-worthy", "what is missing", "what would the jury say", or before shipping award-level work; also re-checks a fix batch with --verdict. Runs in a fresh context on Playwright captures and the audit, so the build conversation cannot talk it upward. Not for code review, failing tests or accessibility work with no award framing.

Author the motion of an award-level site or component with GSAP 3.15 (ScrollTrigger, SplitText, Flip, Observer), Lenis, anime.js 4 or CSS: a preloader that holds at 100 on a real load signal, masked line reveals, scroll-scrubbed pins and sticky stages, velocity-driven effects, a two-speed contextual cursor, magnetic targets, rAF marquees, flicker and scramble text, theme swaps, page and shared-element transitions, all on one expo-out vocabulary with framerate-independent damping and three reduced-motion tiers. Use when asked to animate, add motion or smooth scroll, build scroll-triggered or scrollytelling effects, text reveals, transitions, micro-interactions or cursor effects, make a page feel alive, premium or cinematic, or fix animation that feels generic, janky or fade-up-everything. Not for chart or dashboard animation, and not for the WebGL layer itself (awards:webgl).

Turns a reference website into a structured case-study card in the awards corpus format — concept, palette, type, components, motion with parameters, stack evidence, weaknesses, generalisable principles, take / don't take, and a confidence label on every claim. Uses Playwright captures and light source inspection when the site is reachable, and marks recalled or inferred material honestly when it is not. Use whenever the user shares a site to learn from, asks "what makes this site award-winning", "analyse / deconstruct / break down this site", "why did this win", "add this to the references", pastes a CSSDA, FWA or other award-gallery entry, or wants the awards skills to learn a new style. Produces principles for awards:concept to diverge from, never a reproduction. Not for competitor SEO or content audits, and not for downloading a site's assets.

Takes an award-level site or component from "it works" to "it ships". Applies the jury's fix list in one batch, runs the deterministic craft-floor audit (reflex fonts, contrast, reduced-motion branch, landmarks and alt, overflow, scrub easing, will-change, browser surfaces, slop patterns) until every finding is fixed or recorded as an exception, captures desktop, mobile, scroll-state and reduced-motion screenshots, checks the performance budgets (entry JS, GL chunk, images, meshes, fonts, LCP, CLS), meta and Open Graph, favicon, 404, console errors, and writes the ship report. Use whenever the user says ship, launch, finalize, polish, QA, "make it production-ready", "check performance or accessibility", "run the audit", "take screenshots", or after any awards build or jury round in a project with an AWARDS.md. Not a deploy tool, nor for ordinary app screens with no award framing.

Choose and scaffold the technical foundation of a creative-developer site and boot it correctly: Vite + vanilla by default, or Next.js (@gsap/react, React Three Fiber), Nuxt, Astro with View Transitions, SvelteKit + Threlte, or a Webflow shell with an injected ESM engine. Wires Lenis 1.3 and GSAP ScrollTrigger on one ticker, lazy-chunks Three.js, self-hosts fonts, picks the page-transition mechanism, sets up the glTF/Draco/KTX2 pipeline, quality tiers and one reduced-motion switch, and records budgets in AWARDS.md. Use when asked to set up, scaffold, bootstrap or configure a project for smooth scroll, GSAP, Lenis, Three.js, WebGL or page transitions, which framework suits an award-style site, or to add these libraries to an existing Next, Nuxt, Astro, Svelte or Webflow app. Not for CRUD or dashboard scaffolds without award framing, nor for authoring the animations (awards:motion).

Plan and build the page architecture of an award-level site: a chapter or route map with pacing, the hero archetype, navigation and a fullscreen menu overlay, the preloader slot, marquee, sticky and pinned stacks, horizontal rails, galleries, hover-preview archive lists, spec blocks, a designed footer and 404, as semantic HTML with keyboard paths and a responsive strategy decided before build. Use whenever the user asks for page structure, sections, the layout of a landing page or portfolio, 'what sections should this have', wireframes, a hero that 'needs to feel premium', a nav, menu, footer or 404 page, scrollytelling structure, or when turning a locked direction into markup. Draws on a catalogue of components seen across the analysed award-winning sites. Not for dashboards, admin CRUD, forms-only pages or accessibility fixes with no award framing.

Turn a direction into a complete visual system for an award-level site and write DESIGN.md plus src/styles/tokens.css: a typeface contract (expressive display + neutral grotesque, or one characterful grotesque at display scale), a fluid type scale locked to an artboard, two to four colour tokens under a named strategy, warm near-blacks, a spacing unit, grid and gutters, radius and shadow policy, per-section themes, easing and duration tokens and themed browser surfaces. Use whenever the user asks for design tokens, a palette, fonts or typography, 'pick fonts and colours for …', a design system, DESIGN.md, 'make the type feel premium', theme switching, or when an awards build has no DESIGN.md yet. Avoids the reflex faces and generated palettes. Not for a Tailwind config conversion, a Figma hand-off or component styling with no award framing.

Build the WebGL layer of an award-level site with Three.js 0.186, OGL, React Three Fiber or Threlte: DOM-tethered image planes with velocity distortion, a fluid-wake post-process, depth-map 2.5D parallax, scroll-driven camera rigs on a virtual scroll, render-to-texture section transitions, procedural landscapes, one hero object with inertia, particles, bloom and grain post-processing, plus the Blender to glTF + Draco + KTX2 pipeline, adaptive quality tiers, disposal, a semantic DOM mirror and a no-GL, reduced-motion fallback. Use when asked for 3D, WebGL, shaders, GLSL, Three.js, R3F, OGL, particles, liquid, fluid or distortion effects, image hover distortion, a 3D hero, scroll-scrubbed models or any canvas effect beyond CSS, and when a canvas site is slow, drifts against the DOM or renders dark. Not for DOM-only motion (awards:motion), charts, or 'make it 3D' with no concept behind it.