CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

animation-performance

Use when reviewing stylesheets, component styles, and responsive behavior related to Use transform and opacity for animations. Check the rendered layout across breakpoints and interaction states before proposing a fix.

56

Quality

71%

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/animation-performance/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

61%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 short, well-sectioned overview with concrete check/fix instructions and a clearly signaled one-level-deep reference file. Its weaknesses are verbatim content duplicated between body and reference, a repeated Check/Code Review instruction, and verification steps that exist only in the reference rather than the main workflow.

Suggestions

Cut the opening rendering-pipeline paragraph from the body — it is duplicated verbatim in references/rule.md and explains a concept Claude already knows.

Surface the reference's verification steps in the workflow (e.g. add a line after Fix: "After fixing, follow the verification steps in references/rule.md — confirm computed styles and test one mobile and one desktop viewport") so checkpoints are explicit.

Merge the "Check" and "Code Review" sections, which currently repeat the same flag-for-optimization instruction in slightly different words.

DimensionReasoningScore

Conciseness

The opening paragraph — "Animating layout properties (width, height, top, margin) triggers the full browser rendering pipeline on every frame — style recalculation, layout, paint, and composite" — explains a concept Claude already knows and is duplicated verbatim in references/rule.md ("Why It Matters"), while the "Code Review" section repeats the "Check" section. Not 2: the rest is lean bullet guidance; not 4: the verbatim duplication is real over-explanation, not minor trimming.

3 / 5

Actionability

Concrete, executable guidance: "Convert layout-triggering animations to use transform equivalents: position changes to translate(), size changes to scale()" and "layout-triggering properties like top, left, width, height, or margin" give specific properties and transform functions. As an instruction-only skill the absence of body code is not penalized; not 5 because the concrete conversion examples and patterns live only in the reference.

4 / 5

Workflow Clarity

The "Check → Fix → Explain → Code Review" sections form a coherent sequence, but validation checkpoints are implicit: the reference's "Verification" steps (inspect rendered UI, confirm computed styles, test mobile and desktop viewports) are never surfaced in the body workflow. Not 2: the sequence is well-defined; not 4: no checkpoint appears in the body itself.

3 / 5

Progressive Disclosure

"For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" is a well-signaled one-level-deep pointer, and the file exists and carries the bulk content (conversions, patterns, verification). Not 5: content is not cleanly split — the "Why It Matters" paragraph and several Quick Reference bullets are duplicated between body and reference.

4 / 5

Total

14

/

20

Passed

Description

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

The description explicitly covers both what the skill does and when to use it, with natural CSS-review trigger terms and a mostly distinct niche. Its main weaknesses are the awkward run-on phrasing with the rule title embedded mid-sentence and a thinner set of concrete actions and trigger synonyms than top-tier examples.

Suggestions

Separate what from when in two clean parts, e.g. "Flags CSS animations that animate layout properties (top, left, width, height, margin) and converts them to transform/opacity equivalents. Use when reviewing stylesheets, component styles, or responsive behavior for animation performance issues."

Add natural trigger synonyms users would say — "animation performance", "jank", "laggy or stuttering transitions", "smooth animation", "60fps" — to broaden keyword coverage.

Remove the mid-sentence embedded rule title ("related to Use transform and opacity for animations") so the capability statement reads as concrete actions rather than a stuffed keyword.

DimensionReasoningScore

Specificity

Names the domain and two concrete actions — "reviewing stylesheets, component styles, and responsive behavior" and "Check the rendered layout across breakpoints and interaction states before proposing a fix" — but coverage is not comprehensive, and the embedded rule title "related to Use transform and opacity for animations" obscures the action list. Not 4: fewer than several distinct specific actions with only minor gaps.

3 / 5

Completeness

Both "what" (review styles against the transform/opacity animation rule; check rendered layout before proposing fixes) and an explicit "when" ("Use when reviewing stylesheets...") are present. Not 5: what and when are fused into one run-on clause with the rule title jammed mid-sentence, less crisp than a clean two-part statement.

4 / 5

Trigger Term Quality

Good natural keyword coverage — "stylesheets", "component styles", "responsive behavior", "animations", "transform and opacity", "breakpoints", "interaction states" — terms a user reviewing CSS would plausibly say. Not 5: missing common variations and synonyms such as "jank", "laggy", "smooth animation", "reflow", or "60fps".

4 / 5

Distinctiveness Conflict Risk

"Use transform and opacity for animations" is a clear niche, but the templated opener "reviewing stylesheets, component styles, and responsive behavior" is generic CSS-review phrasing likely shared verbatim by sibling checklist rules, creating minor overlap risk with closely related skills. Not 5 due to that generic framing.

4 / 5

Total

15

/

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

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository

thedaviddias/Front-End-Checklist

Path

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