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.
96
96%
Does it follow best practices?
Impact
96%
1.23xAverage score across 3 eval scenarios
Passed
No known issues
Quality
Discovery
100%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 well-crafted skill description that excels across all dimensions. It provides specific technical capabilities, includes natural trigger terms users would actually say when experiencing animation issues, explicitly states both what it does and when to use it, and carves out a distinct niche that won't conflict with broader CSS or JavaScript skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'audit and fix animation performance issues' with explicit examples including 'layout thrashing, compositor properties, scroll-linked motion, and blur effects'. | 3 / 3 |
Completeness | Clearly answers both what ('Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects') and when ('Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance'). | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'animations stutter', 'transitions jank', 'CSS/JS animation performance', plus technical terms like 'layout thrashing' and 'blur effects' that developers would search for. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on animation performance with distinct triggers like 'stutter', 'jank', 'compositor properties' that wouldn't overlap with general CSS or JavaScript skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
92%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality skill that efficiently covers animation performance patterns with clear prioritization and actionable code examples. The content is appropriately terse, assumes Claude's competence with CSS/JS, and provides concrete before/after fixes. The only weakness is that all content is monolithic rather than using progressive disclosure to separate the quick reference from detailed guidance.
Suggestions
Consider extracting detailed rule explanations or extended examples into a separate REFERENCE.md or EXAMPLES.md file, keeping SKILL.md as a quick reference overview
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely lean and efficient. Uses tables, bullet points, and terse rules without explaining what animations or CSS are. Every section earns its place with no padding or unnecessary context. | 3 / 3 |
Actionability | Provides concrete, executable CSS and JS code examples with before/after patterns. The common fixes section shows copy-paste ready solutions for layout thrashing, scroll-linked motion, and FLIP measurement. | 3 / 3 |
Workflow Clarity | Clear priority ordering (1-9) with explicit categorization by impact level. The 'how to use' section provides two distinct workflows with specific output requirements (violations, why it matters, concrete fix). | 3 / 3 |
Progressive Disclosure | Well-organized with clear sections and a quick reference table, but all content is inline in a single file. For a skill of this length (~150 lines), separating detailed rule explanations or extended examples into referenced files would improve navigation. | 2 / 3 |
Total | 11 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- ibelick/ui-skills
- Commit
95d0e08
- 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.