react-performance-optimizer
✓60fps 성능을 위해 React 앱을 최적화합니다. 메모이제이션, 가상화, 코드 분할, 번들 최적화를 구현합니다. 느린 렌더링, 큰 목록, 번들 팽창에 사용합니다. "React 성능", "느린 렌더링", "useMemo", "번들 크기", "가상화"를 활성화하세요. 백엔드 최적화, 비 React 프레임워크 또는 조기 최적화에는 적합하지 않습니다.
SKILL.md
Expert in diagnosing and fixing React performance issues to achieve buttery-smooth 60fps experiences.
| React DevTools Profiler | Find slow components | Always start here | | Lighthouse | Overall performance score | Before/after comparison | | webpack-bundle-analyzer | Identify large dependencies | Bundle >500KB | | why-did-you-render | Unnecessary re-renders | Debug re-render storms | | React Compiler (2024+) | Automatic memoization | React 19+ |
Why wrong: Arrow function creates new reference → React.memo useless.
60fps 성능을 위해 React 앱을 최적화합니다. 메모이제이션, 가상화, 코드 분할, 번들 최적화를 구현합니다. 느린 렌더링, 큰 목록, 번들 팽창에 사용합니다. "React 성능", "느린 렌더링", "useMemo", "번들 크기", "가상화"를 활성화하세요. 백엔드 최적화, 비 React 프레임워크 또는 조기 최적화에는 적합하지 않습니다. 출처: erichowens/some_claude_skills.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/erichowens/some_claude_skills --skill react-performance-optimizer- 카테고리
- </>개발 도구
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
react-performance-optimizer이란?
60fps 성능을 위해 React 앱을 최적화합니다. 메모이제이션, 가상화, 코드 분할, 번들 최적화를 구현합니다. 느린 렌더링, 큰 목록, 번들 팽창에 사용합니다. "React 성능", "느린 렌더링", "useMemo", "번들 크기", "가상화"를 활성화하세요. 백엔드 최적화, 비 React 프레임워크 또는 조기 최적화에는 적합하지 않습니다. 출처: erichowens/some_claude_skills.
react-performance-optimizer 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/erichowens/some_claude_skills --skill react-performance-optimizer 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/erichowens/some_claude_skills
상세
- 카테고리
- </>개발 도구
- 출처
- skills.sh
- 최초 등록
- 2026-02-01