React/Next.js performance rules from Vercel Engineering. Triggers on: React components, Next.js pages, data fetching, bundle optimization.
From shipnpx claudepluginhub thkt/dotclaude --plugin toolkitThis skill is limited to using the following tools:
reference.mdscripts/fetch-rule.shscripts/sync.shProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Source: vercel-labs/agent-skills (react-best-practices)
~/.claude/skills/vercel-react/cache/{rule}.mdbash ~/.claude/skills/vercel-react/scripts/fetch-rule.sh {rule}bash ~/.claude/skills/vercel-react/scripts/sync.sh| Rule | Description |
|---|---|
| async-defer-await | Move await into branches where actually used |
| async-parallel | Promise.all() for independent operations |
| async-dependencies | better-all for partial dependencies |
| async-api-routes | Start promises early, await late in API routes |
| async-suspense-boundaries | Suspense to stream content |
| Rule | Description |
|---|---|
| bundle-barrel-imports | Import directly, avoid barrel files |
| bundle-dynamic-imports | next/dynamic for heavy components |
| bundle-defer-third-party | Load analytics/logging after hydration |
| bundle-conditional | Load modules only when feature is activated |
| bundle-preload | Preload on hover/focus for perceived speed |
| Rule | Description |
|---|---|
| server-auth-actions | Authenticate server actions like API routes |
| server-cache-react | React.cache() for per-request dedup |
| server-cache-lru | LRU cache for cross-request caching |
| server-dedup-props | Avoid duplicate serialization in RSC props |
| server-hoist-static-io | Hoist static I/O to module level |
| server-serialization | Minimize data passed to client components |
| server-parallel-fetching | Restructure to parallelize fetches |
| server-after-nonblocking | after() for non-blocking operations |
Client-Side Data (MEDIUM-HIGH), Re-render (MEDIUM), Rendering (MEDIUM), JS Performance (LOW-MEDIUM), Advanced (LOW) — check only when user specifically asks for deep optimization.
→ Full rule indexes: reference.md