web-frontend

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

This skill should be used when the user asks to "create React artifact", "build complex artifact", "use shadcn/ui", "create multi-component artifact", "build dashboard artifact", "create interactive app", "use Tailwind CSS artifact", "bundle React to single HTML", mentions "artifact with state management", "artifact with routing", or needs to build elaborate, multi-component claude.ai HTML artifacts using React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui. Not for simple single-file HTML/JSX artifacts.

This skill should be used when the user asks to "review my UI", "check accessibility", "audit design", "review UX", "check against Web Interface Guidelines", "review my site", "check best practices", "audit web interface", "review frontend code", "check UI compliance", or needs to review UI code for compliance with Vercel's Web Interface Guidelines covering accessibility, performance, semantic HTML, ARIA patterns, responsive design, and modern web best practices.