secondsky
292c93845e
- Rewrites AI-sounding text to read human; 8 editing passes + review-only mode - Adapted from jpeggdev/humanize-writing (MIT); npm installer scaffolding dropped - Frontmatter condensed to 238 chars (sync enforces 250 max for single-skill plugins) - Lockstep bump 3.8.0 -> 3.9.0: all 145 plugins, both marketplaces, package.json - CHANGELOG entry for 3.9.0
React Best Practices
Status: ✅ Production Ready Version: 1.0.0 (Vercel source) Last Updated: 2026-01-28
Comprehensive React and Next.js performance optimization guide from Vercel Engineering, containing 57 rules across 8 categories.
What This Skill Provides
✅ Eliminating Waterfalls (CRITICAL) - 5 rules for async optimization ✅ Bundle Size Optimization (CRITICAL) - 5 rules for reducing bundle size ✅ Server-Side Performance (HIGH) - 7 rules for SSR optimization ✅ Client-Side Data Fetching (MEDIUM-HIGH) - 2 rules for client optimization ✅ Re-render Optimization (MEDIUM) - 12 rules for preventing unnecessary renders ✅ Rendering Performance (MEDIUM) - 9 rules for efficient rendering ✅ JavaScript Performance (LOW-MEDIUM) - 14 rules for JS optimization ✅ Advanced Patterns (LOW) - 3 rules for advanced techniques
Total: 57 production-tested rules with incorrect vs correct examples
When to Use This Skill
Use this skill when:
- Writing new React components or Next.js pages
- Reviewing code for performance issues
- Refactoring existing React/Next.js applications
- Optimizing bundle size or load times
- Debugging hydration errors, re-render issues, or memory leaks
- Implementing async patterns, server components, or streaming
Structure
- SKILL.md - Concise overview with rule categories (~1,500 words)
- AGENTS.md - Full compiled guide with all rules expanded (~40,000 words)
- rules/ - 57 individual rule files for granular reference
- metadata.json - Version and attribution metadata
Attribution
This skill packages Vercel's React Best Practices guide for Claude Code.
Original Author: @shuding (Vercel Engineering) Source: https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices Packaging: Claude Skills Maintainers License: MIT
We are grateful to Vercel for creating and open-sourcing this comprehensive guide.
Installation
# Add the marketplace once (if not already added)
/plugin marketplace add https://github.com/secondsky/claude-skills
# Install this plugin
/plugin install react-best-practices@claude-skills
Usage Examples
Example 1: Optimize Re-renders
Ask: "How can I prevent unnecessary re-renders in my React component?"
Claude will:
- Reference SKILL.md re-render optimization section
- Suggest memo, useMemo, useCallback patterns
- Provide code examples from rules/
Example 2: Reduce Bundle Size
Ask: "My React bundle is too large, help me reduce it"
Claude will:
- Reference bundle optimization rules
- Suggest dynamic imports, tree-shaking, direct imports
- Show examples from rules/bundle-*.md
Example 3: Fix Hydration Errors
Ask: "I'm getting hydration mismatches in Next.js"
Claude will:
- Reference hydration and server component patterns
- Explain common causes and solutions
- Point to specific rules/rendering-hydration-no-flicker.md
Progressive Disclosure
SKILL.md (auto-loaded): Quick reference, rule categories, top errors AGENTS.md (on request): Full guide with all 57 rules expanded rules/ (on request): Individual rule files for specific topics
Ask Claude to "Load AGENTS.md" for the comprehensive guide.
Related Skills
nextjs- Next.js framework patternstanstack-query- Data fetching optimizationreact-hook-form-zod- Form validation patternszustand-state-management- State managementtailwind-v4-shadcn- UI component styling
Support
- Documentation: See SKILL.md and AGENTS.md in skills/react-best-practices/
- Issues: https://github.com/secondsky/claude-skills/issues
- Original Source: https://github.com/vercel-labs/agent-skills