CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

animate

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

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

The canonical home for this skill is animate in emilkowalski/skills

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.

The body is highly actionable and the build sequence is exceptionally clear with explicit gates and a final self-check. It is held back by a broken RECIPES.md reference (the file is absent from the bundle) and by repeated/over-explained content — known CSS facts restated and rules duplicated between the step sections and the Never Ship table.

Suggestions

Add the missing RECIPES.md to the bundle (the link in the Recipes section currently resolves to nothing), or remove the reference and inline only the highest-value recipes.

Cut explanations of facts Claude already knows — GPU/compositor behavior of transform/opacity, rAF dropping frames under load, translate() percentage semantics, touch false-hovers — down to the bare rule plus the value to use.

Deduplicate the step sections against the Never Ship table (ease-in, scale(0), transform-origin, 300ms, hover/reduced-motion gating all appear twice) and drop or condense the scripted 'Initial Response' and 'Tone' sections.

DimensionReasoningScore

Conciseness

Quotes: "They skip layout and paint and run on the GPU", "they run off the main thread, while `requestAnimationFrame`-based animation drops frames", "Percentages in `translate()` are relative to the element's own size", "touch fires false hovers on tap" — several explanations of CSS behavior Claude already knows, plus redundancy between the step sections and the Never Ship table (ease-in, scale(0), transform-origin, 300ms, hover gating all stated twice) and a scripted "Initial Response" section that adds tokens without operational value. Not 4 because these instances are more than minor trimming; not 2 because the bulk is curated, non-obvious guidance (exact bezier values, duration tables, frequency gate) that genuinely earns its tokens.

3 / 5

Actionability

Quotes: exact values "--ease-out: cubic-bezier(0.23, 1, 0.32, 1)", duration tables ("Button press feedback | 100–160ms"), spring configs "{ type: "spring", duration: 0.5, bounce: 0.2 }", and copy-paste-ready snippets for media queries, motion.div, and useReducedMotion — fully concrete, executable guidance covering the common decision cases. Not 4 because there are no real gaps: every rule is paired with the exact value or code to use.

5 / 5

Workflow Clarity

Quotes: "Run the sequence in order. Steps 1 and 2 gate everything", "If the request fails this gate, say so plainly and don't write the animation", and "Self-check before you finish" (the Never Ship checklist) — a 7-step sequence with explicit ordering, stop conditions, a final checklist, and a defined output format. Not 4 because validation checkpoints are explicit at the gate, during property/curve selection via hard rules, and at the self-check — not merely implied.

5 / 5

Progressive Disclosure

The body is well-sectioned and links "see [RECIPES.md](RECIPES.md)" for eleven common cases — but no RECIPES.md exists in the bundle (no references/, scripts/, or assets/ directories at all), so the only progressive-disclosure reference is broken and its promised content is unavailable. Not 4 because a dangling reference to a missing file is a structural defect, not a minor organization gap; not 2 because SKILL.md itself is clearly structured, one level deep, and the reference is prominently signaled rather than buried.

3 / 5

Total

16

/

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: concrete actions in decision order, an explicit 'Use when' clause with natural trigger phrases, and explicit redirects that cleanly separate it from sibling critique/audit skills. The only weakness is that trigger coverage misses a few synonyms users might naturally say.

DimensionReasoningScore

Specificity

Quotes: "Build an animation from scratch", "Writes the implementation", and the ordered decision list "should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits" — several concrete actions/decisions are named, matching the 'several specific actions; minor gaps' anchor. Not 5 because the actions are framed as decision dimensions rather than a fully comprehensive inventory of concrete capabilities; not 3 because it well exceeds 1-2 concrete actions.

4 / 5

Completeness

Quotes: "Build an animation from scratch... Writes the implementation" gives a clear 'what', and "Use when asked to animate something, add motion, make a component feel alive, or build a transition" gives an explicit 'when' with concrete trigger phrases — the exact pattern of the 5 anchor. Not 4 because the 'when' clause is already fully explicit and specific.

5 / 5

Trigger Term Quality

Quotes: "Use when asked to animate something, add motion, make a component feel alive, or build a transition" — good natural-phrase coverage (animate, motion, transition, feel alive). Not 5 because a few natural synonyms users might say are absent (e.g. "microinteraction", "spring animation", "animated"); not 3 because coverage goes well beyond 'some relevant keywords'.

4 / 5

Distinctiveness Conflict Risk

Quotes: "For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations" — explicit disambiguation against the nearest sibling skills, plus a distinct build-vs-critique niche. Not 4 because overlap risk is actively mitigated by the named redirects, not just implicit.

5 / 5

Total

18

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 missing

Warning

Total

15

/

16

Passed

Repository

englishstreetventures/osn

Path

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