Claude Code skill · MIT
Four weighted criteria, judged by at least eighteen working designers, with the three most extreme scores thrown away. This skill encodes that system as a build method your coding agent can actually follow.
curl -fsSL https://raw.githubusercontent.com/SandroHub013/awwwards-skill/main/install.sh | sh
Windows? PowerShell one-liner · Prefer no pipe-to-shell? git clone
Consequence one
The outlier votes are dropped automatically. You win because no juror finds a reason to mark you down. That makes usability, the one criterion anyone can measure objectively, the thing that quietly eliminates the most beautiful sites.
Consequence two
Every recent Site of the Day has a single interaction people describe out loud. Scattered effects read as noise and cost points twice: once in design, once in usability.
Built with it
Each was produced by running the method in this repo end to end, and each is scored against the same rubric with the numbers published rather than implied. Three are built on primary sources — a font binary, a public earthquake catalog, and the 1931 measurements that define colour. One is generated footage and says so in its headline rather than its footer. One derives its whole geometry from the two setting-out rules a fifteenth-century site actually used. Two are scroll-scrubbed films arguing with each other: one hides every cut, the other prints them. One is the Via Appia walked sideways, with the milestones doing the progress reporting. The rest have no assets at all: they compute every frame while you watch.
01 · type specimen · no WebGL
Fraunces ships crooked — WONK has a
default of 1. Scroll resolves the argument: the column you are reading
travels from the shipped axes to the asked-for ones.
02 · data / WebGL · no webfont
A quake map is the top face of a solid. 8,556 real events of 2025 at their own depth, and scroll is the only way down through the 670 km underneath.
03 · video-first · generated footage
A reel whose footage came out of a model, and says so in its headline. Three clips are one file where every frame is a keyframe, at 1920×1080, so the scroll bar is the film’s transport.
04 · real-time · Three.js
The dark is the default. Scroll descends and the pointer aims the lamp — nothing is lit until you point at it, which is the one thing a rendered film can never do.
05 · real-time · Three.js
Iai is one motion at one speed, so the scroll bar performs it. No model file: the figure is a bone hierarchy and the grove is a recursion.
06 · lesson · NASA JPL data
Every drawing of the solar system is wrong, and this one says by how much. Eight planets with real JPL numbers, written for eight-year-olds.
07 · colour · no libraries
Scroll, and every colour your display cannot emit drains to grey. The counter is the clipped area of the locus, not a caption — it lands on 33.5% because that is what the polygon says.
08 · architecture · Three.js
Nobody knew how to close a hole 45.5 m wide, so scroll lays the courses that did — the profile from the quinto acuto rule, the beds on cones rather than level, the herringbone computed per pixel.
09 · scroll-scrub · zero footage
One take through a hill town at dawn — and the take is a lie told honestly: seven clips cut at three doorways, the seam frame shipped in both neighbours. Nothing filmed, nothing generated.
10 · cut film · zero footage
Cappuccetto Rosso in nine shots. Soglia was one take that hid its seams; this is an edit that declares them — nine lenses from 18 to 85 mm, and the lens and the move printed under every frame.
11 · horizontal journey · no libraries
The Via Appia walked sideways: scroll lays the road under your feet one-to-one, parallax layers slide past at Roman rates, and progress is read on stone milestones — MP CCCLXXXI, never a percentage.
None is a template. Each one is self-scored against the same rubric the skill applies to your work, and the score is printed in each repo folder rather than implied.
The rubric
Rewards visual hierarchy, a real type system, colour with intent, consistent spacing, states that were designed rather than defaulted, and the same language on inner pages.
Punishes stock photography, default component-library look, three greys and five shadows, a polished homepage attached to an unstyled inner page.
Rewards obvious navigation, fast first paint, 60 fps interaction, breakpoints that were designed, accessible contrast, focus and reduced motion.
Punishes five-second loads, scroll-jacking, hover-only affordances on touch, layout shift, anything that needs a tutorial.
Rewards an idea. Concept-driven design where the interaction expresses the subject, and craft turning up somewhere unexpected.
Punishes novelty without meaning, effects copied from last month’s winner, risk that degrades the experience.
Rewards real copy with a voice, original imagery, content and design authored together, microcopy nobody was supposed to notice.
Punishes lorem ipsum, stock, placeholder names, three identical fake case studies.
≥ 6.5 Honorable Mention (jury and users, independently) highest Site of the Day > 7 Developer Award (SOTD winners, re-scored by a developer jury)
Try the rubric
The same weighted maths the jury applies. Be pessimistic: a juror spends sixty to a hundred and twenty seconds on your site, on their machine, at their window size, on their connection.
6.60/10
Close to an Honorable Mention. Find your two lowest rows and fix those first.
The method
The agent does not start writing markup at phase three without phases zero to two written down. That single rule is most of the difference between a competent site and an awarded one.
Non-negotiables
The skill treats these as build constraints, not as a post-launch cleanup. The right-hand column is this page, measured, because a document about craft that loads slowly is an argument against itself.
| Metric | Award target | Typical site | This page |
|---|---|---|---|
| LCP | < 1.5 s | 2.5–4 s | measuring… |
| CLS | < 0.05 | 0.1–0.25 | measuring… |
| INP | < 100 ms | 200–500 ms | measuring… |
| First-view payload as served | < 3 MB | 5–10 MB | measuring… |
| JavaScript shipped as served | < 250 KB | 1 MB+ | measuring… |
| Animation libraries | as few as express the concept | two or three | zero |
This page ships no animation library on purpose. Reference 06 says to pick the smallest stack that can express the concept, and a documentation page is not a spatial experience, so the reveals here are native CSS scroll-driven animations and the rest is a few kilobytes of vanilla JavaScript. The skill recommends GSAP + Lenis where the concept earns them, and ships a working template for exactly that.
What’s inside
Progressive disclosure: the agent reads the workflow, then pulls only the reference the current phase needs.
01-scoring.mdRubric decoded, thresholds, self-scoring sheet02-concept.mdConcept statement, seven art-direction registers, narrative spines03-typography.mdFluid scale, variable fonts, zero-CLS loading, kinetic type04-color-and-layout.mdOKLCH roles, contrast, grid, spacing rhythm, composition05-motion.mdEasing language, choreography, the signature moment06-stack.mdDecision matrix, current versions, project structure07-scroll.mdLenis + ScrollTrigger, native scroll-driven CSS, pinning, horizontal08-webgl.mdThree.js patterns, DOM sync, shaders, GPU budgets, disposal09-transitions.mdPreloaders, page transitions, View Transitions API10-interactions.mdCursor, magnetic, hover, sound, micro-detail checklist11-performance.mdBudgets, Core Web Vitals, asset pipeline, frame budget12-accessibility.mdWCAG 2.2 AA for motion-heavy sites, Developer Award13-responsive.mdMobile Excellence, touch, breakpoint discipline14-anti-patterns.mdScore killers, ordered by how fast a juror notices15-audit.mdRunnable real-browser verification, not guessed numbers16-submission.mdTiming, thumbnail, deploy freeze, other awards17-video.mdEncoding ladder, HLS, preview patterns, accessible custom player18-deepdive.mdTurn an awarded site into a reusable idea card: evidence, not assertion19-scroll-scrub.mdCamera flight as the site: frame-lock seams, blob seeks, playback autoplayPlus a no-build starter template that encodes the doctrine, a DOM-synced WebGL layer with real teardown, and a printable pre-flight checklist.
Install
curl -fsSL https://raw.githubusercontent.com/SandroHub013/awwwards-skill/main/install.sh | sh
Clones into ~/.claude/skills/awwwards. Re-run to update.
irm https://raw.githubusercontent.com/SandroHub013/awwwards-skill/main/install.ps1 | iex
PowerShell. Same destination, same update behaviour.
git clone https://github.com/SandroHub013/awwwards-skill.git ~/.claude/skills/awwwards
No pipe to shell. Read every line first. You should.
/plugin marketplace add SandroHub013/awwwards-skill
/plugin install awwwards@awwwards-skill
Inside Claude Code. Versioned, updatable with /plugin marketplace update.
Then say
/awwwards to read the workflow
Polish does not rescue a site with no idea.
Start at phase zero.