CtrlK
BlogDocsLog inGet started
Tessl Logo

animations

Authors performant web animations CSS-first AND brainstorms the right feedback for an interaction via a verb-to-motion catalog. Covers GPU-safe properties, modern primitives (@starting-style, interpolate-size), View Transitions, scroll-driven timelines, state-choreography morphs, React state (Motion, AnimatePresence), advanced effects (Liquid Glass, glow, 3D tilt), external engines (Lottie, Rive), React Three Fiber, prefers-reduced-motion, AND perceived performance (skeleton loaders, optimistic UI, loader floor, predictive prefetch, stale-while-revalidate). Use when building transitions, hover effects, route changes, when an animation feels janky, when deciding what feedback an interaction should have, or when the app needs to feel snappier. Triggers on "animate this", "fade in", "hover effect", "liquid glass", "lottie", "rive", "ideal feedback", "how should X feel", "skeleton loader", "perceived performance", "feel faster", "optimistic UI", "/animations".

68

Quality

85%

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

77%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 disciplined, dense index with an excellent decision flow, per-phase gates, a real record→analyse→iterate feedback loop, and a Definition of Done checklist — workflow clarity is near best-in-class. The dominant defect is against the actual bundle: the carefully built progressive-disclosure structure points mostly at rule and template files that are not shipped, so the promised on-demand detail is unreachable except for references/recipes.md, and the two phase tables duplicate each other.

Suggestions

Ship the referenced bundle files: the ~15 `rules/*.md` files and `templates/cursor-spotlight.html` cited throughout the decision flow, workflow, and required-reading tables are absent from the bundle — either include them or fold their essential gates into SKILL.md so `references/recipes.md` is not the only reachable deep-dive.

Merge the "Workflow" and "Required Reading by Phase" tables into a single phase → file → gate table; both currently repeat the same phase-to-file mapping at a cost of ~20 lines.

Trim the Phase 7.5/7.6 gate cells to one-line pointers into `rules/record-and-iterate.md` — the 100+ word inline integration spec (recorder invocation arguments, analyser findings, iteration cap, escalation) duplicates what that referenced file is meant to carry.

DimensionReasoningScore

Conciseness

The body never explains concepts Claude already knows — it opens with the rule "Animate `transform`, `opacity`, and `filter` only" and stays at that altitude throughout, with no tutorial padding. Two things could be trimmed: the "Workflow" and "Required Reading by Phase" tables duplicate the same phase→file mapping, and the Phase 7.5/7.6 gate cells run 100+ words of inline integration detail ("invoke `Skill("screen-recorder")` twice — once with `reduced-motion: false`, once with `reduced-motion: true`...") that duplicates the referenced rules/record-and-iterate.md. That is minor over-content, matching anchor 4 rather than the every-token-earns-its-place anchor 5.

4 / 5

Actionability

The in-body guidance is concrete and followable: a first-match-wins decision table ("One-shot state change on hover, focus, or class toggle → CSS transition"), specific thresholds ("Duration is in the 150–500 ms band", "the 200 ms loader floor"), exact skip-line formats ("screen-recorder — skipped (not installed)"), and a Definition of Done checklist. It stops short of anchor 5 because no executable code lives in the body and several procedure steps defer entirely to rule files that are not present in the bundle (e.g. "Look up the interaction in the catalog" — the catalog itself is not shipped), leaving minor-to-moderate gaps in what can actually be executed as written.

4 / 5

Workflow Clarity

Phases are explicitly ordered ("Walk these in order. First match wins." / "For any animation task — author or review — walk these phases"), each phase has a pass/fail gate, and Phase 7.5→7.6 is a genuine feedback loop with error recovery: "If a finding contradicts the animation contract... apply the fix and return to Phase 7.5. Cap the loop at 3 iterations — escalate via `Skill("confidence", analysis)` on the 4th." Together with the "Definition of Done" checklist this matches the anchor-5 pattern of explicit validation, feedback loops, and checklists.

5 / 5

Progressive Disclosure

The thin-index design is exemplary on paper — "This `SKILL.md` is a thin index. Detailed rules live in `rules/*.md` and load on demand", with clearly signaled one-level references and a per-phase file map. But scored against the actual bundle, only `references/recipes.md` (397 lines of worked recipes) ships: none of the ~15 referenced `rules/*.md` files nor `templates/cursor-spotlight.html` exist in the bundle, so the majority of references dangle and the load-on-demand structure cannot actually be followed. This lands between anchor 2 (references effectively unusable) and anchor 4 (minor organization gaps).

3 / 5

Total

16

/

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: third-person voice, explicit what and when, and comprehensive natural trigger terms with synonyms and user-voiced phrasings. The only soft spot is breadth — the perceived-performance scope creates minor overlap risk with general performance skills, and the capability list leans on two action verbs plus heavy topic enumeration.

DimensionReasoningScore

Specificity

Two concrete actions are stated ("Authors performant web animations CSS-first AND brainstorms the right feedback for an interaction via a verb-to-motion catalog") and the coverage list names specific primitives and patterns ("@starting-style, interpolate-size", "View Transitions", "skeleton loaders, optimistic UI"). It sits between the anchor-4 example (several specific actions) and anchor 5 (comprehensive coverage): scope is comprehensive, but only two action verbs carry it, with the rest delivered as topic enumeration.

4 / 5

Completeness

The "what" is explicit ("Authors performant web animations CSS-first... brainstorms the right feedback for an interaction via a verb-to-motion catalog") and the "when" is explicit with concrete trigger phrases ("Use when building transitions, hover effects, route changes, when an animation feels janky, when deciding what feedback an interaction should have, or when the app needs to feel snappier"). This mirrors the anchor-5 exemplar structure of what + when + triggers.

5 / 5

Trigger Term Quality

The description includes a full natural-phrases list — "Triggers on 'animate this', 'fade in', 'hover effect', 'liquid glass', 'lottie', 'rive', 'ideal feedback', 'how should X feel', 'skeleton loader', 'perceived performance', 'feel faster', 'optimistic UI', '/animations'" — covering synonyms ("hover effect"/"animate this", "skeleton loader"/"optimistic UI"), user-voiced phrasings ("when an animation feels janky", "the app needs to feel snappier"), and the slash command. This matches the comprehensive-synonyms anchor.

5 / 5

Distinctiveness Conflict Risk

The web-animation niche is clearly framed by named primitives ("@starting-style", "View Transitions", "Motion, AnimatePresence", "Lottie, Rive") so it is mostly distinct. However the scope stretches into perceived performance ("skeleton loaders, optimistic UI, loader floor, predictive prefetch, stale-while-revalidate"), which overlaps generic frontend/web-performance skills — minor overlap risk, matching anchor 4 rather than the clear-niche anchor 5.

4 / 5

Total

18

/

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: 63 missing, 4 suspicious

Warning

Total

13

/

16

Passed

Repository
mthines/agent-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.