ReddRadar
Agent skill
react-patterns
React and Next.js performance optimization guidelines from Vercel Engineering, tuned for local/offline or Docker-deployed apps. Eliminates async waterfalls, reduces bundle size, optimizes server and client performance.
Install this agent skill to your Project
npx add-skill https://github.com/srbhr/Resume-Matcher/tree/main/.github/skills/react-patterns
SKILL.md
React Performance Patterns (Local/Docker)
From Vercel Engineering, optimized for local installs and Docker deployments.
Priority Categories
| Priority | Category | Impact | Key Pattern |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | Promise.all(), Suspense |
| 2 | Bundle Size | CRITICAL | Direct imports, next/dynamic |
| 3 | Server-Side Performance | HIGH | React.cache, LRU caching |
| 4 | Client-Side Data | MEDIUM-HIGH | SWR dedup |
| 5 | Re-render Optimization | MEDIUM | Memoized subtrees, transitions |
| 6 | Rendering Performance | MEDIUM | content-visibility |
Critical Patterns
Eliminate Waterfalls (Priority 1)
// WRONG - sequential
const data1 = await fetchA();
const data2 = await fetchB();
// RIGHT - parallel
const [data1, data2] = await Promise.all([fetchA(), fetchB()]);
// RIGHT - stream slow data
<Suspense fallback={<Skeleton />}>
<SlowComponent />
</Suspense>
Reduce Bundle Size (Priority 2)
// WRONG - barrel import (pulls entire library)
import { FileText } from 'lucide-react';
// RIGHT - direct import
import FileText from 'lucide-react/dist/esm/icons/file-text';
// RIGHT - dynamic import for heavy components
import dynamic from 'next/dynamic';
const PDFViewer = dynamic(() => import('./PDFViewer'), { ssr: false });
Server Caching (Priority 3)
import { cache } from 'react';
const getData = cache(async (id: string) => await db.get(id));
Local/Docker Focus
- Optimize for cold-start and steady-state responsiveness over SEO
- Use in-process caches (server process persists)
- Avoid sequential awaits even for local APIs
- Defer non-critical work until after render
- Minimize RSC props to reduce hydration overhead
Full Reference
Complete guide: .claude/skills/react-patterns/SKILL.md
Condensed guide: .claude/skills/react-patterns/REACT_PATTERNS.md
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
srbhr/Resume-Matcher
ui-review
Review UI changes against Swiss International Style design system. Checks colors, typography, borders, shadows, spacing, and anti-patterns. Use before committing any frontend UI changes.
srbhr/Resume-Matcher
codebase-navigator
Navigate, search, and understand the Resume Matcher codebase using ripgrep, ack, or grep. Find functions, classes, components, API endpoints, trace data flows, and understand architecture. Use FIRST when exploring code, finding files, or understanding project structure.
srbhr/Resume-Matcher
fastapi
Build Python APIs with FastAPI, Pydantic v2, and async patterns. Covers project structure, JWT auth, validation, database integration, and 7 documented error preventions. Use when creating Python APIs, implementing auth, or troubleshooting 422 validation, CORS, async blocking, or schema errors.
srbhr/Resume-Matcher
tailwind-patterns
Production-ready Tailwind CSS patterns for responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, dark mode, and Swiss International Style overrides for Resume Matcher.
srbhr/Resume-Matcher
full-stack
Full-stack development skill that coordinates backend and frontend changes together. Use for features that span both layers: new API endpoint + UI, data model changes, end-to-end flows.
srbhr/Resume-Matcher
code-review
Review code for correctness, security, performance, and Resume Matcher conventions. Use when receiving code review feedback or before submitting PRs. Requires technical rigor, not performative agreement.
Didn't find tool you were looking for?