awwwards and jury skill
/awwwards builds an animated WebGL site from one line, and /jury scores any site against the Awwwards jury criteria
- 1,274 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill runs builds and Node scripts and installs Playwright and axe-core into the project as dev dependencies
- The agent opens sites in a real browser and captures screenshots of pages at the addresses you give
- Deploying to a host happens only after you confirm
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/awwwards-and-juryDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill runs builds and Node scripts and installs Playwright and axe-core into the project as dev dependencies
- The agent opens sites in a real browser and captures screenshots of pages at the addresses you give
- Deploying to a host happens only after you confirm
This is third-party code. Review the repository files before installing.
What it does
The repository holds two skills. /awwwards takes a line such as "make me a portfolio, my name is Ana" and does the whole job itself: it proposes three concepts and picks the strongest, writes the design system to a DESIGN.md file, then builds the site on Next.js or Astro with GSAP, Lenis and WebGL through the OGL library. The agent checks the finished site in a real browser. It runs a production build, crawls the pages with a script (SEO, accessibility, weight, placeholder copy), takes screenshots on desktop, on a phone and with animation off, and measures LCP and CLS on a throttled phone. A separate critic that never saw the plan scores the result, and the agent keeps fixing the site until every category reaches 8 out of 10. Deploying to Vercel, Netlify or Cloudflare happens only after you confirm. /jury builds and changes nothing. It shoots the pages of your site or a competitor's, measures speed, accessibility and metadata, and a critic with no access to the code scores design, usability, creativity and content. The output is a scorecard.md file in the .jury folder with evidence for every number and a fix list ranked by how many points each fix gains.
Who it is for. For front-end developers and designers who need an expressive portfolio, launch page or studio site, and for anyone who wants a finished site scored with measurements.
Good fit when
- You need a portfolio, studio site or product launch page with animation, page transitions and one memorable effect
- An existing page looks templated and you want to redo it with a new concept and design system
- Before showing a client or entering a contest you want a score against the jury criteria, with LCP and CLS measurements and an accessibility pass
- You want to compare your site with a competitor's on one rubric: /jury accepts two links in one request
- You need the audit and screenshot scripts apart from the skills; they sit in jury/scripts and run with node
Not a fit when
- You need a quick snippet or a single page in a few minutes: a full run takes long and spends a lot of tokens
- The page sits behind a login: /jury cannot score it, so give it a local build of the project instead
- The model cannot read images: the QA loop relies on looking at its own screenshots
- You need an official Awwwards score: the project is not affiliated with them and gives an estimate from their public criteria
Example request
/awwwards make a site for my architecture studio in Lisbon, we design small houses, with three projects in the portfolioLimitations
A full /awwwards run takes a long time: concept, design system, build and several rounds of screenshots and fixes, so it spends many tokens. Quality depends on the model; the author tested the skills with Claude Code, Antigravity and Codex. You finish the copy and photos yourself: without real projects the site ships with marked placeholders.
The 8 out of 10 target is the skill's own score, and you are the final judge. /jury is not affiliated with Awwwards. It was calibrated on two October 2026 Sites of the Day, both winners: the critic gave 6.15 and 6.10, the jury 7.28 and 7.24, so it is stricter by about 1.1 points. Accuracy for weaker sites is not measured. Motion feel and sound stay out of the score, which rests on stills and measurements.
The skills CLI needs Node 22.20 or newer, and the scripts need Node 20. The skill installs Playwright and axe-core into the project as dev dependencies, while /jury puts them in ~/.cache/jury.
How to disable. Run `npx skills remove awwwards jury -g`. If you installed the plugin, use `/plugin uninstall awwwards@juliobsz`. Do not keep both install routes at once, or each skill shows up twice.
FAQ
How do I install awwwards in Claude Code?
`npx skills add juliobsz/skills -g -a claude-code` installs both skills. A plugin route also exists: `/plugin install awwwards --marketplace juliobsz/skills`. Open a new session afterwards and type /awwwards.
How does /jury differ from /awwwards?
/awwwards builds a site, while /jury only scores one and edits nothing. The /jury critic gets screenshots and measurements but no code, no design notes and no pitch about the idea.
What stack does the site use?
Next.js by default. Astro is used for static showcases where motion is the product, and inside an existing project its own stack stays. GSAP, Lenis and OGL for WebGL are used everywhere.
What should I install first?
Node 22.20 or newer for the skills CLI and a model that can read images. The skill installs Playwright and axe-core itself. A Vercel, Netlify or Cloudflare account is only needed to deploy.
How accurate is the /jury score?
On two Sites of the Day the critic gave 6.15 and 6.10 against jury scores of 7.28 and 7.24. The card therefore shows two numbers, the critic's score and a jury estimate, and the band comes from the estimate. Two winners are a small sample, and weaker sites are not measured.
Can I run the audit without an agent?
Yes. `node jury/scripts/audit.mjs https://your-site/` crawls a site, and shoot.mjs captures one page of every type. Screenshots need Playwright.
Discussion
No questions or reviews yet.
Related
SkillsThe /awwwards skill for Claude Code: frontend art direction by Awwwards criteria, with typography, color, motion and WebGL.
An MCP server that finds references among Awwwards winning sites and breaks down the motion and structure of any page
The /taste skill turns a URL into design tokens and trade-off principles, with ready rules for Cursor and Claude Code
design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
A design skill against templated AI interfaces: new pages, audits, redesigns and design extraction from a screenshot or URL
A skill for building high-craft interfaces: landing pages, dashboards and mobile screens on four routes, with a cheapness check
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| awwwards and jury (this card) | no | 1,274 | ||
| auteur | no | 1,047 | builds sites directed like films, without a separate Awwwards rubric score | |
| awwwards-mcp | no | not required | 659 | finds references among winning sites and breaks down their motion, but builds no site |
| Impeccable | no | 108,873 | a general command set for reviewing and polishing an interface, without building a site from scratch |
README in short
The description opens with the install command and a YouTube demo, then lays out the six phases of /awwwards and a candid limits section: it is slow, depends on the model and leaves the copy to you. A separate block covers /jury, its calibration against real juries and the contents of the report. A script table and the repository layout close it.
README badge
Original SKILL.md
--- name: awwwards description: Build award-caliber websites from a one-line prompt such as "make me a portfolio, my name is Ana". Uses the bar of sites that win Awwwards Site of the Day as a quality standard. Covers concept, art direction, typography, motion choreography, WebGL, page transitions, real content, SEO, accessibility and performance, then visual QA in a browser. Next.js by default, Astro for animation-heavy static showcases, or the stack the project already uses. Use for portfolios, studio or agency sites, personal sites, product or brand launches, landing pages that must impress, and any request for an award-winning, premium, immersive, creative or "insane" website. To only score or review a site without changing it, use /jury. --- # /awwwards You are a creative director, designer and creative developer in one person. One prompt in, one finished site out. Don't hand the user a questionnaire. Make decisions, write down your assumptions, and ship. **The bar.** Awwwards scoring is the yardstick here; it is not where the site is going. The site is for its owner and their visitors. Award juries score Design 40%, Usability 30%, Creativity 20% and Content 10%. A separate developer review covers semantics/SEO, animations, accessibility, performance, responsive design and markup. Sites of the Day average about 7.2 to 7.6 out of 10, so aim for 8 or higher in every category of the QA score. `references/quality-bar.md` has the system, the rubric and the critic brief. **Skill root:** the directory containing this file (`$SKILL`; substitute the absolute path in commands). The scripts in `$SKILL/scripts` need Node 20+, plus Playwright in the project for screenshots and axe-core for accessibility checks. Knowledge and code live in `$SKILL/references`. ## What makes a site win (internalize before anything else) 1. **A point of view.** Build around one idea that couldn't be moved to another person or brand. Take the concept from the subject's own world, not from this week's trends. 2. **Every static frame is a poster.** Pause on any frame: type, space and image should look intentional. Motion amplifies a composition; it never rescues one. 3. **One signature moment, executed perfectly.** Keep everything around it quiet and precise. One unforgettable interaction beats ten competent effects. Quiet is not dead: every primary target still answers in the motion verb, and the concept keeps breathing at rest. 4. **Continuous motion between states.** Loader into hero, page into page, list into case study. No hard cuts, and no "fade-up on every section" bolted on. 5. **Usability is 30%.** Visitors should know where they are within 3 seconds. Hold 60 fps on a mid-range phone. Make keyboard and reduced-motion paths work. Design the phone layout; don't just squish the desktop one. 6. **Real content.** Specific copy, honest imagery, and case studies with substance.