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.

77

Quality

96%

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

92%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 strong, operational skill body: executable examples, a well-sequenced workflow with real verification checkpoints, and appropriate use of a one-level reference. Slightly less than perfectly lean, but every section is actionable rather than explanatory.

DimensionReasoningScore

Conciseness

Instruction-dense with no basic-concept padding (assumes Claude knows CSS/RAF/WebGL), but a few enumerated sub-bullets could be tightened; fits 'efficient, minor instances that could be trimmed' rather than the perfectly-lean top anchor.

4 / 5

Actionability

Copy-paste-ready CSS pause rules, concrete bash gates (`git diff --check`, `npm run lint`, `npm run build`), specific thresholds (`IntersectionObserver` ~0.01), and an executable JS profiler in the reference — fully executable across common cases.

5 / 5

Workflow Clarity

A clear 7-step sequence with explicit validation checkpoints (step 4 'Verify behavior, not just builds' targeting `offscreenRunningCount: 0`, step 5 local gates) and feedback loops (rerun profiles after patching), matching the top anchor.

5 / 5

Progressive Disclosure

SKILL.md stays an overview and offloads the reusable JS evaluator to a single, clearly-signaled, one-level-deep reference ('See references/browser-profiling.md'), which exists as a real file — matching the well-structured top anchor.

5 / 5

Total

19

/

20

Passed

Description

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

An excellent description: third-person, content-dense rather than padded, with explicit what/when structure and a rich set of natural trigger phrases. The only minor risk is length, but every enumerated term earns its place for disambiguation.

DimensionReasoningScore

Specificity

Names three concrete verbs ('Profile, audit, and optimize') and comprehensively enumerates specific targets (CSS animations, canvas/WebGL RAF loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, observers), matching the comprehensive-coverage anchor.

5 / 5

Completeness

Explicitly answers both what ('Profile, audit, and optimize frontend page performance with emphasis on...') and when ('Use when the user asks to...') with concrete trigger phrases, matching the top anchor.

5 / 5

Trigger Term Quality

The 'Use when' clause packs in natural user phrases — 'make animations performant', 'pause offscreen animations', 'look for memory leaks', 'fix janky scrolling', 'reduce CPU/GPU use' — with synonyms and framework variants, matching the comprehensive-synonyms anchor.

5 / 5

Distinctiveness Conflict Risk

Occupies a clear niche (offscreen-animation and leak hardening on frontend pages via Codex Browser) with distinct triggers and minimal overlap risk with other skills.

5 / 5

Total

20

/

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