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.

89

1.23x
Quality

85%

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

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

A well-structured, lean rule set with executable code fixes and a clear review workflow. Its main limitation is that everything is inlined in SKILL.md with no reference files, and a few rules lack code examples.

Suggestions

Add brief executable code snippets for rules that currently only state constraints (e.g. will-change usage, IntersectionObserver pausing, scroll-timeline) to raise actionability.

Consider extracting the per-category rule tables or the common-fixes catalog into a reference file so SKILL.md stays a lean overview pointing one level deep.

DimensionReasoningScore

Conciseness

Lean bullet-style rules with no over-explanation of basic concepts; the glossary and priority table each add distinct value (rendering-step mapping and impact ordering) rather than padding.

5 / 5

Actionability

Provides concrete directives ('do not interleave layout reads and writes', 'default to transform and opacity') plus copy-paste-ready CSS/JS examples for common cases, but not every rule has an accompanying code example.

4 / 5

Workflow Clarity

The review mode gives a clear sequence and output structure (violations, why it matters, fix) with enforcement-order guidance, though explicit validation checkpoints are implicit rather than enumerated.

4 / 5

Progressive Disclosure

Well-organized into clearly labeled sections (how to use, when to apply, glossary, rule categories, common fixes, review guidance) with no external references needed, though all content is inlined at ~110 lines rather than split.

4 / 5

Total

17

/

20

Passed

Description

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

A strong, third-person description that clearly states what the skill does and when to use it with natural trigger phrases. It is specific and distinct, with only minor room to add more concrete action verbs.

DimensionReasoningScore

Specificity

Names the domain and several concrete issue categories ('layout thrashing, compositor properties, scroll-linked motion, and blur effects') with two concrete verbs ('Audit and fix'), but the action verbs are limited compared to a fully comprehensive action list.

4 / 5

Completeness

Explicitly answers both what ('Audit and fix animation performance issues...') and when ('Use when animations stutter, transitions jank, or reviewing...') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Includes natural user phrases ('animations stutter, transitions jank', 'reviewing CSS/JS animation performance') that users would actually say, though a few common synonyms are missing.

4 / 5

Distinctiveness Conflict Risk

Occupies a clear niche (animation performance) with distinct triggers; minimal overlap risk with other skills.

5 / 5

Total

18

/

20

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.