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.

Quality

67%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/animation-performance/SKILL.md

Quality

Content

65%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 well-structured with actionable review/fix directives and excellent progressive disclosure to a single real reference file. Its main weaknesses are an over-explanatory intro paragraph that re-teaches the rendering pipeline and a missing in-body verification step after proposing fixes.

Suggestions

Trim the intro paragraph to a one-line rationale and defer the full rendering-pipeline/GPU-compositor explanation to references/rule.md, since Claude already knows these concepts.

Add an explicit Verify step to the body workflow (e.g. 'Verify: confirm the converted animation still renders correctly across the affected breakpoints and respects prefers-reduced-motion') rather than leaving validation only in the reference.

Surface one tiny inline before/after snippet (left → translateX) in the Fix section so the core conversion is copy-paste ready without forcing a jump to the reference.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean and well-sectioned, but the opening paragraph re-explains the browser rendering pipeline and GPU compositor ('style recalculation, layout, paint, and composite… runs on a dedicated GPU thread, achieving smooth 60fps') — concepts Claude already knows and which also appear in references/rule.md.	3 / 5
Actionability	Concrete, specific directives throughout: 'Find CSS animations or transitions… that animate layout-triggering properties like top, left, width, height, or margin' and 'Convert… position changes to translate(), size changes to scale()'; as an instruction-only skill the absent inline code is excused because the guidance is actionable and the code lives in rule.md.	4 / 5
Workflow Clarity	A clear loose sequence exists (Check → Fix → Explain → Code Review), but there is no validation/verification checkpoint in the body — the verify-the-fix step exists only in references/rule.md and is not surfaced as a workflow step, which matters for a skill that proposes CSS fixes.	3 / 5
Progressive Disclosure	A concise overview body is cleanly split from one well-signaled, one-level-deep reference ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md'), and rule.md is a real file holding the detailed code patterns — easy to navigate with no nested references.	5 / 5
	Total	15 / 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 has an explicit 'Use when…' trigger and concrete review actions, but is weakened by the awkward, duplicative 'related to Use transform and opacity for animations' phrasing and review-generic capability framing. It is mostly clear and distinct but could be tightened into crisper capabilities and more natural trigger synonyms.

Suggestions

Rewrite the awkward clause 'related to Use transform and opacity for animations' into a natural trigger phrase, e.g. 'Use when reviewing CSS animation performance or when animations feel janky'.

Replace the review-generic 'what' with a sharper capability list, e.g. 'Flags layout-triggering animations (top/left/width/height/margin) and converts them to transform/opacity equivalents'.

Add common user-facing synonyms — 'animation performance', 'jank', 'transitions', '60fps' — so the trigger matches how users actually phrase the request.

Dimension	Reasoning	Score
Specificity	Names the CSS-animation domain and a few concrete review actions ('reviewing stylesheets, component styles, and responsive behavior', 'Check the rendered layout across breakpoints and interaction states before proposing a fix'), but the actions are all review-flavored and the phrase 'related to Use transform and opacity for animations' is awkward and duplicative rather than a clear capability list.	3 / 5
Completeness	Both 'what' (check rendered layout across breakpoints and interaction states, propose a fix) and an explicit 'when' ('Use when reviewing stylesheets, component styles, and responsive behavior related to…') are present, but the 'what' is review-generic and the trigger phrasing is awkward rather than crisply concrete.	4 / 5
Trigger Term Quality	Good natural keyword coverage ('stylesheets', 'component styles', 'responsive behavior', 'animations', 'breakpoints', 'interaction states') that a user reviewing CSS would say, though common variations like 'animation performance', 'jank', 'transitions', and '60fps' are missing.	4 / 5
Distinctiveness Conflict Risk	The transform/opacity animation-performance niche is distinct with specific triggers, but the broad 'reviewing stylesheets, component styles, and responsive behavior' framing creates minor overlap risk with general CSS or responsive-review skills.	4 / 5
	Total	15 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/animation-performance/SKILL.md
Commit: 30756a7

Reviewed: 20 days ago

Table of Contents

Discovery Implementation Validation

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.