# /awwwards: an agent skill that turns one line into a designed website

> The juliobsz/skills repository packages a prompt workflow as an agent skill that acts as creative director, designer and creative developer, then checks the result in a real browser, with a second skill, /jury, that scores any site the way an awards jury would. It fits developers who want a repeatable design process rather than a generic AI page, and its cost is the stack it assumes.

**juliobsz/skills** — An agent skill that builds award-caliber websites from one line

- Repository: https://github.com/juliobsz/skills
- Stars: 882 · Forks: 35
- Language: JavaScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/juliobsz-skills

## One line in, a site out, with the agent doing three jobs at once

The whole premise fits in a code block:

```
> make me a portfolio, my name is Julio
```

The readme's summary of what happens next is that 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.

That last clause is the substantive part. The interesting claim is not that an agent can generate a landing page, which by now is unremarkable. It is that the agent runs a browser against its own output before returning it, and can look at what it produced. The requirements list confirms the mechanism: Playwright in the site's project for screenshots and the OG image, and axe-core for the accessibility pass, and a model that can read images, so the QA loop can look at its own screenshots. The agent is not just generating markup, it is looking at the rendered page and reacting to it.

The problem being solved is stated in the Why section, and it is a recognisable one. Ask an agent for a portfolio and you get the same site everyone gets, described as a purple gradient, three cards and the usual stock phrase about taking a brand to the next level. The skill replaces that default with a process, and the readme's bullet list starts with a concept that belongs to you, three ideas from different territories.

The audience is developers using Claude Code, Codex, Cursor, Gemini CLI, Antigravity, OpenCode or Copilot, and the repository is a set of agent skills, not a web framework.

## Installing the skills with the skills CLI

Installation goes through the skills CLI, and the readme is explicit that it runs through npx so there is nothing to install first. It detects your agents and lets you pick:

```bash
npx skills add juliobsz/skills -g
```

The -g flag installs into your user folder, which is what you want for a skill you use across projects. The documented variations cover the other cases. Adding -a claude-code targets Claude Code only, with codex and cursor named as the other values. Dropping -g installs into the current project instead of the user folder. The --skill flag takes one skill only, awwwards or jury. The --copy flag copies the files instead of linking them, which matters if your agent reads a different directory than the CLI links into.

Maintenance commands follow the same shape:

```bash
npx skills update -g
```

```bash
npx skills remove awwwards jury -g
```

One thing to know before you run any of it: the CLI collects anonymous usage data, and it can be turned off with the DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 environment variables. That is worth setting if your policy requires it, and it is easier to set before the first run than to reason about afterwards.

The repository also ships an optional second skill, /anatomy, from a different author, for interactive isometric explainer figures. Without it, the main skill builds that section another way and tells you at the end when a figure would have helped, which is a nice touch of honest reporting.

## Two skills, and the second one scores the first

The same repository contains a second skill, /jury, which scores any site the way an Awwwards jury would. The readme is explicit about the scope: yours, one built by /awwwards, or a competitor's.

That pairing is the design idea worth noticing. A build skill and an independent review skill in the same repository, both installable separately, means the review is not the agent congratulating itself on the work it just did in the same breath. It is a second prompt, a different lens, applied to a rendered page.

Installing just one is a supported configuration, and the --skill flag exists for it. The Claude Code plugin route has the same granularity:

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

On Claude Code before version 2.1.275 the commands differ, using /plugin marketplace add juliobsz/skills followed by /plugin install awwwards@juliobsz or jury@juliobsz, after which the skills run as /awwwards:awwwards and /jury:jury. The readme also warns not to use the plugin and the skills CLI together, or each skill shows up twice, and the troubleshooting section repeats that point with the removal commands for each method.

The two-skills-one-repo shape is also why the repository has .agents/, .claude-plugin/, awwwards/, jury/ and tests/ at the top level. There is no build output and no runtime dependency: the deliverable is a folder of instructions that an agent reads.

## Manual and Antigravity installs, for agents the CLI misses

Because the deliverable is just a folder of skill files, a manual install is trivially possible. The readme says to copy the awwwards folder, and jury if you want it, into your agent's skills directory, for example ~/.claude/skills/awwwards, ~/.gemini/config/skills/awwwards or .agents/skills/awwwards. Any agent that reads SKILL.md skills can use them, and each folder works on its own.

Google Antigravity has a dedicated section, covering the CLI called agy, the Antigravity IDE and Antigravity 2.0. Inside a repository, a .agents/skills.json file automatically registers awwwards and jury. In your own project you copy the folders into a .agents/skills directory:

```bash
mkdir -p .agents/skills
cp -r <path-to-repo>/awwwards <path-to-repo>/jury .agents/skills/
```

And globally, into the global Antigravity skills directory:

```bash
mkdir -p ~/.gemini/config/skills
cp -r awwwards jury ~/.gemini/config/skills/
```

The path split between .agents/ and ~/.gemini/config/ is worth noting, because it is a reminder that there is no single standard location for agent skills yet, and the layout your agent reads depends on which agent you are running.

One more constraint applies to every install method: open a new agent session afterwards, and then type /awwwards or just ask for a website. Agents read their skills folder at startup, which is the most common reason a freshly installed skill appears to be missing.

## What the skill needs from your machine before it can run

The requirements list is where the real cost of this approach shows up.

Node 22.20 or later is needed for the skills CLI, and the helper scripts need Node 20 or later. Playwright is required in the site's project for screenshots and the OG image, and axe-core for the accessibility pass. The /awwwards skill installs both as dev dependencies when it needs them, while /jury leaves the project it reviews alone and installs them once into ~/.cache/jury. Both use a Chromium you already have when they can.

Two requirements are the interesting ones. A model that can read images is required, so the QA loop can look at its own screenshots. Without a vision-capable model the entire premise collapses, because the agent can build the page but cannot judge it. And a Vercel, Netlify or Cloudflare account is needed only if you want it to deploy, which is a sensible way to draw the line.

The troubleshooting section is short and practical, and it tells you what the failure modes actually are. If the skill is not found, start a new session and then run npx skills list -g to see where it was installed. If it shows up twice, you installed it two ways, and you remove one with npx skills remove awwwards -g or the plugin uninstall command. If it went to the wrong agent, name the target with -a. And if screenshots fail with a Playwright not found message, install playwright as a dev dependency in the site's project and run npx playwright install chromium once if no browser is present.

## A repository of instructions, licensed MIT and moving daily

The project is MIT licensed, the repository is not archived, and the last push was on 2026-10-20. There are no GitHub releases, so the version history is in the repository rather than in tags.

The top-level layout is small and telling: .agents/, .claude-plugin/, the two skill folders awwwards/ and jury/, a tests/ directory, the licence and the readme. There is no package manifest for the skill itself, no build step, and no runtime code to audit. The primary language is listed as JavaScript, which points to the helper scripts rather than to the skills.

The topics give a picture of what the skill is expected to produce and with what: astro, nextjs, gsap, webgl, creative-coding, frontend, web-design, and awwwards and claude-skills, agent-skills, codex, claude-code. So the output is expected to be a real site, in one of the mainstream frameworks, with motion and possibly 3D work, and the reference point for quality is the Awwwards gallery.

The MIT licence matters here more than it would for a library, because the value in this repository is the instructions rather than the code, and anyone can read the skill folders, adapt the process to their own taste, and redistribute the modified version under the same terms. The trade is that a fork with a different process is a fork you maintain, and the marketplace entry does not update itself.

## Conclusion

This repository fits a developer who wants an agent to design and build a site against a defined process, and to have the result reviewed by a separate scoring skill rather than by their own taste. It does not fit a team that cannot use a vision-capable model, that does not want Playwright and axe-core in the project, or that needs output matching an existing design system without the agent taking the lead. Before running it, install Node 22.20 or later for the skills CLI, add the skill with npx skills add juliobsz/skills -g, and start a new agent session, since agents read their skills folder only at startup.

## FAQ

### How do I install the /awwwards agent skill?

Run npx skills add juliobsz/skills -g, which detects your agents and lets you pick, then open a new agent session since agents read their skills folder at startup. You can then type /awwwards or simply ask for a website.

### What is the /jury skill and how does it differ from /awwwards?

The same repository ships /jury, which scores any site the way an Awwwards jury would, whether it is yours, one built by /awwwards, or a competitor's. It leaves the project it reviews alone and installs Playwright and axe-core once into ~/.cache/jury.

### What does the /awwwards skill need before it can run?

Node 22.20 or later for the skills CLI and Node 20 or later for the helper scripts, Playwright and axe-core in the site's project, and a model that can read images so the QA loop can look at its own screenshots. A Vercel, Netlify or Cloudflare account is needed only if you want it to deploy.

### Why is my newly installed skill not showing up?

Agents read their skills folder at startup, so you need to start a new session. Then run npx skills list -g to see where it was installed, and if it shows up twice you installed it two ways, for example the skills CLI and the Claude Code plugin, and should remove one of them.

### Does the skills CLI send usage data?

The README states that the CLI collects anonymous usage data and that you can turn it off by setting DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 before running it.

## Sources

- [Issues](https://github.com/juliobsz/skills/issues)
- [juliobsz/skills on GitHub](https://github.com/juliobsz/skills)
- [License: MIT](https://github.com/juliobsz/skills/blob/main/LICENSE)
- [README](https://github.com/juliobsz/skills/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/juliobsz-skills