vercel-react-best-practices
Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
More from horace4444/extend-my-claude-code
watermark-removal
Universal watermark removal with ML-based inpainting and automatic detection. Works on ANY watermark type (Google SynthID, Midjourney, DALL-E, stock photos, logos). Four methods: inpaint (ML, best quality), aggressive (fast), crop (fastest), paint (basic). Auto-detects watermark location in any corner. Use when: (1) Removing ANY type of watermark, (2) Google AI/Imagen/Gemini watermarks, (3) Stock photo watermarks, (4) Logo overlays, (5) Cleaning images for production, (6) Batch processing, or (7) User mentions 'watermark', 'remove watermark', 'clean image', 'SynthID'
115image-converter
Convert, resize, compress, and optimize images across formats (HEIC, PNG, JPEG, WebP, AVIF, GIF, TIFF, BMP). Use when working with image files for format conversion, resizing/downscaling, compression/optimization, batch processing, watermarking, metadata stripping, or any image manipulation task. Triggers on requests involving image files, photo processing, or web image optimization.
8ai-api-integrations
Connect applications, scripts, and backend services to AI model APIs (OpenAI, Anthropic Claude, Google Gemini/Vertex AI, xAI Grok), Supabase (PostgreSQL database with vector search), and Clerk (authentication). Use when building AI-powered features that require (1) AI model integration for text generation, translation, embeddings, or image generation, (2) Supabase database operations with pgvector semantic search, (3) Clerk user authentication and session management, (4) Combining AI outputs with database storage, (5) Cost-optimized model selection and prompt engineering, (6) Best practices for production deployments avoiding common anti-patterns.
7skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
4web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
4google-image-creator
Generate images using Google AI models (Imagen 4 and Gemini). Presents top 3 model options with pricing, generates images via API, tracks token usage and costs. Use when user needs to: (1) Generate images with Google AI, (2) Choose between Google image models, (3) See pricing for Google image generation, (4) Track image generation costs, or (5) Compare Imagen vs Gemini image models. Self-updating with current pricing from https://ai.google.dev/pricing
4