fixing-motion-performance

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

Quality

79%

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/fixing-motion-performance/SKILL.md

Quality

Content

71%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a well-structured, actionable skill for animation performance auditing. Its strengths are the clear priority system, concrete before/after code examples, and efficient rule categorization. The main weaknesses are the lack of explicit verification steps after applying fixes and the opportunity to split detailed guidance into referenced files for better progressive disclosure.

Suggestions

Add a verification step after applying fixes, such as 'After applying fixes, verify compositor-only animation using browser DevTools Layers panel or Performance tab to confirm no layout/paint triggers remain.'

Consider extracting detailed examples for each rule category into a separate EXAMPLES.md or PATTERNS.md file, keeping SKILL.md as a concise overview with references.

Dimension	Reasoning	Score
Conciseness	The content is efficient and well-organized, assuming Claude's competence with animation concepts. Minor verbosity in the 'When to Use' section which partially overlaps with the usage instructions, and the rendering steps glossary is brief but could be considered unnecessary for Claude. Overall, tokens are well-spent.	4 / 5
Actionability	The common fixes section provides concrete before/after code examples for CSS and JS, and the rules are specific enough to act on. However, many rules in the categories are stated as principles rather than executable steps (e.g., 'use will-change temporarily and surgically' lacks specifics on what 'temporarily' means). The review output format (violations, why it matters, concrete fix) is well-defined.	4 / 5
Workflow Clarity	The priority table provides clear sequencing for review, and the review guidance section establishes a clear order of operations (critical rules first, then least expensive rendering). The usage section clearly defines two modes of operation. However, there's no explicit validation/verification step after applying fixes, which is a minor gap for a review-and-fix workflow.	4 / 5
Progressive Disclosure	The content is well-structured with clear sections and a priority table, but everything is in a single file with no references to supporting materials. At ~120 lines, some categories (especially blur/filters, view transitions, scroll) could benefit from separate detailed reference files with more examples. The skill is borderline for needing external files but would benefit from them.	3 / 5
	Total	15 / 20 Passed

Description

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

This is a strong, well-crafted skill description that clearly defines its niche in animation performance debugging. It provides concrete technical areas of focus, explicit trigger conditions with natural user language, and is distinctive enough to avoid conflicts with broader CSS/JS skills. Minor improvements could include a few more natural-language synonyms for trigger terms.

Dimension	Reasoning	Score
Specificity	Lists several specific actions and issues: 'layout thrashing, compositor properties, scroll-linked motion, and blur effects.' These are concrete technical areas. Minor gaps—it doesn't mention specific fixes or tools used—but coverage is good.	4 / 5
Completeness	Clearly answers both 'what' (audit and fix animation performance issues including specific categories) and 'when' (explicit 'Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance'). Both are concrete and well-articulated.	5 / 5
Trigger Term Quality	Includes strong natural trigger terms like 'animations stutter', 'transitions jank', 'CSS/JS animation performance', 'layout thrashing', and 'blur effects'. Could benefit from additional synonyms like 'laggy animations', 'choppy scrolling', or 'requestAnimationFrame'.	4 / 5
Distinctiveness Conflict Risk	Highly specific niche—animation performance debugging—with distinct trigger terms like 'layout thrashing', 'compositor properties', 'scroll-linked motion', and 'jank'. Unlikely to conflict with general CSS or JavaScript skills.	5 / 5
	Total	18 / 20 Passed

Validation

90%

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 — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: skills/fixing-motion-performance/SKILL.md
Commit: 6c06908

Reviewed: ~11 hours 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.