メニュー
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: