CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

92

1.23x
Quality

90%

Does it follow best practices?

Impact

96%

1.23x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

80%Weight 40%Scale 1-3

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

A tight, actionable animation-performance rulebook with executable before/after examples and a clear review contract. Its main gaps are the absence of explicit validation/feedback checkpoints in the review workflow and a fully monolithic single-file structure with no progressive disclosure to separate reference files.

Suggestions

Add an explicit review workflow with checkpoints, e.g. a feedback loop: run the file check -> list violations -> verify each suggested fix preserves behavior -> re-check, so workflow_clarity reaches the 3-anchor's validation standard.

Externalize the detailed per-category rules (e.g. sections 1-9) into a references/ file (e.g. RULES.md) and keep SKILL.md as a concise overview + quick reference that links to it, enabling one-level-deep progressive disclosure.

For destructive-suspect fixes (library migration, layout-animation rewrites), add a brief confirm-before-applying checkpoint since the skill itself warns against unrequested migrations.

DimensionReasoningScore

Conciseness

Lean and dense: bullet-point rules, a compact glossary, and before/after snippets with no explanatory padding of concepts Claude already knows. It is not a 2 because there is no unnecessary explanation to tighten.

3 / 3

Actionability

Concrete constraints with specific thresholds ("keep blur animation small (<=8px)") plus fully executable CSS/JS before/after examples and a defined review report format (violations, why, fix). Not a 2 because the code is real and copy-paste ready, not pseudocode.

3 / 3

Workflow Clarity

A priority table (1-9) and 'enforce critical rules first' give a review sequence, and the report contract is defined, but there are no explicit validation checkpoints or feedback loops. It is not a 3 because the 3-anchor requires explicit validation/error-recovery steps, and not a 1 because a clear sequence and output structure are present.

2 / 3

Progressive Disclosure

Sections are well-organized (glossary, priority table, per-category rules, common fixes), but everything is inline in one ~150-line file with no external references or content split. It is not a 3 because the 3-anchor requires well-signaled one-level-deep references / appropriately split content, and not a 1 because it is well-sectioned rather than a monolithic wall.

2 / 3

Total

10

/

12

Passed

Description

100%Weight 40%Scale 1-3

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it states concrete capabilities and pairs them with an explicit 'Use when' clause of natural trigger phrases. It uses third-person imperative voice and avoids fluff or over-claims.

DimensionReasoningScore

Specificity

Names concrete actions ("Audit and fix") and lists multiple specific issue types ("layout thrashing, compositor properties, scroll-linked motion, and blur effects"), matching the multi-action 3-anchor.

3 / 3

Completeness

Explicitly answers both what ("Audit and fix animation performance issues including...") and when ("Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.").

3 / 3

Trigger Term Quality

Natural user phrasing is well covered — "animations stutter", "transitions jank", "reviewing CSS/JS animation performance" are terms a user would actually say when needing this skill.

3 / 3

Distinctiveness Conflict Risk

A clear niche (animation performance) with distinct, specialized triggers unlikely to fire for unrelated skills.

3 / 3

Total

12

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
ibelick/ui-skills
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.