菜单
Workflow for building production-quality React applications using Vercel-style best practices focused on readability, performance, maintainability, and stable UI behavior.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Workflow for building scalable messaging systems on Microsoft Azure using queues, event-driven architecture, pub/sub systems, service buses, and cloud-native communication patterns.
Workflow for implementing observability systems on Microsoft Azure using logging, monitoring, tracing, telemetry, metrics, dashboards, and production-grade cloud diagnostics.
Workflow for creating procedural systems in Blender using Geometry Nodes, procedural materials, node-based modeling, and non-destructive generation techniques.
Workflow for creating precise hard surface models in Blender using clean topology, subdivision workflows, bevel systems, and production-ready modeling techniques.
Workflow for using Claude to generate Blender Python scripts, automate 3D workflows, and create procedural scenes, animations, and assets directly inside Blender.
End-to-end workflow for setting up Blender, rigging a character, and creating a simple animation with a clear output (rendered animation).
| name | vercel-react-best-practices |
| description | Workflow for building production-quality React applications using Vercel-style best practices focused on readability, performance, maintainability, and stable UI behavior. |
This skill enables Claude to build and review React applications using modern frontend engineering standards inspired by high-quality production workflows.
The workflow focuses on:
The goal is to ensure React projects remain:
This workflow emphasizes long-term maintainability over short-term hacks or overly clever abstractions.
Before starting:
Install Node.js: https://nodejs.org
Create a React or Next.js project:
npx create-next-app@latest
or:
npm create vite@latest
npm install
npm run dev
Recommended tools:
Recommended extensions:
Optional:
Use this skill when:
Do NOT use this skill for:
Build a scalable dashboard interface for a SaaS product.
Claude should:
Final result should:
Readable code is more valuable than overly clever abstractions.
Components should:
Good readability improves:
Avoid:
Each component should have a single clear responsibility.
Good component design:
Preferred structure:
Avoid:
React applications should minimize unnecessary rendering work.
Common optimization strategies:
Claude should proactively prevent:
Performance improves:
Production applications require robust state handling.
Always account for:
Stable UI systems should fail gracefully.
Avoid:
State management should remain:
Preferred approaches:
Avoid:
Reusable systems improve scalability significantly.
Preferred patterns:
Good systems improve:
Start by identifying:
Recommended structure:
components/
hooks/
lib/
pages/
styles/
Keep the architecture:
Create:
Each component should:
Separate:
Validate:
Keep state transitions predictable.
Check for:
Use:
React.memoOptimize only where necessary.
Avoid premature optimization.
Ensure:
Accessibility improves:
Before shipping validate:
Production-quality applications should remain stable under imperfect conditions.
Review:
Refactor:
The final output should include:
The workflow itself should remain:
The agent should:
The workflow should optimize for: