juliobsz/skills

> 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

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

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.

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

Usage

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.

How it works

Stack

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

Principles it won’t break

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

Limits

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

/jury

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

Standalone scripts

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 /jury/scripts/audit.mjs https://your-site.com/
node /jury/scripts/shoot.mjs https://your-site.com/ --crawl --nav

Security

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.

Contributing

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.

Support

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

License

MIT © juliobsz