From ccpp
Provides Vercel Engineering's React and Next.js performance optimization guidelines for writing, reviewing, and refactoring code. Covers eliminating waterfalls, bundle size, server/client data fetching, and re-renders.
npx claudepluginhub jh941213/my-cc-harness --plugin ccppThis skill uses the workspace's default tool permissions.
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
AGENTS.mdrules/advanced-event-handler-refs.mdrules/advanced-use-latest.mdrules/async-api-routes.mdrules/async-defer-await.mdrules/async-dependencies.mdrules/async-parallel.mdrules/async-suspense-boundaries.mdrules/bundle-barrel-imports.mdrules/bundle-conditional.mdrules/bundle-defer-third-party.mdrules/bundle-dynamic-imports.mdrules/bundle-preload.mdrules/client-event-listeners.mdrules/client-localstorage-schema.mdrules/client-passive-event-listeners.mdrules/client-swr-dedup.mdrules/js-batch-dom-css.mdrules/js-cache-function-results.mdrules/js-cache-property-access.mdCompares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Designs, implements, and audits WCAG 2.2 AA accessible UIs for Web (ARIA/HTML5), iOS (SwiftUI traits), and Android (Compose semantics). Audits code for compliance gaps.
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Server-Side Performance | HIGH | server- |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
| 8 | Advanced Patterns | LOW | advanced- |
async-defer-await - Move await into branches where actually usedasync-parallel - Use Promise.all() for independent operationsasync-dependencies - Use better-all for partial dependenciesasync-api-routes - Start promises early, await late in API routesasync-suspense-boundaries - Use Suspense to stream contentbundle-barrel-imports - Import directly, avoid barrel filesbundle-dynamic-imports - Use next/dynamic for heavy componentsbundle-defer-third-party - Load analytics/logging after hydrationbundle-conditional - Load modules only when feature is activatedbundle-preload - Preload on hover/focus for perceived speedserver-cache-react - Use React.cache() for per-request deduplicationserver-cache-lru - Use LRU cache for cross-request cachingserver-serialization - Minimize data passed to client componentsserver-parallel-fetching - Restructure components to parallelize fetchesserver-after-nonblocking - Use after() for non-blocking operationsclient-swr-dedup - Use SWR for automatic request deduplicationclient-event-listeners - Deduplicate global event listenersrerender-defer-reads - Don't subscribe to state only used in callbacksrerender-memo - Extract expensive work into memoized componentsrerender-dependencies - Use primitive dependencies in effectsrerender-derived-state - Subscribe to derived booleans, not raw valuesrerender-functional-setstate - Use functional setState for stable callbacksrerender-lazy-state-init - Pass function to useState for expensive valuesrerender-transitions - Use startTransition for non-urgent updatesrendering-animate-svg-wrapper - Animate div wrapper, not SVG elementrendering-content-visibility - Use content-visibility for long listsrendering-hoist-jsx - Extract static JSX outside componentsrendering-svg-precision - Reduce SVG coordinate precisionrendering-hydration-no-flicker - Use inline script for client-only datarendering-activity - Use Activity component for show/hiderendering-conditional-render - Use ternary, not && for conditionalsjs-batch-dom-css - Group CSS changes via classes or cssTextjs-index-maps - Build Map for repeated lookupsjs-cache-property-access - Cache object properties in loopsjs-cache-function-results - Cache function results in module-level Mapjs-cache-storage - Cache localStorage/sessionStorage readsjs-combine-iterations - Combine multiple filter/map into one loopjs-length-check-first - Check array length before expensive comparisonjs-early-exit - Return early from functionsjs-hoist-regexp - Hoist RegExp creation outside loopsjs-min-max-loop - Use loop for min/max instead of sortjs-set-map-lookups - Use Set/Map for O(1) lookupsjs-tosorted-immutable - Use toSorted() for immutabilityadvanced-event-handler-refs - Store event handlers in refsadvanced-use-latest - useLatest for stable callback refs이 스킬의 규칙은 위 Quick Reference에 요약되어 있습니다. 각 규칙의 핵심 패턴:
// BAD: 순차 실행
const users = await getUsers();
const posts = await getPosts();
// GOOD: 병렬 실행
const [users, posts] = await Promise.all([getUsers(), getPosts()]);
// BAD: 배럴 파일에서 import (트리쉐이킹 실패)
import { Button } from '@/components';
// GOOD: 직접 import
import { Button } from '@/components/ui/button';
// BAD: 부모 리렌더링 시 매번 재계산
function Parent() {
const [count, setCount] = useState(0);
return <><ExpensiveList /><button onClick={() => setCount(c+1)} /></>;
}
// GOOD: memo로 격리
const ExpensiveList = React.memo(function ExpensiveList() { ... });
// React.cache()로 요청 단위 중복 제거
const getUser = React.cache(async (id: string) => {
return await db.user.findUnique({ where: { id } });
});
코드 작성/리뷰 시 위 Priority 테이블의 CRITICAL → HIGH 순서로 적용합니다.