juliobsz/skills

An agent skill that builds award-caliber websites from one line

What it is

/awwwards is a skill (plugin) for AI‑agent toolchains such as Claude Code, Codex, Cursor, Gemini‑CLI, Copilot, etc. When you give an agent a one‑sentence brief like “make me a portfolio, my name is Julio” the skill drives the agent through a full web‑site creation pipeline – from concept generation, design‑system definition, code generation, automated QA, to optional deployment on Vercel/Netlify/Cloudflare.

How it works (high‑level)

  1. Brief parsing – the model extracts the client’s name, craft, location and any project details, filling missing facts with written assumptions.
  2. Concept generation – three distinct concepts are produced, scored for originality/fitting the brief; the best becomes the site’s core idea and signature animation.
  3. Art‑direction – a palette, free‑font pairings, grid, rhythm and motion language are written to a DESIGN.md. A “genericness test” discards bland AI‑default designs.
  4. Build – semantic HTML (Next.js by default, or Astro/any existing stack) is generated, with motion powered by GSAP, Lenis (smooth scroll) and OGL (WebGL). Motion is optional and respects reduced‑motion settings.
  5. QA loop – the generated site is built, then a sub‑agent runs a crawling audit (SEO, accessibility via axe‑core, weight, placeholder detection) and takes real‑browser screenshots (desktop, mobile, reduced‑motion). It scores the site against a rubric (aim ≥ 8/10) and iteratively fixes issues.
  6. Ship – creates OG image, favicon, sitemap, robots.txt and, after user confirmation, deploys to a cloud host.

What you get

  • A complete, production‑ready website tailored to the brief.
  • Design assets (palette, typography, motion specs) documented in DESIGN.md.
  • Automated quality checks (accessibility, performance, SEO) with a clear score.
  • Optional deployment scripts for Vercel, Netlify or Cloudflare.
  • Stand‑alone helper scripts (audit.mjs, shoot.mjs, og.mjs, etc.) that can be run on any site.

Who it’s for

  • Designers or developers who want an AI‑driven “creative director” to produce a high‑quality portfolio, product landing page, or studio site.
  • Teams using Claude Code, Codex, Cursor, Gemini‑CLI, Copilot, or any agent that supports the skills CLI.
  • Users comfortable running Node/Playwright scripts locally and who can review placeholder content before publishing.

Limitations

  • The process is slow and token‑heavy; it’s meant for a full session, not a quick snippet.
  • Quality depends on the underlying LLM (tested with Claude Code and Codex).
  • Generated copy may contain placeholders that need manual replacement.
  • Requires Node ≥ 22.20, Playwright, axe‑core, and a model capable of image‑based reasoning.

Getting started

# install the skill globally (or into a specific agent)
npx skills add juliobsz/skills -g
# start a new agent session and invoke the skill
/awwwards   # or just ask for a website

You can also install the optional /anatomy skill for interactive isometric explainer figures.


All information above is taken directly from the repository’s README; no additional features are inferred.

Related

  • Project
  • Project
  • Project
  • Project