CtrlK
BlogDocsLog inGet started
Tessl Logo

animation-systems

Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.

66

Quality

79%

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

Fix and improve this skill with Tessl

tessl review fix ./agent-skills/web-design/animation-systems/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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.

The body is a well-organized, highly concrete design reference with excellent numeric defaults and a clear output procedure. Its weaknesses are structural (a ~185-line single file with no progressive disclosure to reference files), minor restatement of animation-performance knowledge Claude already has, and a few high-level sections (morph/shared-element, hero timelines) without actionable recipes.

Suggestions

Split the detailed catalogs into reference files (e.g., references/patterns.md for choreography/hover/scroll specs, references/defaults.md for the duration/easing/stagger tables) and keep SKILL.md as a lean overview with clearly signaled one-level links — this addresses the lowest-scoring dimension, progressive_disclosure.

Trim restatements of standard knowledge (the transform/opacity property rules, reflow/GPU advice) to a single non-negotiable rule line each, keeping the body focused on the curated numbers Claude does not already know.

Make the 'Output format' section explicitly consume the answers from 'What to ask the user' (e.g., brand lane → easing set, key moments → choreography plan) so the workflow closes the loop, and add a morph/shared-element recipe to close the actionability gap.

DimensionReasoningScore

Conciseness

The body is predominantly lean, opinionated bullet guidance with concrete numbers ("Micro (hover/press): 120–200ms", "40–90ms per element"), but it restates knowledge Claude already has ("Prefer: transform (translate/scale/rotate), opacity / Avoid: width/height/top/left", "Don't measure layout every frame") and carries light manifesto padding ("This skill helps you ship tasteful, product-grade motion. Not 'more animation.'"). That matches anchor 4 — efficient with minor trims available — rather than 5, and is clearly above 3 because the bulk is curated specifics Claude cannot be assumed to have already pinned down.

4 / 5

Actionability

Mostly executable, specific guidance ("Y: 12–24px → 0", "Scale: 0.98 → 1", "Trigger when section is ~20–30% visible", "Clamp device pixel ratio ... (1–2)", "standard offsets (8/16/24px)") plus a concrete output checklist, matching anchor 4. Not 5 because some sections stay high-level ("Morph / shared element ... Requires consistent geometry + measured layout", "Use timelines (or keyframes) with labeled beats") with no recipe, and no code recipe is provided inline for common cases; well above 3 since the common cases are covered with directly usable numbers.

4 / 5

Workflow Clarity

There is a coherent progression (goals → style traits → primitives → defaults → patterns → performance → accessibility → implementation) ending in an operational two-step procedure: "What to ask the user" followed by the numbered "Output format" deliverables (1–5), with an explicit reduced-motion checkpoint ("Ask the user: 'Do you want a reduced-motion mode ...'"). Not 5 because there are no validation/feedback checkpoints and the output format is not explicitly tied to the user's answers; not 3 because no destructive or batch operations are involved, so the workflow cap does not apply, and the sequence plus checkpoints are present.

4 / 5

Progressive Disclosure

A single ~185-line file with zero references: detailed catalogs ("Choreography patterns", the duration/easing/stagger "Defaults" tables, hover/scroll specs) are inlined when a skill this size would split them into reference files, matching anchor 3 (good structure, but content that should be separate is inline). Not 4 because there is no offloading or navigation to further detail at all; not 2 because sections are clearly headed and nothing is buried or monolithic.

3 / 5

Total

15

/

20

Passed

Description

87%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 with an explicit 'Use when...' trigger, a specific coverage list, and distinctive brand-anchored niche language. The only notable gap is the omission of the most common trigger word 'animation' and its synonyms, which weakens trigger-term coverage slightly.

DimensionReasoningScore

Specificity

The description lists seven specific coverage areas ("easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion)") plus a concrete action ("designing or implementing product-grade web motion"), matching anchor 4's comprehensive-but-minor-gaps profile. It falls short of 5 because the coverage list names topics rather than multiple distinct concrete capability actions, and it exceeds 3 because it goes well beyond naming the domain with 1-2 actions.

4 / 5

Completeness

It explicitly answers both: what ("Covers motion principles, easing/duration defaults, choreography patterns, ... implementation guidance") and when ("Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel") with concrete trigger phrases, exactly matching anchor 5. It is not 4 because the when-clause is fully explicit and specific, not something that 'could be more explicit'.

5 / 5

Trigger Term Quality

Natural user phrasings like "web motion", "easing", "choreography", "reduced motion", and especially "like Stripe, Linear, Apple, and Vercel" give good trigger coverage (anchor 4). Not 5 because the single most common term users would say — "animation" (plus synonyms like "transitions" or "micro-interactions") — is absent; clearly above 3 since keywords are domain-specific, not generic.

4 / 5

Distinctiveness Conflict Risk

"product-grade web motion like Stripe, Linear, Apple, and Vercel" carves out a clear niche with distinctive brand-name triggers and minimal overlap risk with adjacent skills (e.g., charting/dataviz or general UI skills), matching anchor 5.

5 / 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
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.