Agent skill · software engineering · aiskillstore
performance-optimization
Optimize application performance for speed, efficiency, and scalability. Use when improving page load times, reducing bundle size, optimizing database queries, or fixing performance bottlenecks. Handles React optimization, lazy loading, caching, code splitting, and profiling.
Why this skill is useful
Adds specific React optimization techniques and performance measurement scripts that enhance the AI's ability to optimize web applications.
What it needs
Requires lighthouse, webpack-bundle-analyzer installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Performance Optimization When to use this skill Slow page loads: low Lighthouse score Slow rendering: delayed user interactions Large bundle size: increased download time Slow queries: database bottlenecks Instructions Step 1: Measure performance Lighthouse (Chrome DevTools): Measure Web Vitals (React): Step 2: Optimize React React.memo (prevent unnecessary re-renders): useMemo & useCallback: Lazy Loading & Code Splitting: Step 3: Optimize bundle size Webpack Bundle Analyzer: Tree Shaking (remove unused code): Dynamic Imports: Step 4: Optimize images Next.js Image component: Use WebP format: Step 5: Optimize database queries Fix the N+1 query problem: Add indexes: Caching (Redis): Output format Performance optimization checklist Constraints Required rules (MUST) 1. Measure first: profile, don't guess 2. Incremental improvements: optimize one thing at a time 3. Performance monitoring: track continuously Prohibited items (MUST NOT) 1. Premature optimization: don't optimize when there is no bottleneck 2. Sacrificing readability: don't make code complex for performance Best practices 1. 80/20 rule: 80% improvement with 20% effort 2. User-centered: focus on improving real user experience 3. Automation: performance regression tests in CI References web.dev/vitals React Optimization Webpack Bundle Analyzer Metadata Version Current version: 1.0.0 Last updated: 2025-01-01 Compatible platforms: Claude, ChatGPT, Gemini Related skills database-schema-design ui-components Tags #performance #optimization #React #caching #lazy-loading #web-vitals #code-quality Examples Example 1: Basic usage <!-- Add example content here --> Example 2: Advanced usage <!-- Add advanced example content here -->
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/performance-optimization--0fb53c