⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
awwwards
Build award-caliber websites from a one-line prompt such as "make me a portfolio, my name is Ana". Uses the bar of sites that win Awwwards Site of the Day as a quality standard. Covers concept, art direction, typography, motion choreography, WebGL, page transitions, real content, SEO, accessibility and performance, then visual QA in a browser. Next.js by default, Astro for animation-heavy static showcases, or the stack the project already uses. Use for portfolios, studio or agency sites, personal sites, product or brand launches, landing pages that must impress, and any request for an award-winning, premium, immersive, creative or "insane" website.
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
// README
/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
https://github.com/user-attachments/assets/0ac28c25-9796-4bce-8fa6-4dcc6df55b8b
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.
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.
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. The skill installs it as a dev dependency when it needs it, 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.
/awwwardsisn't found. Start a new session; agents read their skills folder at startup. Then runnpx skills list -gto 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 -gor/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 playwrightin the site's project. If it reports no Chromium, runnpx playwright install chromiumonce.
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.mdand 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
| Phase | What happens |
|---|---|
| Brief | Infers who it's for, the audience and the site's job. Missing facts become written assumptions |
| Concept | Three concepts from different territories (your name, your craft's materials, your place, how you work, a formal system), scored on originality and fit. The winner becomes a one-line idea with a signature moment |
| Art direction | Palette by role, type pairing from a curated free-font library, grid, rhythm and motion language, all written to DESIGN.md. Then a "genericness test" kills anything an average model would have produced |
| Build | Semantic HTML that looks finished with motion off. Then reveals, page transitions, a loader that tracks real loading, and the signature moment |
| QA loop | Production build, a crawling audit (SEO, metadata, accessibility, weight, placeholder copy, AI-copy tells) and real-browser screenshots on desktop, mobile, reduced motion and mid-transition. The agent reads every frame, scores itself against the rubric and fixes things until every category hits 8/10 |
| Ship | OG image, favicon, sitemap, robots, then deploy to Vercel, Netlify or Cloudflare (only after you confirm) |
Stack
- Next.js (App Router) by defa
// HOW IT'S BUILT
KEY FILES