Agent skill · design visual · aiskillstore
optimize
Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.
Why this skill is useful
Provides specific optimization techniques and code snippets for improving web performance that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Identify and fix performance issues to create faster, smoother user experiences. Assess Performance Issues Understand current performance and identify problems: 1. Measure current state: Core Web Vitals: LCP, FID/INP, CLS scores Load time: Time to interactive, first contentful paint Bundle size: JavaScript, CSS, image sizes Runtime performance: Frame rate, memory usage, CPU usage Network: Request count, payload sizes, waterfall 2. Identify bottlenecks: What's slow? (Initial load? Interactions? Animations?) What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) How bad is it? (Perceivable? Annoying? Blocking?) Who's affected? (All users? Mobile only? Slow connections?) CRITICAL: Measure before and after. Premature optimization wastes time. Optimize what actually matters. Optimization Strategy Create systematic improvement plan: Loading Performance Optimize Images: Use modern formats (WebP, AVIF) Proper sizing (don't load 3000px image for 300px display) Lazy loading for below-fold images Responsive images (srcset, picture element) Compress images (80-85% quality is usually imperceptible) Use CDN for faster delivery Reduce JavaScript Bundle: Code splitting (route-based, component-based) Tree shaking (remove unused code) Remove unused dependencies Lazy load non-critical code Use dynamic imports for large components Optimize CSS: Remove unused CSS Critical CSS inline, rest async Minimize CSS files Use CSS containment for independent regions Optimize Fonts: Use font-display: swap or optional Subset fonts (only characters you need) Preload critical fonts Use system fonts when appropriate Limit font weights loaded Optimize Loading Strategy: Critical resources first (async/defer non-critical) Preload critical assets Prefetch likely next pages Service worker for offline/caching HTTP/2 or HTTP/3 for multiplexing Rendering Performance Avoid Layout Thrashing: Optimize Rendering: Use CSS contain property for independent regions Minimize DOM depth (flatter is f …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/optimize