/awwwards

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

Demo · Install · Usage · How it works · Limits

> 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.

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 --copy	Copy the files instead of linking them
npx skills update -g	Update to the latest version
npx skills remove awwwards -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

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

Manual install

Copy the awwwards/ folder into your agent's skills directory, for example ~/.claude/skills/awwwards. Any agent that reads SKILL.md skills can use it.

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. The skill installs both as dev dependencies when it needs them, and uses a Chromium you already have when it 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