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