performance-optimization

What problem does it solve?

This Skill identifies and resolves performance bottlenecks across React UI, SQLite database, and Electron builds. It eliminates slow user experiences and ensures your application runs smoothly and efficiently.

Core Features & Use Cases

• React Rendering Analysis: Profiles UI for unnecessary re-renders, memoizes components, and optimizes context usage.
• SQLite Query Optimization: Analyzes query plans, recommends missing indexes, and configures database for optimal speed (e.g., WAL mode).
• Bundle Size Reduction: Identifies large dependencies, enables tree-shaking, and suggests dynamic imports for faster load times.
• Use Case: When the UI feels sluggish, Claude profiles React components, analyzes SQLite query plans, and suggests code-splitting strategies, instantly pinpointing and fixing performance issues to deliver a smooth user experience.

Quick Start

Profile React components using DevTools

pnpm dev

Then open browser, React DevTools -> Profiler -> Record

Analyze SQLite query plans

sqlite3 justice.db "EXPLAIN QUERY PLAN SELECT * FROM cases WHERE user_id = 1;"

Analyze bundle size after build

pnpm build pnpm exec vite-bundle-visualizer