CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

web-animation-design

Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.

64

Quality

81%

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

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.

A highly actionable reference with concrete values and copy-paste code for every topic it covers, plus a clear easing decision procedure. Its weaknesses are padding (greeting protocol, explanatory prose, duplicated sections) and a dangling reference to PRACTICAL-TIPS.md, which does not exist in the bundle.

Suggestions

Create PRACTICAL-TIPS.md with the detailed implementations the body promises, or remove both links to it — a dangling reference breaks navigation and undermines the progressive-disclosure structure.

Delete the 'Initial Response' section and the 'Why it works' / car-metaphor prose; trim the easing flowchart (or the Quick Start) since they state the same four questions twice, and merge the duplicate 'Timing and Duration' / 'Duration Guidelines' headings.

Fix the ASCII flowchart's tree characters (mixed ├ and └ with inconsistent indentation) or replace it with a short ordered list so the decision sequence renders unambiguously.

DimensionReasoningScore

Conciseness

The body is mostly efficient (tables, tight code blocks, short rules), but includes unnecessary padding: the 'Initial Response' section instructing a canned greeting, explanatory prose Claude doesn't need ('Why it works: Acceleration at the start...', 'Mimics natural motion like a car accelerating then braking'), duplicated heading levels ('## Timing and Duration' immediately followed by '## Duration Guidelines'), and an easing flowchart that restates the Quick Start questions verbatim. This matches anchor 3 ('mostly efficient but includes some unnecessary explanation or could be tightened') rather than anchor 4's 'minor instances'.

3 / 5

Actionability

Guidance is fully executable throughout: exact cubic-bezier values for every easing family, a duration table with numeric ranges, copy-paste CSS for prefers-reduced-motion and touch-device hover guards, a concrete Framer Motion useReducedMotion component, and a fixes table mapping symptoms to specific values (scale(0.97), 44px hit area, <20px blur). This matches anchor 5's 'copy-paste ready code covering the common cases'.

5 / 5

Workflow Clarity

The decision process is clearly sequenced: the four Quick Start questions route every animation decision to an easing family, and the flowchart re-encodes that sequence with a default fallback. It is a design-guidance skill with no destructive or batch operations, so no validation checkpoints are required. It falls short of anchor 5 because the ASCII flowchart's tree characters are malformed (mixed ├ and └ under 'No' with broken indentation) and it duplicates the Quick Start rather than adding sequence or error-recovery guidance.

4 / 5

Progressive Disclosure

The body is well-sectioned with clear headers, and the single external reference ('See [PRACTICAL-TIPS.md](PRACTICAL-TIPS.md) for detailed implementations') is clearly signaled — but the bundle contains no PRACTICAL-TIPS.md and no references/ directory at all, so both links to it are dangling and the promised content split is unfulfilled. Scoring against the actual bundle structure, this lands at anchor 3 ('some structure but could be better organized') rather than anchor 4, since navigation to the referenced file fails.

3 / 5

Total

15

/

20

Passed

Description

86%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 what/when structure and an unusually comprehensive, natural trigger list including framework names and colloquial phrases. The main weakness is that stated capabilities are a single broad action ('design and implement') plus enumerated triggers, rather than several concrete listed capabilities.

Suggestions

Replace part of the trigger enumeration with a short list of concrete capabilities, e.g. 'Pick easing curves, set durations, configure springs, and add prefers-reduced-motion fallbacks' — this would raise specificity without adding length.

DimensionReasoningScore

Specificity

The description names the domain ('web animations') and one clear action ('Design and implement'), but sub-capabilities such as 'which easing to use' and 'accessibility considerations' are conveyed through the trigger enumeration rather than listed as distinct concrete actions. This matches the anchor for naming a domain with 1-2 concrete actions without comprehensive coverage, falling short of anchor 4 which expects several specific listed actions.

3 / 5

Completeness

It explicitly answers both questions: what ('Design and implement web animations that feel natural and purposeful') and when ('Use this skill proactively whenever the user asks questions about animations, motion, easing...') with an additional explicit 'Triggers on:' clause of concrete trigger phrases. This matches anchor 5 exactly; it is not the anchor-4 case because the 'when' is fully explicit rather than merely present.

5 / 5

Trigger Term Quality

The trigger list is comprehensive and natural: technical terms ('cubic-bezier', 'spring physics', 'keyframes', 'prefers-reduced-motion'), library names ('Framer Motion', 'React Spring', 'GSAP'), and colloquial user phrases ('feels janky', 'make it smooth', 'button press feel'). This covers synonyms and user-natural phrasing at the level of the anchor-5 example, well above anchor 4's 'a few natural terms missing'.

5 / 5

Distinctiveness Conflict Risk

The niche is clear (web UI animation) with highly distinct triggers like 'cubic-bezier', 'prefers-reduced-motion', and 'Framer Motion'. However, broad terms such as 'animations', 'motion', 'fade', 'slide', and 'scale' carry minor overlap risk with video-generation or presentation-animation skills, so it sits at 'mostly distinct; minor overlap risk' rather than anchor 5's 'minimal conflict risk'.

4 / 5

Total

17

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

relative_links

Relative link issues: 2 missing

Warning

Total

14

/

16

Passed

Repository

Kiz8-Team/open-agents

Path

.agents/skills/web-animation-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.