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

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.

Click on the thumbnail to watch the demo on YouTube

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

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

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

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

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

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 every category hits 8/10.

Its quality bar is the work that wins Awwwards Site of the Day. The site doesn't need to be submitted anywhere; it just has to be that good.

Ask in one line and let the agent decide. It writes its assumptions down instead of running a questionnaire.

make me a portfolio, my name is Ana
a site for my architecture studio in Lisbon, we do small houses
launch page for a mechanical keyboard called Kestrel, it should feel insane
redesign this landing page so it could win site of the day

Better input gives a better site. Your real name, what you do, where you are and two or three real projects let the concept come from your story instead of a placeholder.

• Next.js (App Router) by default, and for anything with app features.
• Astro for content-only showcases where motion is the product: about 75 KB of JS against about 250 KB.
• Your stack when you run it inside an existing project.

All three use GSAP (every plugin is free now), Lenis for smooth scroll and OGL for WebGL. The motion engine is framework-agnostic TypeScript, shipped as documented code instead of a template: it runs on one clock, reverts every effect on navigation, runs transitions in parallel with the next page loading, and keeps content visible without JavaScript or with reduced motion.

• One idea, one signature moment, everything else quiet.
• Every frame works as a still poster before any motion is added.
• The native cursor stays. Reduced motion gets a complete, calm site. Phones get a composed layout, not a shrunken one.
• No fake awards, logos or metrics. No lorem ipsum. No em dashes or "elevate your brand" copy.
• No purple gradients, glassmorphism or three-card grids unless the concept truly calls for them.

• It takes a while. A full run is concept, design system, build and several rounds of screenshots and fixes. Expect a long session and heavy token use, not a quick snippet.
• Results depend on the model. It was built and tested with Claude Code, Antigravity and Codex. The concept and the visual QA are only as good as the model doing them.
• Content is yours to finish. Without real projects, photos and copy, the site ships with clearly marked placeholders that you replace.
• 8/10 is its own score. The rubric keeps it honest, but you're the final judge.

Scores any website the way an Awwwards jury would. It doesn't have to be a site /awwwards built.

/jury https://your-site.com
/jury score this project
/jury https://mine.com vs https://theirs.com

It shoots one page of every type on desktop, on a throttled phone, with reduced motion and from the keyboard. It measures LCP, CLS, FPS, axe and hover feedback, and audits SEO and metadata. Then a fresh critic that never sees the code, the design notes or your pitch scores Design, Usability, Creativity and Content, plus the six developer areas. Every number cites a screenshot or a measurement, and the fixes come ranked by how much score they'd gain.

You get .jury/<host>/scorecard.md, next to every screenshot and report behind it. Given a local project, it builds and scores the production output, never the dev server. Re-scoring after fixes uses a new critic, so it never anchors on the old numbers.

Checked against real juries. Run blind on two October 2026 Sites of the Day, the critic scored 6.15 and 6.10 where the jury gave 7.28 and 7.24: stricter, by a steady 1.1. So the card shows the critic's score and a jury estimate, and the band comes from the estimate. The critic is hardest on what juries rarely check (accessibility, SEO, performance on a throttled phone), which is why its fix list catches things a jury lets slide.

/awwwards runs the same rubric, scripts and blind critic in its own QA loop, so a site it built and a site you built are judged the same way.

• It's an estimate. /jury isn't affiliated with Awwwards. The criteria and weights are theirs, and public. The jury estimate rests on two sites, both winners; how it holds for weaker sites isn't measured yet.
• It judges stills and measurements. How motion feels, and sound, stay out of the score.
• It needs a page it can reach. Anything behind a login can't be scored; give it a local build instead.

The helpers work on any site, so you can use them on their own. The QA scripts live in jury/scripts/, and /awwwards carries a copy:

# Path depends on your agent (e.g. ~/.gemini/config/skills/ or ~/.claude/skills/)
node <skill-path>/jury/scripts/audit.mjs https://your-site.com/
node <skill-path>/jury/scripts/shoot.mjs https://your-site.com/ --crawl --nav

awwwards/
  SKILL.md            the workflow and the hard rules
  references/
    quality-bar.md    scoring weights, rubric, critic brief  (copied from jury/)
    concepts.md       finding an idea that can't be moved to someone else
    art-direction.md  patterns from recent winners, archetypes, AI defaults to avoid
    typography.md     curated free fonts with sources, scales, setting display type
    layout.md         grids, section families, heroes, mobile composition
    motion.md         choreography and recipes (loader handoff, iris, shared element, index preview…)
    webgl.md          DOM-synced image planes, fullscreen shaders, performance rules  (generated)
    patterns.md       proven structures from test builds (driver module, sticky stage…)
    content.md        voice, honest placeholders, case-study structure
    quality.md        accessibility, performance budgets, bugs found in real builds
    engine.md         framework-agnostic motion engine          (generated)
    nextjs.md         Next.js adapter, layout, metadata, fonts  (generated)
    astro.md          Astro adapter and layout                  (generated)
    ship.md           final checks and deploy
  scripts/            Node helpers; shoot, audit, browser and serve are copied from jury/
jury/
  SKILL.md            the review workflow: target, evidence, blind critic, score card
  references/
    quality-bar.md    scoring weights, rubric, critic brief
    calibration.md    the critic against real juries, for the score card (never shown to the critic)
  scripts/            shoot, audit, browser, serve: no dependencies except Playwright (and axe-core)
tests/
  nexttest/           Next.js app the generated references are copied from
  astrotest/          Astro app, same engine
  _gen/               templates and build.py that write the generated references and copies
  smoke.mjs           browser smoke test run against both fixtures in CI
.claude-plugin/       Claude Code plugin marketplace
.github/              CI workflow, issue and PR templates

A skill is instructions your agent follows, and these have it run builds and scripts on your machine. Read each SKILL.md before installing, as you would any code you run. Nothing is deployed without your confirmation.

Issues and pull requests are welcome, especially for bugs found in real builds and new patterns in awwwards/references/.

1. Fork the repo and create a branch.
2. Make the change. A skill is a folder with a SKILL.md; the skills CLI finds any top-level folder that has one. For the Claude Code plugin, also add an entry to .claude-plugin/marketplace.json. Engine and stack code lives in tests/nexttest and tests/astrotest, not in the markdown: edit it there and run python tests/_gen/build.py (see tests/README.md). The QA scripts and the rubric live in jury/, and the same command copies them into awwwards/, so edit them in jury/.
3. Test it: npx skills add . -g -a claude-code, then run the skill in an agent.
4. Open a pull request. The template asks what changed and what you built to check it; CI checks script syntax, SKILL.md frontmatter, the plugin marketplace and that the skills CLI finds every skill, on Linux, macOS and Windows. It also builds and smoke-tests both fixture apps and fails if the generated references or copies are out of date.

Found a bug or have an idea? Open an issue.

MIT © juliobsz