スキル react-best-practices

📦

react-best-practices

Name: react-best-practices
Author: sickn33

安全

Optimize React and Next.js Performance with Vercel Best Practices

こちらからも入手できます: vercel-labs,0xBigBoss,0xBigBoss

Poor React performance leads to slow load times and frustrated users. This skill provides 45 prioritized rules from Vercel Engineering to eliminate waterfalls, reduce bundle sizes, and optimize rendering.

対応: Claude Codex Code(CC)

🥉 73 ブロンズ

スキルZIPをダウンロード

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

オンにして利用開始

テストする

「react-best-practices」を使用しています。 Review this data fetching pattern for waterfalls

期待される結果:

ISSUE: Sequential await calls create waterfall (3 round trips)
const user = await fetchUser()
const posts = await fetchPosts()
const comments = await fetchComments()
FIX: Use Promise.all() for parallel execution (1 round trip)
const [user, posts, comments] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments()
])

「react-best-practices」を使用しています。 How do I lazy load a heavy code editor component

期待される結果:

Use next/dynamic for lazy loading heavy components:
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
() => import('./monaco-editor').then(m => m.MonacoEditor),
{ ssr: false, loading: () => <LoadingSkeleton /> }
)
This defers ~300KB bundle until component renders, improving TTI.

セキュリティ監査

安全

v1 • 2/24/2026

Static analyzer detected 912 patterns but all are FALSE POSITIVES. The skill contains markdown documentation with code examples for educational purposes, not executable code. Patterns like 'backtick execution' are shell commands in README examples (pnpm build), 'dynamic imports' are React next/dynamic usage examples, 'storage access' shows localStorage caching patterns, and 'network' patterns are fetch API documentation examples. No actual security vulnerabilities exist.

スキャンされたファイル

4,906

解析された行数

検出結果

総監査数

セキュリティ問題は見つかりませんでした

監査者: claude

品質スコア

アーキテクチャ

100

保守性

コンテンツ

コミュニティ

100

セキュリティ

仕様準拠

作れるもの

Frontend Developer Building React Applications

Use this skill when writing new components or pages to ensure optimal performance from the start. The skill guides bundle optimization, proper data fetching patterns, and re-render prevention techniques.

Tech Lead Reviewing Pull Requests

Reference these rules during code review to catch performance anti-patterns like sequential async calls, unnecessary barrel imports, or missing Suspense boundaries before merging.

AI Assistant Refactoring Legacy Code

Apply these prioritized rules to systematically improve existing React codebases, starting with critical waterfall elimination before addressing medium-impact rendering optimizations.

これらのプロンプトを試す

Review Component for Performance Issues

Review this React component using Vercel best practices. Identify waterfalls, unnecessary re-renders, and bundle optimization opportunities. Suggest specific fixes with code examples.

Refactor Sequential Fetching to Parallel

Refactor this code to eliminate async waterfalls. Use Promise.all() for independent operations and move awaits into branches where results are actually needed.

Optimize Bundle Size for Heavy Components

Apply code splitting strategies to this component. Identify opportunities for next/dynamic imports, conditional loading, and preloading on user interactions.

Fix Re-render Performance Issues

Analyze this component for unnecessary re-renders. Apply memoization, proper dependency arrays, derived state subscriptions, and functional setState patterns as appropriate.

ベストプラクティス

Start with critical waterfall elimination before medium-impact optimizations
Use React.cache() for per-request deduplication and LRU cache for cross-request caching
Extract stable callbacks using functional setState and store handlers in refs when needed

回避

Sequential await calls for independent operations
Importing entire utility libraries instead of specific functions
Passing functions directly as effect dependencies instead of primitives

よくある質問

What React versions are supported?

Most patterns work with React 17+. Advanced patterns like startTransition, useTransition, and Suspense for data fetching require React 18+.

Can I use this with JavaScript instead of TypeScript?

Yes, all patterns apply to JavaScript projects. Examples use TypeScript syntax for clarity but the concepts transfer directly.

Should I apply all 45 rules at once?

No. Start with CRITICAL priority rules (async waterfalls, bundle optimization) for maximum impact, then address HIGH and MEDIUM priorities progressively.

Does this skill work with Next.js App Router?

Yes. Server component patterns like React.cache(), use cache(), and server parallel fetching are specifically designed for App Router architecture.

How do I measure performance improvements?

Use Web Vitals (LCP, FID, CLS) and React DevTools Profiler. The skill provides impact estimates like '2-10x improvement' for each pattern.

Can Claude Code automatically apply these fixes?

Yes. Provide the skill context and ask Claude Code to review or refactor specific files. It will apply appropriate rules with code examples.