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.

95

1.23x
Quality

Does it follow best practices?

Impact

96%

1.23x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

87%

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

The content is a lean, well-organized ruleset with executable examples and specific thresholds, scoring high on conciseness, actionability, and structure. The only gap is workflow clarity: the review workflow is sequenced by priority but lacks an explicit validation/verify checkpoint, which caps it at 2.

Suggestions

Add an explicit verification step to the review workflow (e.g., after applying a fix, confirm the property is now compositor-only via a named check or tool) to turn the priority sequence into a validate-fix-retry loop.

State a concrete post-fix check for the <file> review mode, such as re-running the rule check or confirming no layout/paint property remains animated, so the sequence ends with an explicit checkpoint.

DimensionReasoningScore

Conciseness

The body is dense and rule-based with terse one-line entries (e.g. "composite: transform, opacity", "do not interleave layout reads and writes in the same frame") and no padded concept explanations. The rendering-steps glossary is borderline explanatory but is compressed to one-line shared vocabulary that the rules depend on, so it earns its place; not level 1 since nothing is padded like the bad PDF example.

3 / 3

Actionability

Provides executable code (CSS transition swap, scroll-timeline, FLIP JS measurement) plus specific actionable directives with named APIs (Scroll/View Timelines, IntersectionObserver) and concrete thresholds ("<=8px"). Not level 2 because the examples are real, executable code rather than pseudocode.

3 / 3

Workflow Clarity

A prioritized sequence is present (priority table plus ordered "review guidance": enforce critical rules first, choose least expensive work, state the constraint), but there is no explicit validation or verify-fix-retry checkpoint. It is not level 3 because the rubric reserves 3 for explicit validation steps/feedback loops, and not level 1 because the sequence and priority ordering are clear.

2 / 3

Progressive Disclosure

No bundle files exist and none are needed; the skill is a single cohesive ruleset organized into a priority table, glossary, per-category rules, common fixes, and review guidance with easy navigation. The rubric allows 3 for no-external-reference skills that are well organized, so this is not level 2 despite the absence of separate reference files.

3 / 3

Total

11

/

12

Passed

Description

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.

The description is strong across all dimensions: it states concrete audit/fix actions, lists specific issue types, provides natural trigger terms, and includes an explicit "Use when" clause in third-person voice. It reads like the rubric's good examples.

DimensionReasoningScore

Specificity

Names concrete actions ("Audit and fix animation performance issues") plus four specific issue categories ("layout thrashing, compositor properties, scroll-linked motion, and blur effects"), matching the multiple-specific-actions anchor. It is not level 2 because the listed actions are comprehensive and concrete rather than partial.

3 / 3

Completeness

Explicitly answers both what ("Audit and fix animation performance issues including...") and when with an explicit "Use when" clause. It is not level 2 because the trigger guidance is explicit rather than implied. Voice is third person throughout, so no voice penalty applies.

3 / 3

Trigger Term Quality

Includes natural user phrasings ("animations stutter, transitions jank, or reviewing CSS/JS animation performance") that a user would actually say. It is not level 2 because coverage spans multiple natural variations, not just a single keyword.

3 / 3

Distinctiveness Conflict Risk

Targets a clear niche (animation performance with named sub-domains) with distinct triggers unlikely to fire for unrelated skills. It is not level 2 because the niche and triggers are specific, not generic enough to overlap with other 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.