agentleFS
Sign inStart free
juandelossantosjuandelossantos/another-agent-skills/skills/optimize-skill/SKILL.md

optimize-skill

Skill1 starsChanged 11 days agoMITView on GitHub

Fix performance issues: bundle size, animations, reflows, lazy loading, image optimization, render blocking. Use after profiling reveals bottlenecks. Do NOT use for cosmetic changes.

We split this skill into the rules it gives an agent

1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 3 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    After profiling reveals a specific bottleneck

    line 23

“Common” is measured: kept by at least 6 in 10 of the 3 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Optimize Skill

Fix performance issues so applications load fast and animate smoothly.

Performance fixes are deterministic. Profile first, then apply the specific fix for the specific bottleneck.

When to Use

  • After profiling reveals a specific bottleneck
  • User says "this page is slow"
  • Lighthouse / PageSpeed score is below target
  • User says "animations jank" or "scrolling stutters"
  • Bundle size exceeds budget (500KB critical path JS)
  • Images are loading at full resolution on mobile

When NOT to Use

  • Speculative optimization (measure first)
  • Design changes that happen to improve performance
  • Pre-optimization during initial build (build clean first, optimize later)

Output Contract

ArtifactFormatLocationQuality Criteria
Performance fixesHTML/CSS/JS code changesSource filesProfile-validated, Lighthouse ≥90, critical JS <500KB

Process

1. Profile

Identify the bottleneck before fixing:

SymptomLikely cause
Slow first loadLarge bundle, render-blocking resources, unoptimized images
Slow after loadMissing lazy load, too many fonts, too much JS
Janky animationAnimating width/height/top/left, missing will-change
Janky scrollLayout thrashing, expensive handlers on scroll/resize
Slow interactionLong tasks, heavy computation on main thread

2. Fix by Category

Bundle Size

IssueFix
No code splittingAdd dynamic imports for route-level chunks
Large dependencyReplace with smaller alternative or tree-shake
Duplicate polyfillsDeduplicate, use core-js selectively
Unused CSSRemove dead styles, use purge (Tailwind JIT)
Heavy library only used onceInline the small part, remove the import

Images

IssueFix
Full-res images on mobileServe responsive sizes via srcset
No lazy loadingAdd loading="lazy" to below-fold images
Giant hero imageCompress to WebP/AVIF, limit to viewport width
Missing dimensionsAdd width and height to prevent CLS
Icon as image fileInline SVG or icon sprite

Animation

IssueFix
Animating widthSwitch to transform: scaleX()
Animating top/leftSwitch to transform: translate()
No will-changeAdd will-change: transform, opacity on animated elements
Expensive filterPrefer box-shadow or separate overlay element
JS animationSwitch to CSS animation or Web Animations API

Rendering

IssueFix
Layout thrashingBatch DOM reads before writes, use requestAnimationFrame
Expensive scroll handlerDebounce or use IntersectionObserver
Long task > 50msDefer with requestIdleCallback or split into microtasks
Reflow on scrollAvoid reading offsetTop, scrollTop in scroll handlers

3. Output Format

/optimize the product listing page

Fix 1: Lazy load images
  - Before: <img src="...">
  - After: <img loading="lazy" src="...">

Fix 2: Code-split review form
  - Before: import ReviewForm from './ReviewForm' (eager)
  - After: const ReviewForm = lazy(() => import('./ReviewForm'))

Fix 3: Reduce hero image
  - Before: 2400x1600 JPEG (1.2MB)
  - After: 1200x800 WebP (180KB) via <picture> + srcset

Fix 4: Animation jank on hover card
  - Before: transition: width 200ms, height 200ms
  - After: transition: transform 200ms; transform: scale(1.05)

4. Escalation Rules

FindingEscalate to
Need new component structure for performanceredesign or build
Image CDN or format not availableInfra decision
Third-party script blockingNegotiate alternative with team

→ See guides/BOTTLENECK-GUIDE.md for common bottlenecks and fixes. → See guides/METRICS-GUIDE.md for performance budgets and measurement.

Pitfalls

  • Optimizing before profiling — Measuring is not optional. The bottleneck is never where you guess.
  • Premature code splitting — Splitting every import adds network overhead. Split routes, not components.
  • Image over-optimization — Aggressive compression creates artifacts. Balance size vs quality.
  • Ignoring mobile network — 3G is real. Test on slow networks.

QA Gates

  • Profiling data exists (not speculative fixes)
  • Images are lazy-loaded below fold
  • Images use responsive sizes (srcset)
  • Animations use transform and opacity only
  • No layout thrashing in scroll/resize handlers
  • Route-level code splitting in place
  • Critical JS bundle < 500KB
  • Lighthouse performance score ≥ 90 (or improvement confirmed)

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free