CtrlK
BlogDocsLog inGet started
Tessl Logo

optimize-web-animations

Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations performant, pause offscreen animations, look for memory leaks, profile pages that slow the computer over time, fix janky scrolling, reduce CPU/GPU use, or repeat the "only play in view" optimization on React/Vite/Next/frontend pages using Codex Browser.

72

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

77%

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

The body is highly actionable with a well-sequenced, validated workflow, but it is verbose and largely monolithic with only a single offloaded reference. Tightening redundancy and splitting more detail into references would improve it.

Suggestions

De-duplicate guidance that appears in both Step 3 and 'Good Fix Patterns' (RAF loop control, isDisposed guards, frame-delta caps) by keeping the how-to in the workflow and the rationale/pattern in one place.

Move the long leak-hardening checklist into a references file (e.g. references/leak-hardening.md) and link to it from the workflow to reduce inline bulk and improve progressive disclosure.

Trim exhaustive technology enumeration in Step 1's search lists to the highest-signal items, since the description already covers the full technology scope.

DimensionReasoningScore

Conciseness

Content is actionable rather than padded, but heavy technology enumeration and redundancy between Step 3 and the 'Good Fix Patterns' section (RAF loop control, isDisposed guards, frame-delta caps all appear twice) could be tightened.

2 / 3

Actionability

Provides executable CSS, bash, and git-index-isolation code, specific selectors, concrete thresholds (IntersectionObserver ~0.01), and a measurable target (offscreenRunningCount: 0).

3 / 3

Workflow Clarity

A clear 7-step sequence with an explicit verification checkpoint (rerun profiles, compare before/after route cycles, confirm offscreen loops inactive) forming a validate-fix-rerun feedback loop.

3 / 3

Progressive Disclosure

One clearly signaled, one-level-deep reference (references/browser-profiling.md) exists, but the bulk of detail (leak-hardening checklist, fix patterns) is inline in SKILL.md rather than split out.

2 / 3

Total

10

/

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 specific, trigger-rich, and clearly distinguishes the skill with both a what and a when. It uses third-person voice and avoids vague fluff.

DimensionReasoningScore

Specificity

Lists multiple concrete actions ('Profile, audit, and optimize') plus specific targets (CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, observers).

3 / 3

Completeness

Explicitly answers both what (profile/audit/optimize frontend page performance) and when via a clear 'Use when the user asks...' trigger clause.

3 / 3

Trigger Term Quality

Includes natural user phrasing such as 'make animations performant', 'pause offscreen animations', 'look for memory leaks', 'fix janky scrolling', and 'reduce CPU/GPU use'.

3 / 3

Distinctiveness Conflict Risk

Narrow niche (frontend animation performance and memory-leak hardening) with distinctive triggers and a named tool (Codex Browser), making conflict with other skills unlikely.

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
MengTo/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.