tponscr-debug

Claude Skill Awwwards — Design skill for Claude Code

Design community

🏆 /awwwards — Elite Creative Direction skill for Claude Code.

How to install Claude Skill Awwwards

This entry records only its repository, not the path inside it, so there is no exact command to give. Open tponscr-debug/claude-skill-awwwards and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Skill Awwwards does

🏆 /awwwards — Elite Creative Direction skill for Claude Code. Awwwards-level design system, typography, color, motion, layout references.

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Pair — Fuse two extracted designs into a single hybrid identity 3.6k ★
Design UI UX — Design UI/UX systems with style guides, palettes, typography, and component specs 2.8k ★

README

/awwwards — Elite Creative Direction Skill for Claude Code

A Claude Code custom skill that transforms your frontend/UI work to Awwwards Site of the Day level (8.0+ score).

What it does

When invoked (manually with `/awwwards` or auto-detected on frontend work), Claude Code operates as a Senior Creative Director with expertise in:

Typography — Fluid clamp() scales, trending font pairings, kinetic text animation
Color Systems — Perceptually uniform palettes, dark mode, gradient recipes
Layouts — Bento grids, broken grids, varied section rhythm, hero patterns
Motion Design — GSAP patterns, scroll reveals, page transitions, cursor effects
CSS Techniques — Scroll-driven animations, container queries, :has(), View Transitions
WebGL / 3D — Three.js, React Three Fiber, shaders, particles, performance budgets
Studio Philosophies — Awwwards judging criteria, industry-specific design languages, 2025-26 trends

Install

git clone git@github.com:tponscr-debug/claude-skill-awwwards.git ~/.claude/skills/awwwards

That's it. Claude Code auto-discovers skills in `~/.claude/skills/`.

Recommended CLAUDE.md addition

Add this to your `~/.claude/CLAUDE.md` (or project `.claude/CLAUDE.md`) to ensure Claude always uses the skill for frontend work:

- Design Standard — Use the `/awwwards` skill: For ANY frontend/UI work, invoke the `/awwwards` skill which contains the complete creative direction framework, design decision process, and links to 7 reference files covering typography, color, layout, motion, CSS techniques, WebGL, and studio philosophies. Key principles:
  - ALWAYS define art direction BEFORE writing code (emotion, archetype, industry context)
  - Typography is 90% of design — use fluid `clamp()` scales, max 2 font families, tight tracking on display
  - Never pure black/white — use oklch() or carefully chosen near-black/near-white values
  - Motion must tell a story — every animation answers