/awwwards — Creative Web Architect Skill

A Claude Code skill for building award-winning websites using a local collection of 257 reference projects.

What This Is

A complete Claude Code slash command (/awwwards) that acts as a senior creative developer + art director. It has deep knowledge of Awwwards SOTD/SOTM winning sites, design systems, copywriting, performance, accessibility, and Arabic typography.

Commands

Command	What it does
/awwwards	Smart onboarding — detects your project state and guides you
/awwwards mix [description]	Creative direction + tech recipe + opens reference repos
/awwwards find [pattern]	Hunt real code across 257 reference repos
/awwwards scan [url]	Analyze any live website: stack, tokens, techniques
/awwwards steal [interaction] → [path]	Transplant an interaction into your project
/awwwards assets [description]	Find + copy real assets (models, videos, fonts, shaders)
/awwwards create [description]	Full build: design system + docs + code + assets
/awwwards template [type]	Scaffold from a battle-tested base template
/awwwards analyze [path]	Analyze existing project → docs + tokens + fixes
/awwwards study [repo-name]	Deep analysis of one reference repo
/awwwards review [path]	Honest design + UX + copy review
/awwwards prototype [description]	Quick HTML mockup for client approval
/awwwards palette [description]	Generate complete color system with contrast ratios
/awwwards why [decision]	Explain any design/tech decision in depth
/awwwards update	Refresh all indexes after adding new repos

Built-in Intelligence

• 6 industry archetypes with reference repos for each
• Anti-AI-slop rules — banned phrases, patterns to avoid
• Arabic typography — line-height, font pairing, RTL rules
• Contrast & tone philosophy — tonal system, visual rhythm
• Performance budget — bundle sizes, lazy loading, Core Web Vitals
• Mobile & touch — interactions that break, device detection
• Accessibility — reduced motion, contrast ratios, semantic HTML
• CMS intelligence — Prismic vs Sanity vs no CMS
• Creative techniques — clip-path, mask reveal, text scramble, distortion...
• Copywriting rules — banned phrases, voice by industry, Arabic copy
• Dark/Light mode — 3-layer token system
• Micro-interactions — buttons, inputs, skeleton, loader
• Deployment — Vercel config, font subsetting, Draco compression
• 5 project templates — battle-tested starting points
• Self-validation — checks its own code before launch

Installation

1. Copy awwwards.md to ~/.claude/commands/awwwards.md
2. Copy run-skill-generator.md to ~/.claude/commands/run-skill-generator.md
3. Place AI-REFERENCE.md and ASSETS-MAP.md at E:\awwwards-sites\
4. Run /awwwards in any Claude Code session

Reference Files

• AI-REFERENCE.md — Full catalog of 257 projects with techniques, aesthetics, ports
• ASSETS-MAP.md — Complete asset map: ~140 GLB models, ~30 videos, ~45 shaders, ~7,400 images
• gen_gallery.js + build_gallery.js — Regenerate the visual GALLERY.html

The Collection

Requires the awwwards-collection repo cloned to E:\awwwards-sites\ — 257 production-quality reference projects across:

• Awwwards SOTD/SOTM clones (103)
• Apple product showcases (9)
• Fashion & agency sites (6)
• Gaming experiences (9)
• Hidden gems: WebGL, shaders, fluid sims (68)
• Modern SaaS landing pages (50)
• New batch: Svelte5, SolidJS, experimental (11)