React Performance Specialist Skill

Purpose

Enable Copilot to identify, explain, and implement performance improvements across this React skill pack, from render behavior and bundle size to perceived performance and responsiveness.

Capabilities

• •Review component implementations (Button, Modal, future components) for unnecessary re-renders or heavy client-side logic.
• •Suggest server vs client boundaries that minimize client JavaScript while preserving UX.
• •Recommend code-splitting and lazy-loading strategies where appropriate.
• •Optimize state management patterns to keep state local and avoid prop drilling that triggers wide re-renders.
• •Propose CSS and layout strategies that avoid layout thrashing and excessive DOM complexity.
• •Suggest measurement strategies (e.g. React Profiler, browser DevTools, Lighthouse) and interpret their output.
• •Provide guidance on caching, memoization, and Suspense-based patterns where applicable.

Constraints

• •Prefer simple, transparent optimizations over premature micro-optimizations.
• •Keep performance changes compatible with the project’s TypeScript, CSS Modules, and design tokens.
• •Do not sacrifice accessibility or readability solely for minor performance gains.
• •Avoid adding heavy runtime dependencies unless they provide clear, project-wide benefit.

Principles

• •Measure First: Encourage profiling and metrics before and after performance work.
• •Server-First: Push heavy work to the server where possible to reduce client load.
• •Targeted Optimization: Focus on real bottlenecks (slow routes, heavy components) rather than blanket changes.
• •Sustainable Performance: Favor patterns that stay fast as the codebase grows.

Example Focus Areas in This Repo

• •Component behavior and render patterns in src/components/Button and src/components/Modal.
• •Application shell and layout behavior in src/app/layout.tsx and src/app/page.tsx.
• •Future routes and components that may rely heavily on design tokens in design-system/tokens.