Frontend & React skills
React skills give your agent the performance rules, component patterns, and ecosystem knowledge to write production-quality frontend code, not just code that works.
What your agent can do with react skills installed
- Identify and eliminate data-fetching waterfalls in React component trees
- Apply memoization only when useMemo, useCallback, and React.memo provide a real benefit
- Build composable component APIs that avoid boolean prop sprawl
- Set up and extend shadcn/ui with correct Tailwind configuration and theming
- Catch barrel imports, unnecessary client components, and heavy third-party libraries
- Model complex component APIs with discriminated unions and conditional TypeScript types
Skills in this category
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.
vercel-composition-patternsvercel-labs/agent-skillsvercel-composition-patterns is published by vercel-labs/agent-skills. Review its source instructions before using it in an agent workflow.
shadcnshadcn/uiManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
webapp-testinganthropics/skillsToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
typescript-advanced-typeswshobson/agentsMaster TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.
tailwind-design-systemwshobson/agentsBuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
Building on Vercel? Several of these skills ship together as a single plugin: npx plugins add vercel/vercel-plugin.
Works with your agent
React skills work with Claude Code, Cursor, GitHub Copilot, Windsurf, Cline, Codex, Gemini CLI, and agents that support the skills CLI.
Frequently asked questions
Does vercel-react-best-practices cover React 19?
Yes. It covers concurrent features, server components, and hooks from React 18 and 19 alongside foundational patterns that apply across recent React versions.
What is the difference between vercel-composition-patterns and vercel-react-best-practices?
The first focuses on component and API architecture; the second focuses on performance. They complement each other in production applications.
Do I need the shadcn skill if I already installed shadcn/ui?
The package provides components. The skill teaches your agent how to theme, extend, and compose those components correctly beyond copied examples.
Do these skills require using Vercel?
No. The React and composition patterns are deployment-agnostic.