fixing-motion-performance
Fix animation performance issues.
Install with Tessl CLI
npx tessl i github:ibelick/ui-skills --skill fixing-motion-performanceOverall
score
61%
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
22%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 description is too terse and vague to effectively guide skill selection. It lacks specific concrete actions, has no 'Use when' clause, and provides minimal trigger terms. While 'animation performance' provides some domain focus, the description would benefit significantly from listing specific techniques and explicit usage triggers.
Suggestions
Add specific concrete actions like 'Profile render performance, optimize CSS transitions, reduce JavaScript animation overhead, fix frame rate drops, eliminate layout thrashing'
Include a 'Use when...' clause with natural trigger terms like 'Use when animations are laggy, stuttering, dropping frames, or when the user mentions jank, slow transitions, or choppy animations'
Add technology-specific keywords users might mention: 'CSS animations', 'requestAnimationFrame', 'GPU acceleration', 'transform', 'opacity'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description uses vague language with only one abstract action 'Fix'. It doesn't list concrete actions like 'optimize frame rates', 'reduce jank', 'profile render cycles', or specify what types of animations or performance issues. | 1 / 3 |
Completeness | Only weakly addresses 'what' (fix performance issues) with no 'when' clause or explicit trigger guidance. Missing a 'Use when...' statement entirely, which per guidelines should cap completeness at 2, but the 'what' is also too weak to merit a 2. | 1 / 3 |
Trigger Term Quality | Contains some relevant keywords ('animation', 'performance') that users might naturally say, but misses common variations like 'laggy', 'slow animations', 'jank', 'frame drops', 'stuttering', 'CSS animations', 'JavaScript animations', or '60fps'. | 2 / 3 |
Distinctiveness Conflict Risk | Somewhat specific to animations but could overlap with general performance optimization skills, CSS skills, JavaScript skills, or rendering skills. 'Performance issues' is broad enough to conflict with other performance-related skills. | 2 / 3 |
Total | 6 / 12 Passed |
Implementation
77%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, concise skill that provides clear prioritized rules for animation performance. Its main strength is the lean, actionable rule format with explicit priority ordering. The primary weakness is the lack of concrete code examples showing correct implementations, which would significantly improve actionability for a technical domain like animation performance.
Suggestions
Add 2-3 concrete code examples showing correct vs incorrect patterns for the most critical rules (e.g., batching DOM reads/writes, FLIP transitions)
Include a brief executable example demonstrating proper will-change usage with setup and teardown
Consider extracting detailed examples to a separate EXAMPLES.md file to maintain the lean overview while providing deeper reference material
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely lean and efficient. No unnecessary explanations of what animations are or how browsers work. Every section earns its place with actionable rules and constraints Claude can apply directly. | 3 / 3 |
Actionability | Provides clear rules and constraints but lacks concrete code examples. Rules like 'batch all DOM reads before writes' and 'use FLIP-style transitions' would benefit from executable code snippets showing correct vs incorrect patterns. | 2 / 3 |
Workflow Clarity | Clear priority ordering (1-9) with explicit categorization by impact level. The 'how to use' section provides unambiguous invocation patterns, and 'review guidance' gives clear sequencing for evaluation work. | 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 this comprehensive, separating detailed examples or edge cases into referenced files would improve navigation. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
62%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 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
body_examples | No examples detected (no code fences and no 'Example' wording) | Warning |
body_output_format | No obvious output/return/format terms detected; consider specifying expected outputs | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 10 / 16 Passed | |
- 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.