skills.rest
allenlin90
allenlin90COMMUNITY
Explore all skills by this author →
GitHub

frontend-performance

Optimize React applications with code splitting, memoization, and Web Vitals monitoring.

1|Updated Jan 2, 2025
Search Tags:#performance#react#memoization#code-splitting#web-vitals#image-optimization#virtual-scrolling
One-click install
npx skills add https://github.com/allenlin90/eridu-services --skill frontend-performance-allenlin90
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-performance
Source: https://github.com/allenlin90/eridu-services/tree/main/.agent/skills/frontend-performance
Command: npx skills add https://github.com/allenlin90/eridu-services --skill frontend-performance-allenlin90

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps developers optimize React applications for faster load times, smoother interactions, and better user experience by applying proven performance patterns.

Core Features & Use Cases

  • Route-level code splitting and lazy loading with TanStack Router to reduce initial bundle size.
  • Memoization strategies (useMemo, useCallback, React.memo) to minimize re-renders.
  • Virtual scrolling for large lists to improve rendering performance.
  • Image and asset optimization techniques (native lazy loading, responsive images) to improve load times.
  • Bundle size optimization and tree-shaking for lean builds.
  • Web Vitals monitoring to measure and optimize performance metrics.

Quick Start

Analyze your React app and apply these patterns to reduce bundle size and improve Web Vitals scores

Frequently Asked Questions about frontend-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce initial bundle size in a React application?▼

Minimize re-renders in React components using memoization strategies like useMemo, useCallback, and React.memo. These techniques prevent unnecessary recalculations and component re-renders when props or dependencies remain unchanged.

What is the best way to render large lists in React without freezing the UI?▼

Render large lists in React without freezing the UI by implementing virtual scrolling. This pattern renders only visible items in the viewport, significantly improving rendering performance for dynamic content sites.

How do I optimize images and assets to improve Web Vitals scores?▼

Optimize images and assets to improve Web Vitals scores by applying native lazy loading and responsive images. These techniques defer offscreen asset loading and serve appropriately sized images, boosting performance metrics.

Can I use tree-shaking to optimize bundle size in React dashboards?▼

Use tree-shaking to optimize bundle size in React dashboards by eliminating dead code during the build process. Bundle size optimization ensures lean builds by excluding unused modules from the final output.

Why does my React app have poor Web Vitals metrics and how can I monitor them?▼

Monitor Web Vitals metrics in your React app to identify poor performance scores. Web Vitals monitoring measures key performance metrics, allowing you to target and optimize load times and interaction smoothness.

Related Skills

Explore More Software Engineering Skills→
samjhechtsamjhecht
4

initialize-governance

Generate Constitution, Roadmap, and process documentation templates for project governance.

Community
Advanced
chiruu12chiruu12
1

canary

Monitor production apps for errors and regressions after deployment.

Community
Advanced
partme-aipartme-ai
610

rollup

Configure Rollup bundlers with plugins, code splitting, and tree shaking.

Official
Intermediate
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate