Browse skills/react-best-practices

react-best-practices

Editor's pickdevelopment

React 19+ / Next.js 15+ 最佳实践指南，929行10个章节。覆盖性能优化、Server Components、Hooks、状态管理。

$npx skills add mindverse/skillhub@react-best-practices -g -y

Run in your terminal to install. Works with any AI Agent platform that supports the Claude Skills spec (Claude Code, Cursor, Windsurf, etc).

▸Prerequisites
1) Install Claude Code (claude.ai/code). 2) Install ai-skill: `npx skills add 1-SKILL/ai-skill -g -y`. Run that one first, then come back and run the skill install command above.

What this skill can do

✓ React 19+ 新API
✓ Server Components
✓ Bundle优化
✓ 重渲染优化
✓ Next.js 15+
✓ PPR/缓存策略

How to use

After installation, just tell your AI assistant:

“React怎么写最好”
“性能优化”
“Server Components怎么用”
“Next.js最佳实践”
▸View full SKILL.md content231 chars

React宝典 — 最佳实践指南

基于 Vercel react-best-practices（17.6万安装）增强。

十大章节

  1. 消除请求瀑布 [CRITICAL]
  2. Bundle体积优化 [CRITICAL]
  3. 服务端性能
  4. 客户端数据获取
  5. 重渲染优化
  6. 渲染性能
  7. JavaScript性能
  8. 高级模式
  9. React 19+ 新特性
  10. Server Components & Next.js 15+
View source on GitHub →
Safety score
90/100
A12/12 checks passed

High pass rate — quick source review recommended

Skill info
Lines of code929
SourceEditor's pick
Author技能宝
Repositorymindverse/skillhub
Categorydevelopment
Upstreamvercel-labs/agent-skills
Trigger words
ReactNext.js最佳实践hooksServer Components

Search skills from your terminal

Install ai-skill, then describe what you need inside Claude Code — it auto-matches and installs the right skill without leaving your terminal.

$npx skills add 1-SKILL/ai-skill -g -y

Related skills

Frontend DesignEditor's pick
S

Create distinctive, production-grade frontend interfaces that avoid generic AI a...

Code ReviewEditor's pick
S

Automated PR code review using multiple specialized agents with confidence-based...

TDD WorkflowEditor's pick
B

Test-Driven Development workflow and patterns

debuggerEditor's pick
A

快速定位和修复 bug，结构化调试流程：复现→缩小→定位→修复→验证。