Pick an Awwwards winner and clone it pixel for pixel

the prompt

Go to Awwwards, pick a winning site you find genuinely impressive, and rebuild it pixel for pixel. Context you should know: this is going into a video watched by a large audience, your clone is put on screen next to the original site against two other frontier models doing the same task, and your work will be credited to you by name. Every model gets this identical prompt. The comparison is literal — your build and the real site, side by side, at the same viewport. **First, read the methodology.** Clone `https://github.com/per-simmons/clone-app-pat-pro-public` and read `SKILL.md` and `references/00-contract.md` before you do anything else, then the stage references as you reach each stage. The contract defines the workspace layout, the artifact filenames, the stage inputs and outputs, the verification gate, and the convergence loop. Follow it. `scripts/assert-styles.mjs` is the gate. Two overrides to what that repo says, and they win where they conflict: - **Ignore the stop-and-check-in gate.** That repo was written for an interactive session with a human. You are running unattended. Do not stop between stages, do not ask for approval, do not ask questions. Run the whole pipeline start to finish and report only when it's done. - **Use your own browser automation** — headless Playwright or Puppeteer, installed and driven by you — anywhere the repo says to use the Claude Chrome extension. The contract's real rule is unchanged and it is the one that matters: **computed styles read off the live page are the ground truth.** Read them through the CSSOM. Screenshots are a visual reference only; never build the gate on a pixel diff. Requirements: 1. **Pick your own target on Awwwards** — Site of the Day, Site of the Month, or a Developer Award winner. Pick something you actually find impressive rather than something easy to match. It must be publicly reachable without a login or paywall. Record the exact URL, the award, and why you chose it in the project README. If a site turns out to be unclonable for a hard reason — it's down, it's gated, it's a video with no site behind it — pick another and note the swap. 2. **Recon every view before you write code.** Every route, every breakpoint, every interactive state — hover, focus, active, open menus, modals, scroll-triggered states, loading and transition states. The repo's `01-recon.md` covers this. What you miss in recon you will not build. 3. **Extract, don't guess.** Pull real computed values off the live page: the full type scale, the color palette with exact values, spacing, radii, shadows, borders, grid and container widths, breakpoints, easing curves and durations, font families and weights. `02-extraction.md` and `03-design-spec.md` are the shape of this. Never read a value off a screenshot. 4. **Rebuild it.** Every page, every component, every state, at every breakpoint. The motion is part of the clone — scroll behavior, page transitions, hover choreography, entrance animations, any WebGL or canvas work. A static skin over a site whose whole identity is motion is a failed clone. 5. **No lifted assets.** Do not hotlink from the original and do not download its images, video, or fonts. Regenerate imagery in code, substitute freely-licensed equivalents, or author placeholders that match the original's role, aspect, and color. Fonts come from an open CDN, matching the metrics as closely as you can. Say what you substituted in the README. 6. **Prove the match.** Run the verification gate: read the clone's computed styles, compare them to the extracted design tokens with `scripts/assert-styles.mjs`, and iterate the convergence loop until there are zero style-assertion failures and the project builds clean. Then eyeball your clone against the real site at the same viewport, at every breakpoint, and fix what your eye catches that the assertions didn't. 7. **Ship it runnable.** A real project — a modern framework is fine — that installs and runs with a documented command, plus a README naming the target URL, the award it won, what you substituted, and your final assertion results. 8. **Depth over breadth if you have to choose.** One page cloned to a genuinely indistinguishable standard beats five pages that are approximately right. Work completely autonomously. Do not ask for anything until it's finished. DONE when: the clone passes the style-assertion gate with zero failures, runs from a documented command, reproduces the original's motion and interactive states, and holds up next to the real site at full screen.

…