Layout

This is Vercel's internal performance playbook turned into actionable code guidance. It runs 69 specific checks across React and Next.js codebases, catching things like barrel import performance hits, async waterfall patterns, and unnecessary re-renders. The rules are prioritized by actual impact, so it tackles bundle size killers and server-side bottlenecks before micro-optimizations. Each rule includes before/after code examples showing exactly what to fix. If you're shipping React apps at scale or just want to stop guessing about performance patterns, this codifies what the Vercel team actually follows internally.

When you need to build web interfaces that don't look like every other AI-generated site, this skill pushes Claude to make bold aesthetic choices and implement them with precision. It guides creation of production-ready HTML/CSS/JS or React components with distinctive typography, creative layouts, and thoughtful animations. Instead of defaulting to Inter fonts and purple gradients, it forces commitment to a specific design direction, whether that's brutalist minimalism or maximalist chaos. The code output includes working implementations with CSS variables, animation delays, and contextual visual effects that actually match the chosen aesthetic rather than falling back on generic patterns.

This is essentially a design system and UI audit tool rolled into one skill. It runs accessibility checks (contrast ratios, focus states, ARIA labels), validates touch targets and spacing, and suggests specific color palettes and font pairings from its database of 161 palettes and 57 combinations. The real value is in the priority-based rule system that catches common UX problems like missing loading states, poor responsive breakpoints, and platform-specific interaction patterns. It covers 10 tech stacks so you get relevant code whether you're building in React, SwiftUI, or Flutter. Use it when designing new interfaces or when your UI feels off but you can't pinpoint why.

Vercel's React Native skill covers performance optimization and mobile app best practices across eight categories, from critical list virtualization to configuration details. It's built around specific rules like using FlashList for large lists, animating only transform and opacity properties, and keeping native dependencies in your app package for monorepos. Each rule includes code examples showing wrong and right approaches. This is most useful when you're building production React Native apps and need someone to catch performance pitfalls before they become problems. The rule priorities are well thought out, focusing on what actually impacts user experience.

The react:components skill converts Stitch design files into modular, type-safe React components for Vite projects by fetching design metadata, validating component structure through AST analysis, and organizing code into separate files for components, hooks, and mock data. It serves frontend engineers and design-to-code teams who need to transform design system outputs into production-ready React code while maintaining architectural consistency and type safety. The skill solves the manual labor of translating visual designs into clean, modular component code with proper separation of concerns and Tailwind styling integration.

Builds component libraries with Tailwind v4's new CSS-first configuration, swapping out the old JavaScript config for @theme blocks and native CSS variables. Generates CVA-based components with proper variant handling, sets up semantic design tokens using OKLCH color space, and implements dark mode with @custom-variant instead of the old class strategy. Most useful when migrating from v3 or starting fresh design systems where you need consistent theming across components. The OKLCH color approach alone makes this worth using since it handles color perception way better than HSL, and the CSS-first config eliminates a lot of build complexity.