CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

top-design

Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "premium website", "portfolio site", "scroll animations", "Awwwards quality", "brand experience", "cinematic web design", "parallax storytelling", or "agency-quality site". Also trigger when building landing pages that need to impress, designing creative portfolios, or elevating a standard website to a memorable digital experience. Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation. For foundational UI, see refactoring-ui. For type selection, see web-typography.

Quality

83%

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

67%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 rich, opinionated design skill with unusually concrete guidance (exact values, tools, timings, and self-tests) and a clean one-level-deep reference structure. Its main weakness is token efficiency: three sections recap the same insights and two trailing sections are non-instructional. The design workflow is sequenced and checkable but split across redundant sections rather than one integrated loop.

Suggestions

Merge the three overlapping recap sections — 'Design Process', 'Implementation Notes', and 'Quick Diagnostic' — into a single workflow, since 'Implementation Notes' repeats 'Design Process' nearly verbatim and the diagnostic table restates the same key insights a third time.

Cut 'About the Author' and 'Further Reading' (affiliate-tagged book links) from SKILL.md; neither instructs the agent, and the agency background already belongs in references/case-studies.md.

Trim or fold each pillar's 'Why it works' rationale paragraph into 'Key Insights', and make the feedback loop explicit in the workflow (score → apply diagnostic fixes → re-score) so validation is an ordered step rather than an implied one.

DimensionReasoningScore

Conciseness

Core guidance is dense and specific (exact cubic-bezier curves, ms timelines, 10:1 type ratios, hex variants), but 'Implementation Notes' repeats the 'Design Process' section nearly verbatim, the 'Quick Diagnostic' recaps the same insights a third time, and 'About the Author' plus affiliate-tagged 'Further Reading' add no instruction. Mostly efficient but could lose roughly 30% of tokens without losing guidance.

3 / 5

Actionability

Highly concrete directives throughout — 'cubic-bezier(0.16, 1, 0.3, 1) (expo out)', 'hero title words staggered (200-600ms, 80ms stagger)', 'minimum 10:1 (180px headline / 14px body)', '#0a0a0a', 'Use Lenis or Locomotive Scroll', 'Lighthouse, targeting 90+' — plus actionable self-tests (blur test, squint test, screenshot test). Falls short of 5 because a meaningful share of guidance is aspirational rather than executable ('magnetic compositions, elements that breathe and surprise', 'typography that makes you gasp') and complete copy-paste examples live in references rather than inline.

4 / 5

Workflow Clarity

A clear sequenced 'Design Process' (Concept → Signature moment → Typography → Motion → Ship with restraint) with a built-in feedback loop in the scoring section ('Always provide the current score and specific improvements needed to reach 10/10') and a 12-question diagnostic checklist with fixes. Not a 5 because the process is duplicated across two overlapping sections and the score → fix → re-score iteration is implied rather than an explicit ordered step.

4 / 5

Progressive Disclosure

Each pillar ends with a well-signaled pointer ('See: [references/typography.md] for font pairing strategies') plus a consolidated 'Reference Files' section; all five referenced files exist, are one level deep with no nested references, and contain real content. Not a 5 because the ~440-line body itself carries content (category scoring rubric, common mistakes, agency bios) that could partly live in the references, stretching the 'overview' role.

4 / 5

Total

15

/

20

Passed

Description

91%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 that explicitly states both capability and trigger conditions with an unusually rich set of natural trigger phrases, and even disambiguates against sibling skills. Its only weaknesses are a mildly aspirational headline action and a few broad trigger terms that could collide with general web-design skills.

DimensionReasoningScore

Specificity

Names the domain and several concrete capability areas — 'Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation' — matching the 'several specific actions; minor gaps' anchor. Not a 5 because the headline action 'Create award-winning, immersive web experiences' is aspirational phrasing rather than a concrete operation.

4 / 5

Completeness

Explicitly answers both questions: what — 'Create award-winning, immersive web experiences... Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation'; when — 'Use when the user mentions...' plus 'Also trigger when...' with concrete trigger phrases. This matches the anchor for clearly and explicitly answering both what AND when.

5 / 5

Trigger Term Quality

Rich, natural trigger phrases users would actually say: 'premium website', 'portfolio site', 'scroll animations', 'Awwwards quality', 'brand experience', 'cinematic web design', 'parallax storytelling', 'agency-quality site', plus situational variants like 'building landing pages that need to impress'. Comprehensive synonym coverage for the domain (file extensions are inapplicable here), matching the top anchor.

5 / 5

Distinctiveness Conflict Risk

Distinct niche triggers ('Awwwards quality', 'parallax storytelling', 'cinematic web design') and explicit overlap management ('For foundational UI, see refactoring-ui. For type selection, see web-typography'). Broad terms like 'portfolio site', 'brand experience', and 'landing pages' still overlap with general web-design skills, so it fits 'mostly distinct; minor overlap risk' rather than the minimal-conflict top anchor.

4 / 5

Total

18

/

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

valeriibeck-star/claude-skills

Path

skills/top-design/SKILL.md

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.