awwwards skill
The /awwwards skill for Claude Code: frontend art direction by Awwwards criteria, with typography, color, motion and WebGL.
- 59 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill describes layout and design techniques and runs nothing itself
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/awwwardsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill describes layout and design techniques and runs nothing itself
This is third-party code. Review the repository files before installing.
What it does
The `/awwwards` skill switches Claude Code into a senior creative director mode for layout and interfaces, aimed at Awwwards Site of the Day level, a score of 8.0 or higher. It runs manually or on its own for frontend work. The agent first sets an art direction: emotion, archetype and industry context, and only then writes code. The set holds the main `SKILL.md` and seven references: typography with fluid `clamp()` scales and pairings, oklch color systems, layouts such as bento grids, GSAP motion, CSS techniques such as scroll-driven animation and `:has()`, WebGL with Three.js and shaders, and studio philosophies with Awwwards jury criteria. A recommended `CLAUDE.md` snippet fixes principles: at most two fonts, animate only `transform` and `opacity`, load in under three seconds.
Who it is for. Frontend developers and designers building landing pages and portfolios in Claude Code who want a distinctive result instead of a templated one.
Good fit when
- A studio landing page must look premium rather than like a standard grid template
- A page needs a font pair and a fluid size scale without breakpoints
- The page hero needs scroll animation on GSAP without losing frame rate
- A Three.js scene must stay within a performance budget
Not a fit when
- A business interface or admin panel is needed where clarity and speed matter more than flair
- The project is bound by a strict brand book with fixed fonts and colors
- The page must run on weak devices without WebGL and heavy animation
Example request
Invoke /awwwards and propose an art direction for a recording studio landing page, then build the page hero with scroll animation.Limitations
The skill gives taste guidance, not verifiable guarantees: an Awwwards score of 8.0 depends on the jury and the specific site. It ships as a folder with `SKILL.md` and references with no package manager, and the clone command uses SSH. The recommended `CLAUDE.md` snippet makes the agent call the skill for any frontend task, which wastes context on simple edits. No license is declared in the repository, and the trends in the references are dated 2025–2026.
How to disable. Delete the `~/.claude/skills/awwwards` folder and, if you added it, the paragraph about the skill from `CLAUDE.md`.
FAQ
How do I invoke the skill?
Manually with `/awwwards`, or the agent picks it up on its own when the task involves frontend and interfaces.
What is in the references?
Seven files: typography, color, layouts, motion, CSS techniques, WebGL and studio philosophy with jury criteria.
Why the `CLAUDE.md` snippet?
It requires `/awwwards` for any frontend work and fixes principles: art direction before code, two fonts, animating `transform` and `opacity`.
Does it suit Codex?
The README describes it for Claude Code. The `SKILL.md` files can be attached to another agent, but compatibility is not claimed.
What is the quality target?
Awwwards Site of the Day level with a score of 8.0 or higher. This is a design target, not an outcome the skill guarantees.
Discussion
No questions or reviews yet.
Related
Skills/awwwards builds an animated WebGL site from one line, and /jury scores any site against the Awwwards jury criteria
An MCP server that finds references among Awwwards winning sites and breaks down the motion and structure of any page
A Claude Code skill collection for copywriting, advertising, SEO and interface design: Ogilvy, editing, rules and CSS techniques.
35 skills for Cursor, Claude and Codex: design systems from HTML and mocks, image generation, plan interviews and handoff.
The /fireworks-design command tries 6–8 styles in parallel in Claude Code, scores them on six criteria and polishes the best.
A web-design skill for Claude Code: a DESIGN.md spec first, then code that follows it
README in short
The skill starts from art direction, not code. Seven references give concrete techniques instead of general advice about beauty.