CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

77

Quality

96%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

92%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 tight, well-sequenced directive skill with explicit validation checkpoints and clean section structure. Its only gap is the absence of executable code patterns for the fragile motion/WebGL integration steps it mandates.

Suggestions

Add minimal copy-paste code for the two most failure-prone integrations: connecting the chosen smooth-scroll engine to ScrollTrigger (with refresh on media/font load) and the WebGL disposal/context-loss pattern.

Include one short GSAP hero-intro snippet showing the accessible unsplit-name + decorative-split-word pattern referenced in §4.

DimensionReasoningScore

Conciseness

Lean directive bullets with no concept over-explanation — it names tools (GSAP, Lenis, Locomotive Scroll, Iconify, Solar, Logo Ipsum) without explaining what they are, assuming Claude's competence so every token earns its place.

5 / 5

Actionability

Guidance is concrete and library-specific ('choose exactly one' smooth-scroll engine, 'Cap device pixel ratio', 'Dispose animation frames…geometries, materials, and the renderer'), but fragile integration points like ScrollTrigger–Lenis sync and WebGL disposal have no executable code patterns, leaving minor gaps.

4 / 5

Workflow Clarity

Seven sequenced sections (art direction → assets → hero → motion → Three.js → quality bar → validate) with an explicit validation feedback loop in §7: 'Run the production build and fix every failure' plus pre-handoff checks.

5 / 5

Progressive Disclosure

A self-contained, well-organized SKILL.md with seven clear section headers and no nested or buried references; nothing here belongs in a separate file, so the simple-skill structure is appropriate.

5 / 5

Total

19

/

20

Passed

Description

100%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, third-person description that pairs a comprehensive capability list with an explicit, naturally-worded trigger clause. It is specific, complete, and clearly distinct from general web-build skills.

DimensionReasoningScore

Specificity

Lists multiple concrete capabilities — 'art-direct and implement', 'GSAP choreography', 'one smooth-scroll engine', 'optional Three.js shaders', 'honest icon and logo sourcing', 'photo avatars', 'accessibility, and performance safeguards' — giving comprehensive coverage of what the skill does.

5 / 5

Completeness

It explicitly answers both 'what' (art-direct and implement distinctive motion-rich websites with specific capabilities) and 'when' (an explicit 'Use when a user asks for…' trigger with concrete phrases).

5 / 5

Trigger Term Quality

The 'Use when' clause surfaces natural user phrasings — 'Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website' — covering synonyms a user would actually say.

5 / 5

Distinctiveness Conflict Risk

The niche is narrow and clearly signaled — premium motion-rich sites with a GSAP/Three.js/shader stack — making conflict with unrelated skills unlikely.

5 / 5

Total

20

/

20

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
MengTo/Skills
Reviewed

Table of Contents

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.