メニュー
Comprehensive performance and architecture optimization for React and Next.js. Use this for code reviews, refactoring, or building new components.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | vercel-react-best-practices |
| description | Comprehensive performance and architecture optimization for React and Next.js. Use this for code reviews, refactoring, or building new components. |
| allowed-tools | ["grep_search","view_file"] |
Optimizes React and Next.js applications using Vercel Engineering's 70+ rules across 8 categories.
Scan the codebase for common performance bottlenecks and anti-patterns.
grep_search or rg for specific hooks (useEffect, useState), Server Components, and Layout patterns.Evaluate the code against these 8 core categories:
Suspense correctly.fetch in RSC, cache tags, and revalidation.Assign a priority to each finding:
Propose specific code changes using the "Fix it" or "Refactor it" pattern. Explain the "Why" behind each change (e.g., "Moving this to an RSC reduces client bundle by 20KB").
| File | Purpose |
|---|---|
| rsc-checklist.md | Server Component best practices |
| performance-rules.md | Specific React performance rules |
Enforces use of Context7 MCP for all external library documentation. Prevents API hallucination by requiring real-time doc fetching before any external library call. Auto-triggered when external library usage is detected in code context.
Reading coach: guides users through books systematically with knowledge compilation, mastery testing, spaced repetition, and knowledge querying. Triggers on "read this book", "book study", "start studying", "/book-study".
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," or "indexing issues." Use this even if the user just says something vague like "my SEO is bad" or "help with SEO" — start with an audit. For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema-markup. For AI search optimization, see ai-seo.
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.