/awwwards

An agent skill that builds award-caliber websites from one line.

Demo · Install · Usage · How it works · Limits · /jury

> make me a portfolio, my name is Julio

That's the whole brief. The agent works as creative director, designer and creative developer in one, then hands back a site it has already checked in a real browser.

Quick start

npx skills add wheresryan22/anatomy -g   # optional: interactive isometric explainer figures
npx skills add juliobsz/skills -g

Open a new agent session, then type /awwwards or just ask for a website.

The same repo has /jury, which scores any site the way an Awwwards jury would: yours, one /awwwards built, or a competitor's.

Demo

Click on the thumbnail to watch the demo on YouTube

Install

Install with the skills CLI. It runs through npx, so there's nothing to install first, and it detects your agents (Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Copilot and more) and lets you pick.

npx skills add juliobsz/skills -g

Command	Result
npx skills add juliobsz/skills -g -a claude-code	Claude Code only (use codex, cursor… for others)
npx skills add juliobsz/skills	This project only, instead of your user folder
npx skills add juliobsz/skills -g --skill jury	One skill only (awwwards or jury)
npx skills add juliobsz/skills -g --copy	Copy the files instead of linking them
npx skills update -g	Update to the latest version
npx skills remove awwwards jury -g	Uninstall

The CLI collects anonymous usage data. Set DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 to turn it off.

Claude Code plugin

If you prefer Claude Code's plugin system, which updates the skill for you:

/plugin install awwwards --marketplace juliobsz/skills
/plugin install jury --marketplace juliobsz/skills

On Claude Code before 2.1.275, run /plugin marketplace add juliobsz/skills and then /plugin install awwwards@juliobsz (or jury@juliobsz). The skills then run as /awwwards:awwwards and /jury:jury. Use the plugin or the skills CLI, not both, or each skill shows up twice.

Google Antigravity (CLI, IDE & 2.0)

For Google Antigravity across all surfaces (CLI agy, Antigravity IDE, Antigravity 2.0):

• Workspace: If working inside this repository, .agents/skills.json automatically registers awwwards and jury. In your own project, copy them into your .agents/skills/ directory:

  mkdir -p .agents/skills
  cp -r /awwwards /jury .agents/skills/
  

• Global: Copy or link the folders to your global Antigravity skills directory:

  mkdir -p ~/.gemini/config/skills
  cp -r awwwards jury ~/.gemini/config/skills/
  

Start agy, open Antigravity IDE, or launch Antigravity 2.0 Desktop and trigger the skills via /awwwards or /jury.

Manual install

Copy the awwwards/ folder (and jury/, if you want it) into your agent's skills directory, for example ~/.claude/skills/awwwards, ~/.gemini/config/skills/awwwards or .agents/skills/awwwards. Any agent that reads SKILL.md skills can use them. Each folder works on its own.

Works with /anatomy

/anatomy by wheresryan22 is an open-source skill for detailed, interactive isometric figures that explain an idea as a real physical object. Install it next to /awwwards and the site can get one "how it works" section built as a real explainer figure, styled to the site's palette and grid.

npx skills add wheresryan22/anatomy -g

It's optional. Without it, /awwwards builds that section another way, and tells you at the end when a figure would have helped.

Requirements

• Node 22.20+ for the skills CLI. The helper scripts need Node 20+.
• Playwright in the site's project for screenshots and the OG image, and axe-core for the accessibility pass. /awwwards installs both as dev dependencies when it needs them. /jury leaves the project it reviews alone and installs them once into ~/.cache/jury. Both use a Chromium you already have when they can.
• A model that can read images, so the QA loop can look at its own screenshots.
• A Vercel, Netlify or Cloudflare account only if you want it to deploy.

Troubleshooting

• /awwwards or /jury isn't found. Start a new session; agents read their skills folder at startup. Then run npx skills list -g to see where it was installed.
• It shows up twice. You installed it two ways (for example the skills CLI and the plugin). Remove one with npx skills remove awwwards -g or /plugin uninstall awwwards@juliobsz.
• Installed into the wrong agent. Name the target with -a, for example -a codex.
• Screenshots fail with "Playwright not found". Run npm i -D playwright in the site's project. If it reports no Chromium, run npx playwright install chromium once.

Why

Ask an agent for "a portfolio" and you get the same site everyone gets: purple gradient, three cards, "elevate your brand". This skill replaces that default with a process.

• A concept that belongs to you. Three ideas from different territories (your name, your craft, your place), scored on originality and fit.
• A real design system. Palette by role, curated free fonts, grid and motion language, written to DESIGN.md and tested against a "genericness check".
• Motion with intent. GSAP, Lenis and WebGL (OGL) where they earn their place, with one signature moment and everything else quiet.
• Real copy. No lorem ipsum, fake awards or invented metrics. Anything made up is marked as a placeholder and listed at the end.
• Verified, not assumed. A production build, a crawling audit and real-browser screenshots on desktop, mobile and reduced motion, scored against a rubric until