UI Performance Guard - Enforce Vercel-standard performance optimizations for React and Next.js applications
Enforces performance optimizations for React and Next.js applications following Vercel standards
Tags
Updated: 2026-02-12Capabilities
Typical Inputs
Typical Outputs
What this skill does
- eliminate waterfalls
- defer await until data needed
- use Promise.all for concurrent fetching
- implement Suspense boundaries
- avoid barrel file imports
- use dynamic imports
- audit third-party libraries
- extract expensive work to memoized components
- use functional updates in setState
- deduplicate global event listeners
- optimize SVG precision
- use content-visibility: auto
- hoist static JSX elements
Inputs
- React application
- Next.js application
- codebase
- performance budget
- npm scripts
Outputs
- optimized code
- performance report
- lint warnings
- bundle size analysis
Requirements
- Node.js environment
- npm or yarn
- React project
- Next.js project
- performance budget definition