build-awwwards-quality-sites

Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo sourcing, photo avatars, accessibility, and performance safeguards. Use when a user asks for an Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website, or explicitly requests this visual and motion system.

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

73%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, disciplined instruction-only skill with a clear phase sequence and an explicit final validation checklist. Its main gap is actionability: tool selections are named but without code, commands, or concrete parameter values to execute against.

Suggestions

Add short executable snippets for the recurring setup decisions: initializing the chosen smooth-scroll engine and wiring it to GSAP ScrollTrigger, plus a reduced-motion bypass pattern.

Give concrete values for vague directives — e.g., a device-pixel-ratio cap, stagger timings for word reveals, and named build/validation commands in the validation section.

Consolidate the repeated reduced-motion and single-scroll-engine rules into one authoritative section and reference it from the others to trim redundancy.

Dimension	Reasoning	Score
Conciseness	The body is dense, imperative, and free of explanations of concepts Claude already knows, but directives repeat across sections — reduced-motion handling appears in sections 3, 4, 5, and 7, and the single-smooth-scroll-engine rule in sections 1, 4, and 7 — so it could be tightened.	4 / 5
Actionability	It names concrete tools (GSAP, ScrollTrigger, Lenis, Locomotive Scroll, Three.js, Iconify/Solar, Logo Ipsum, Aura.build) but provides no code, commands, or parameter values — 'Cap device pixel ratio', 'restrained stagger', and 'Run the production build' lack the executable specificity of the anchor-4/5 examples, while being far more concrete than anchor-2's high-level hints.	3 / 5
Workflow Clarity	Seven clearly sequenced phases (direction, assets, hero, motion, Three.js, quality bar, validation) end in an explicit validation checklist ('Run the production build and fix every failure', verify keyboard/reduced-motion/single-engine behavior) with a fix-and-retry feedback loop, matching anchor 5.	5 / 5
Progressive Disclosure	No bundle files exist, so all guidance is inline in well-organized sections; at roughly 60 body lines it slightly exceeds the under-50-line simple-skill exception, and content like the icon/logo sourcing policy or Three.js cleanup list could live in one-level-deep references.	4 / 5
	Total	16 / 20 Passed

Description

96%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it concisely enumerates concrete capabilities in third person and pairs them with an explicit, synonym-rich 'Use when' trigger clause. The only weakness is modest overlap risk with general premium-web-design skills.

Dimension	Reasoning	Score
Specificity	The description lists many concrete capabilities — 'GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo sourcing, photo avatars, accessibility, and performance safeguards' — in third-person voice, with comprehensive coverage matching the anchor-5 example.	5 / 5
Completeness	It explicitly answers both what ('Art-direct and implement distinctive, motion-rich...websites' with a detailed capability list) and when (a concrete 'Use when...' clause with specific trigger phrases), matching the anchor-5 example structure.	5 / 5
Trigger Term Quality	'Use when a user asks for an Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website' provides comprehensive natural-term coverage with multiple synonyms, plus site types ('marketing, editorial, portfolio, and landing websites') users would naturally say.	5 / 5
Distinctiveness Conflict Risk	The Awwwards/motion-led niche is clear and distinct, but broader requests like 'premium' or 'interactive' websites could overlap with general web-design or site-building skills, so minor overlap risk remains.	4 / 5
	Total	19 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: MengTo/Skills
Path: agent-skills/web-design/build-awwwards-quality-sites/SKILL.md
Commit: 798db0a

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.