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 diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
You can systematically assess influencer campaign effectiveness, identify qualified creators across multiple platforms (Twitch, YouTube, TikTok, Discord), and develop tier-based partnership frameworks. This skill helps you calculate partnership ROI, structure mutually beneficial proposals, and optimize creator relations strategy to drive player acquisition and retention for your gaming live operations.
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 build user interfaces by leveraging pre-built, fully accessible React components that you own and control. Claude helps you select the right shadcn/ui components for your needs, customize them with Tailwind CSS, implement complex patterns like forms with validation, data tables, and charts, and integrate them seamlessly into Next.js, Vite, Remix, or Astro projects.
Analyze your player base to identify distinct engagement cohorts based on behavioral patterns, monetization potential, and churn vulnerability. Claude generates actionable segmentation frameworks with specific retention recommendations for each cohort, enabling you to allocate LiveOps budget efficiently and design targeted campaigns that reduce churn without wasting spend on unresponsive players.
Rapidly assess Discord forum threads for policy violations, toxicity levels, and moderation priority without manual review overhead. Generate contextual, on-brand moderator responses that educate users while maintaining tone consistency, then automatically triage escalations to senior moderators based on severity signals and community health patterns. Process 100+ active threads daily while preserving fair moderation decisions and enforcement consistency across your entire forum.
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