Performance.
When the app feels slow. The skill that profiles, identifies the bottleneck, and fixes it without making the code worse.
React Renders, Bundles, Memory, Vite, Electron Startup.
Performance work fails when engineers optimize the wrong thing. This skill enforces measure-first: profile, identify the actual bottleneck, fix that one thing, re-measure. Covers React rendering (memoization, code-split boundaries), bundle analysis (tree-shake audit, heavy dependency replacement), memory leak detection, Vite config tuning, and Electron startup optimization (it is usually the splash window).
Four recipes.
React rendering audit
React DevTools Profiler. Find unnecessary re-renders. Apply useMemo/useCallback ONLY where re-render cost > computation cost. Anti-pattern: memoizing everything (it is slower).
Bundle analysis
rollup-plugin-visualizer for Vite. Identify the biggest deps. Lazy-load route-level. Replace heavy libs (moment with date-fns, lodash with individual functions).
Memory leak detection
Chrome DevTools Memory tab. Heap snapshots before/after. Find detached DOM nodes. Cleanup useEffect returns. Dispose Three.js geometries/materials/textures explicitly.
Electron startup
Most startup time is splash to main window. Pre-warm the renderer. Lazy-import heavy modules. Use ASAR for faster IO. Profile with --inspect-brk and Chrome DevTools.
It composes.
Skills compose into workflows. Performance is rarely the only skill you will use — it pairs naturally with these others in the library.
One command.
Installs only stryx-performance (skip the other 19) into ~/.claude/skills/stryx-performance/.
Free for all use.
Stryx Labs License v1.0. Use Performance in personal, commercial, internal, and production work. No attribution required.