skills/vercel-react/SKILL.md
React/Next.js performance rules from Vercel Engineering. Triggers on: React components, Next.js pages, data fetching, bundle optimization.
npx skillsauth add thkt/dotclaude vercel-reactInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
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
documentation
Generates and updates .claude/OUTCOME.md interactively. When the file is absent or empty (no Behavior / all sections TBD), collects content via AskUserQuestion and writes the stub; when present, shows the current state and applies updates.
development
Judge a SKILL.md against craft axes (single responsibility, description distinctiveness, imperative voice, verifiable completion, calibration, progressive disclosure) and apply the fixes the audit surfaces. Do not use for format-presence-only checks (use reviewer-prompt) or reproducibility loops (use /tuning).
tools
Internal helper for /think Step 11. Renders SOW.md + Spec.md as an integrated Astro view and returns a dev server URL.
development
Extract repository spec while detecting bugs, spec gaps, and consistency drift via dual-purpose documentation. OUTCOME.md-axis question-driven exploration with ephemeral output. Do NOT use for code review (use /audit or /polish), feature implementation (use /code), planning only (use /think), or single-bug fix (use /fix).