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.

75

Quality

92%

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

85%

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

The body is a well-structured, directive, validation-rich design skill that assumes Claude's competence and sequences work clearly with a handoff checklist. Its main gap is actionability at the implementation level: it directs technically deep GSAP/Three.js/smooth-scroll operations without concrete code or patterns.

Suggestions

Add a concise, copy-paste code pattern for GSAP ScrollTrigger integration with the chosen smooth-scroll engine (including the refresh-after-media/fonts step and reduced-motion bypass), so the 'connect the chosen engine correctly' directive is executable rather than descriptive.

Provide a minimal Three.js cleanup/disposal block (cancel animation frame, dispose geometries/materials/render targets/textures/renderer, handle context loss) to make the disposal checklist concrete.

Show one short reduce-motion bypass example that renders final states immediately under prefers-reduced-motion: reduce, illustrating the 'render final states immediately' rule for the hardest-to-get-right case.

DimensionReasoningScore

Conciseness

The body is lean and directive throughout, assuming Claude's competence (it never explains what GSAP, Three.js, or smooth-scroll engines are) and packing each bullet with actionable guidance; not a 2 because there is no unnecessary concept explanation or padding that could be tightened.

3 / 3

Actionability

Guidance names concrete tools and rules ('Use GSAP', 'choose exactly one' of Lenis/Locomotive, 'Dispose animation frames, observers... render targets, textures, geometries, materials, and the renderer'), but for technically deep directives like ScrollTrigger integration, Three.js/WebGL setup, and reduce-motion bypass it gives no concrete code or implementation patterns, leaving key HOW-details unspecified; not a 1 because the named-tool directives are specific and actionable at the design level, and not a 3 because no executable examples or copy-paste patterns are provided.

2 / 3

Workflow Clarity

The body is a numbered §1–§7 sequence culminating in a dedicated 'Validate before handoff' section with an explicit checklist and a 'Run the production build and fix every failure' feedback loop, matching the anchor for a clear sequence with explicit validation and error-recovery; not a 2 because validation checkpoints are explicit, not merely implicit.

3 / 3

Progressive Disclosure

There are no bundle files (references/scripts/assets are absent) and the skill is self-contained, but it is well-organized into seven clearly titled sections with a framing intro; per the rubric's simple-skills note, a self-contained skill with no need for external references can score 3 on well-organized sections, and there are no nested references to penalize.

3 / 3

Total

11

/

12

Passed

Description

100%

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

The description is strong: it states concrete capabilities, includes an explicit 'Use when...' trigger with natural user terms, and occupies a clearly distinct niche. Its only weakness is verbosity in the capability list, though no description dimension directly penalizes length.

DimensionReasoningScore

Specificity

The description lists multiple concrete capabilities ('GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo sourcing, photo avatars'), matching the anchor for listing several specific concrete actions rather than vague language.

3 / 3

Completeness

It explicitly answers both 'what' ('Art-direct and implement distinctive, motion-rich... websites with...') and 'when' via an explicit 'Use when...' trigger, matching the anchor that clearly answers both with explicit triggers; not a 2 because the when-clause is explicit, not merely implied.

3 / 3

Trigger Term Quality

The 'Use when...' clause surfaces natural user phrasing ('Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website') that a user would plausibly say when needing this skill, giving good coverage of natural terms.

3 / 3

Distinctiveness Conflict Risk

The 'Awwwards-quality' framing and motion/Three.js-specific triggers carve a clear niche distinct from generic web-design skills, making conflict with unrelated skills unlikely; not a 2 because the triggers are specific rather than broadly overlapping.

3 / 3

Total

12

/

12

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.