performance-rules
CommunityBoost React/Next.js Core Web Vitals
Software Engineering#performance#react#nextjs#virtualization#lazy-loading#bundle-analysis#core-web-vitals
Authormauriciodelrio
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps front-end engineers identify and fix performance regressions in React and Next.js applications by focusing on Core Web Vitals, long tasks, and inefficient rendering patterns to improve perceived load, interaction latency, and visual stability.
Core Features & Use Cases
- Measure before optimizing: workflow and tools to profile with React DevTools Profiler and Web Vitals.
- Core Web Vitals targets: concrete goals for LCP, INP, and CLS and actions to reach them.
- Lazy loading & code splitting: guidance for React lazy/Suspense and next/dynamic for browser-only modules.
- Memoization & rendering: when to use useMemo, useCallback, and React.memo with profiler-driven rules.
- Virtualization: when and how to virtualize long lists using @tanstack/react-virtual.
- Image and bundle optimization: next/image usage, priority and sizes, bundle analysis and size budgets.
- Monitoring & observability: how to collect and report Web Vitals for ongoing measurement.
Quick Start
Use the performance-rules skill to analyze a Next.js page, measure LCP/INP/CLS with the profiler, and get prioritized optimizations.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: performance-rules Download link: https://github.com/mauriciodelrio/delriodev-skills/archive/main.zip#performance-rules Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.