Performance Tuning
Optimize Core Web Vitals, bundle size, and rendering for faster Next.js and React apps
What You Can Do
Diagnose and fix performance bottlenecks across your entire stack. Measure Core Web Vitals against 2026 standards, analyze bundle size bloat, identify unused dependencies, and optimize rendering strategies and caching. You'll receive specific code changes, configuration tweaks, and architecture recommendations tailored to your framework.
Features
Measures LCP, INP, CLS against industry benchmarks and provides targeted fixes for each metric
Identifies largest chunks, bloated dependencies, and unused packages with replacement suggestions
Recommends SSR vs CSR, code splitting, dynamic imports, and lazy loading patterns
Optimizes image formats, lazy loading, font subsetting, and preload/prefetch strategies
Sets up browser caching, CDN strategies, and service worker patterns for fast repeat visits
Analyzes N+1 queries, missing indexes, and connection pooling for Python backends
Runs automated audits and parses results to prioritize optimizations by impact
Example Output
Example 1: Bundle Analysis Report
- Total JS: 285KB gzip → 120KB gzip (58% reduction)
- Removed
moment.js(300KB) → replaced withdate-fns(2KB) - Code-split lazy routes: Dashboard chunk 85KB → 32KB
- Recommended: Enable gzip compression in nginx, upgrade lodash to lodash-es
Example 2: Core Web Vitals Fix
- LCP: 3.8s → 1.9s (fix: preload hero image, use next/image)
- INP: 450ms → 180ms (fix: move blocking script to worker, debounce input handler)
- CLS: 0.18 → 0.05 (fix: reserve space for ads, set explicit dimensions)
Example 3: Database Query Optimization
- Identified 8 N+1 queries in user dashboard
- Added indexes on user_id, created_at columns
- Connection pool tuned: min 5 → 10, max 20 → 40
- Query time reduced from 2.3s to 340ms
What's Included
- SKILL.md: Complete performance tuning framework with measurement targets and command references
- Lighthouse Audit Script: Ready-to-run commands for local performance testing
- Bundle Analysis Checklist: Step-by-step dependency audit and replacement suggestions
- Core Web Vitals Targets Table: 2026 good/needs-work/poor thresholds for LCP, INP, CLS
- Performance Quick Wins: Common bloat sources and high-impact fixes by framework
Who It's For
- Full-stack engineers optimizing Next.js or React applications
- Performance engineers auditing and improving web vitals
- Backend developers tuning Python database queries and caching
- DevOps engineers configuring CDN and caching strategies
- Product managers focused on conversion and SEO improvements
Best For
- Fixing slow page loads and Core Web Vitals failures
- Reducing JavaScript bundle size and improving time-to-interactive
- Diagnosing N+1 queries and database bottlenecks
- Optimizing image, font, and asset loading strategies
- Planning code-splitting and lazy-loading architecture
- Analyzing Lighthouse reports and prioritizing improvements
You might also like
You can design precision-targeted engagement campaigns by analyzing player behavior patterns, identifying optimal trigger moments, and building multi-variant tests with clear success metrics. The skill helps you segment players by engagement patterns and churn risk, map psychological triggers to campaign timing, and create feedback loops that improve performance week-over-week—transforming generic broadcast campaigns into strategic retention mechanics tailored to specific player archetypes.
Analyze your entire codebase to identify hardcoded design values (colors, typography, spacing) that violate design system compliance. Claude generates targeted refactoring suggestions and automated replacements that map hardcoded values to your design token system. You maintain a single source of truth for your UI, making brand updates and scaling design changes seamless across all components.
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
You can transform raw influencer analytics and campaign goals into persuasive, customized partnership briefs that demonstrate strategic value to creators. The skill generates audience overlap analysis, engagement benchmarks, deliverable expectations, and negotiation talking points—all tailored to your specific game, live ops initiative, and creator profile. This speeds up creator outreach while increasing acceptance rates by showing creators exactly why the partnership matters for their audience.
You can create professional presentations in multiple modes—from quick lightweight prototypes to fully referenced decks with visualization planning. The skill guides you through a serial pipeline that normalizes source material, detects your input mode (quick, basic, or advanced), compiles your deck structure, and produces either self-contained HTML or exportable PPTX formats. You maintain control at each gate with clear confirmation points before advancing to the next phase.
by russell-cell
You can systematically evaluate monetization opportunities by analyzing player spending funnels, modeling revenue scenarios across different pricing configurations, and segmenting audiences for targeted monetization strategies. The skill helps you forecast ARPU changes, validate pricing assumptions through controlled A/B testing frameworks, and present monetization recommendations with detailed financial projections and risk assessments.
You can create self-contained HTML presentations with distinctive design aesthetics, smooth animations, and custom typography that feel intentional rather than generic. Convert PowerPoint files directly into interactive web slides, or build custom decks from scratch with precise control over layout, color schemes, and motion. Every slide fits perfectly in the viewport—no scrolling, no dependencies, no setup required.
You can rapidly prototype and build accessible user interfaces by combining shadcn/ui's pre-built Radix UI components with Tailwind CSS utility-first styling. This skill enables you to implement complex UI patterns, responsive layouts, dark mode themes, and design systems while maintaining full type safety and accessibility standards. Generate visual designs, posters, and branded materials alongside functional interface components.
by trungtv