client-performance

Name: client-performance
Availability: InStock
Author: JuChan

Provides guidelines for optimizing React apps' performance and reducing bundle size.

Updated Aug 23, 2026

Search Tags:#performance #react #optimization #rendering #bundling #memoization #code-splitting

Ready to run

npx skills add https://github.com/juchanhwang/missionary --skill client-performance

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: client-performance
Source: https://github.com/juchanhwang/missionary/tree/main/.claude/skills/client-performance
Command: npx skills add https://github.com/juchanhwang/missionary --skill client-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React 성능 코딩 가이드라인을 제공한다. 불필요한 리렌더링 방지, 번들 크기 관리, 로딩 성능 최적화 규칙을 포함한다. React 컴포넌트 작성·리뷰, 렌더링 최적화, 번들 크기 관리, 메모리 누수 해결 시 사용한다.

Core Features & Use Cases

렌더링 최적화 규칙: useMemo, useCallback, React.memo의 적절한 사용 기준을 제시합니다.
번들 관리 가이드: 대형 의존성의 배제 원칙과 코드 스플리팅의 실무 지침을 제공합니다.
리뷰 및 도입 사례: 팀 코드 리뷰 시 체크리스트 및 실무 적용 사례를 제공합니다.

Quick Start

Apply this guide to optimize a React project by reducing unnecessary re-renders and improving bundle size.

Frequently Asked Questions about client-performance

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

FAQPage Schema

How do I prevent unnecessary re-renders in a React application?▼

Prevent unnecessary React re-renders by applying memoization guidelines using useMemo, useCallback, and React.memo based on dependency management criteria to optimize component rendering performance.

What is the best way to optimize React bundle size for production?▼

The best way to optimize React bundle size is implementing code splitting guidelines and excluding large dependencies to reduce load times and improve overall rendering performance.

Does this React performance optimization work with server-side rendering and PWAs?▼

Yes, these React performance optimization guidelines apply across client-side rendering, server-side rendering, and progressive web apps to improve load times and reduce unnecessary re-renders.

How do I check for memory leaks during a React code review?▼

Check for memory leaks during React code reviews by applying the provided checklist guidelines for dependency management and rendering optimization to identify and prevent leaks in production-grade projects.

When should I use React.memo instead of useMemo for component optimization?▼

Use React.memo for component-level render prevention and useMemo for expensive value calculations, applying the specific usage criteria from the React performance guidelines to cut unnecessary renders.