CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

animations

Authors performant CSS-first web animations and picks the right feedback for an interaction — transitions, View Transitions, scroll-driven motion, Motion for React, reduced motion, and perceived performance. Triggers on "animate this", "hover effect", "feel faster", "skeleton loader", "/animations".

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 ./skills/design/animations/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

70%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 content delivers an exemplary phase-gated workflow with explicit validation, feedback loops, and a Definition of Done, plus concrete numeric guidance throughout. Two real weaknesses: the progressive-disclosure architecture is unfulfilled in the shipped bundle (16 of 17 referenced rule/template files are missing, leaving every phase gate pointing at a nonexistent file), and the body carries noticeable structural redundancy (duplicated file tables; principles and anti-patterns restating phase gates).

Suggestions

Ship the referenced files or inline the critical ones: all 16 rules/*.md files and templates/cursor-spotlight.html are absent from the bundle, so every workflow phase gate and the brainstorm catalog point to files that cannot be loaded — either include them or move the essential rules (five brainstorm questions, safe-property table, duration/easing bands) into the body.

Merge the "Required Reading by Phase" table into the Workflow table (e.g., as a Files column) — it duplicates the same 17 rule-file paths already linked there, costing roughly 20 redundant lines.

Deduplicate the anti-patterns and core principles against the phase gates: the 200 ms loader floor, brainstorm-before-you-pick, and composite-only rules each appear two to three times across Core Principles, Anti-patterns, and the Workflow gates — keep each rule in one canonical location and link to it.

DimensionReasoningScore

Conciseness

The body is dense and free of concept-explaining padding, but carries structural redundancy: the "Required Reading by Phase" table repeats the same 17 rule-file paths already linked in the Workflow table, and the 15 anti-patterns plus 9 core principles restate content from the phase gates (the 200 ms loader floor, brainstorm-before-pick, and composite-only rule each appear two to three times). Not 4 because the duplicate table and repeated rules are more than minor trimming; not 2 because there is no fluff or explanation of things Claude already knows — every line carries signal, just repetitively.

3 / 5

Actionability

Concrete, executable decision guidance throughout: a 12-row signal-to-tool table with "First match wins", specific numeric constraints ("transform, opacity, and filter only", "150–500 ms band", "exit ~30 % faster", "200 ms loader floor"), and concrete commands (Skill("screencast") invocations with recording.json parameters). Not 5 because the body contains no copy-paste code — the flagship brainstorm workflow's catalog and five-question framework live in rules/interaction-feedback.md, whose content is not available in this bundle; not 3 because the inline guidance is concrete and complete at the decision level for the common cases.

4 / 5

Workflow Clarity

The phase table (A, B, 0–7.6) gives a clear ordered sequence with an explicit gate per phase, explicit validation (Phase 7: "60 fps in DevTools Performance; no purple Layout / green Paint bars"), a genuine feedback loop (Phase 7.6: "apply the fix and return to Phase 7.5. Cap the loop at 3 iterations — escalate... on the 4th"), graceful degradation for missing helper skills, and a Definition of Done checklist. This matches the anchor: clear sequence, explicit validation, error-recovery loops, and a checklist; no destructive/batch cap applies.

5 / 5

Progressive Disclosure

Scored against the actual bundle: of 17 internal file references, only references/recipes.md exists — the rules/ directory (16 files: safe-properties.md, interaction-feedback.md, modern-css.md, etc.) and templates/cursor-spotlight.html are absent, so the load-on-demand architecture cannot actually load. The in-body structure and signaling are excellent (would merit 5), but the bundle does not back it. Not 4 because 16 missing referenced files is far beyond a minor organization gap; not 2 because the body itself is well-organized with clearly signaled references, not a monolith or buried links.

3 / 5

Total

15

/

20

Passed

Description

83%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 what the skill does (authors performant CSS-first web animations, picks interaction feedback) with a technology enumeration, and gives an explicit "Triggers on" clause with natural user phrases. The only gaps are a few missing trigger synonyms and minor overlap risk with adjacent UX/performance skills.

DimensionReasoningScore

Specificity

"Authors performant CSS-first web animations and picks the right feedback for an interaction" names two concrete actions, and the enumeration "transitions, View Transitions, scroll-driven motion, Motion for React, reduced motion, and perceived performance" gives broad capability coverage (third-person voice, so no penalty). Not 5 because the enumeration lists technologies more than distinct actions and "picks the right feedback" is slightly abstract; not 3 because coverage clearly exceeds 1-2 actions.

4 / 5

Completeness

Explicitly answers both parts: what ("Authors performant CSS-first web animations and picks the right feedback for an interaction") and when ("Triggers on 'animate this', 'hover effect', 'feel faster', 'skeleton loader', '/animations'") with concrete trigger phrases — the equivalent of a "Use when..." clause, so the completeness cap of 3 does not apply. Matches the anchor-5 example structure of capabilities plus explicit trigger guidance.

5 / 5

Trigger Term Quality

"Triggers on 'animate this', 'hover effect', 'feel faster', 'skeleton loader', '/animations'" provides genuinely natural user phrases. Not 5 because common variations users would say are missing — "transition", "easing", "microinteraction", "smooth scrolling", "make this page feel slow" — and there are no synonyms for the enumerated capability terms; not 3 because the dedicated trigger list goes well beyond some relevant keywords.

4 / 5

Distinctiveness Conflict Risk

The niche is clear ("web animations") with animation-specific triggers, and the "web" qualifier bounds it against native-motion skills. Not 5 because "hover effect", "feel faster", and "skeleton loader" carry minor overlap risk with general CSS, UX/accessibility, and performance skills; not 3 because the trigger set is firmly anchored in animation work rather than broadly overlapping.

4 / 5

Total

17

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_field

'metadata' should map string keys to string values

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

relative_links

Relative link issues: 64 missing, 3 suspicious

Warning

Total

13

/

16

Passed

Repository

mthines/agent-skills

Path

skills/design/animations/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.