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.

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.

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

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

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

The helpers in awwwards/scripts/ work on any site, so you can use them on their own:

node ~/.claude/skills/awwwards/scripts/audit.mjs https://your-site.com/
node ~/.claude/skills/awwwards/scripts/shoot.mjs https://your-site.com/ --crawl --nav

awwwards/
  SKILL.md            the workflow and the hard rules
  references/
    quality-bar.md    scoring weights, real winner scores, rubric, critic brief
    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, no dependencies except Playwright (and axe-core) for screenshots
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
  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 this one has it run builds and scripts on your machine. Read awwwards/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).
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 are out of date.

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

MIT © juliobsz