thkt/vercel-react
skills/vercel-react/SKILL.md
React/Next.js performance rules from Vercel Engineering. Triggers on: React components, Next.js pages, data fetching, bundle optimization.
$ install --global
skillsauthnpx skillsauth add thkt/claude-config vercel-reactInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 20, 2026, 9:28 AM7.0s4 files scanned
SKILL.md
- name:
- vercel-react
- description:
- >
- React/Next.js performance rules from Vercel Engineering. Triggers on:
- React
- allowed-tools:
- [Read, Bash, Glob]
- user-invocable:
- false
Vercel React Performance Rules
Source: vercel-labs/agent-skills (react-best-practices)
How to Use
- Find relevant rule(s) from the index below
- Read cached rule:
~/.claude/skills/vercel-react/cache/{rule}.md - If not cached:
bash ~/.claude/skills/vercel-react/scripts/fetch-rule.sh {rule} - Bulk sync:
bash ~/.claude/skills/vercel-react/scripts/sync.sh
Behavior
- Code review / writing: check CRITICAL + HIGH rules first
- Only check MEDIUM/LOW if user specifically asks for deep optimization
- Fetch only the rules relevant to the code at hand (not all 58)
Priority Index
1. Eliminating Waterfalls — CRITICAL
| 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 |
2. Bundle Size — CRITICAL
| 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 |
3. Server-Side — HIGH
| 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 |
4-8. MEDIUM / LOW Priority
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
Related Skills
thkt/use-cli-herdr
tools
VerifiedTrustedCommunity
Delegate implementation to codex (coder) via the herdr-agentchat plugin and drive a two-pane conversation to completion.
11SKILL.mdUpdated Jul 27, 2026
thkt/scribe
development
VerifiedTrustedCommunity
Extract recurring patterns from past closed PRs/issues and the research findings in workspace/research/, verify them against the latest code, and propose them to docs/wiki/ via PR.
11SKILL.mdUpdated Jul 20, 2026
thkt/dr
development
VerifiedTrustedCommunity
Create Decision Records (DR) in MADR v4 format with auto-numbering.
11SKILL.mdUpdated Jul 15, 2026
thkt/polish
development
VerifiedTrustedCommunity
Codex review + cleanup. Findings are challenged by critic-audit, not aggregated as facts, and fixes are applied directly. Do NOT use for internal multi-reviewer deep audits or findings reports (use /audit).
11SKILL.mdUpdated Jul 14, 2026