Performance optimization

Skill t4sh/dotfiles/agents/skills/performance-optimization

Use when animation runs slow, janky, or causes frame dropsFrom its SKILL.md

Install

npx -y skills add t4sh/dotfiles --skill performance-optimization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.2 KB, 501 tokens by cl100k_base, as published. Nobody here has run it

Performance Optimization

Diagnose and fix slow or janky animations using Disney's 12 principles.

Problem Indicators

Frame rate drops below 60fps
Stuttering or choppy motion
UI feels sluggish
Battery drain on mobile
Layout thrashing

Diagnosis by Principle

Straight Ahead vs Pose-to-Pose

Issue: Calculating every frame in real-time Fix: Use pose-to-pose (keyframe) animation. Let the browser interpolate between states using CSS transitions or will-change.

Timing

Issue: Too many simultaneous animations Fix: Stagger animations. Offset start times by 50-100ms to reduce concurrent calculations.

Secondary Action

Issue: Too many secondary effects Fix: Remove non-essential secondary animations on low-power devices. Use prefers-reduced-motion query.

Solid Drawing

Issue: Animating expensive properties (width, height, top, left) Fix: Only animate transform and opacity. These are GPU-accelerated and skip layout/paint.

Staging

Issue: Animating off-screen elements Fix: Only animate what's visible. Use Intersection Observer to pause off-screen animations.

Quick Fixes

Replace JS animations with CSS - Browser-optimized
Use transform instead of position properties - GPU layer
Add will-change sparingly - Hints to browser
Reduce simultaneous animations - Stagger or sequence
Lower animation complexity on mobile - Detect device capability

Troubleshooting Checklist

Check DevTools Performance tab for long frames
Verify animations use transform/opacity only
Count simultaneous animations (keep under 3-4)
Test on lowest-spec target device
Check for layout thrashing (forced reflows)
Verify will-change isn't overused
Test with CPU throttling enabled
Check if animations pause when tab is hidden

Code Pattern

/* Fast */
.element {
  will-change: transform;
  transition: transform 200ms ease-out;
}
.element:hover {
  transform: translateY(-4px);
}

/* Slow - avoid */
.element:hover {
  top: -4px; /* Triggers layout */
}

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.