by juliobsz
An agent skill that builds award-caliber websites from one line
# Add to your Claude Code skills
git clone https://github.com/juliobsz/skillsSee how skills compares with popular alternatives.
skills is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by juliobsz. An agent skill that builds award-caliber websites from one line. It has 79 GitHub stars.
skills's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/juliobsz/skills" and add it to your Claude Code skills directory (see the Installation section above).
skills is primarily written in JavaScript. It is open-source under juliobsz on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh skills against similar tools.
No comments yet. Be the first to share your thoughts!
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
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.
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.
https://github.com/user-attachments/assets/0ac28c25-9796-4bce-8fa6-4dcc6df55b8b
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.
/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.
/awwwards isn't found. Start a new session; agents read their skills folder at startup.
Then run npx skills list -g to see where it was installed.npx skills remove awwwards -g or /plugin uninstall awwwards@juliobsz.-a, for example -a codex.npm i -D playwright in the site's
project. If it reports no Chromium, run npx playwright install chromium once.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.
DESIGN.md and tested against a "genericness check".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.
| 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) |
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.
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/ --nav
| Script |