Vercel skills for agents
Agent Skills
Vercel skills: React and Next.js performance, UI checks by guidelines, React Native, component composition, and deployment
- 33,203 ★ on the repository
- Last commit
Extended access
Why this level
- Deployment skill uploads project code to an external service
- Some skills include auxiliary scripts
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/vercel-labs-agent-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Deployment skill uploads project code to an external service
- Some skills include auxiliary scripts
This is third-party code. Review the repository files before installing.
What it does
A collection of skills from Vercel. react-best-practices includes React and Next.js performance rules sorted by impact: request waterfalls, bundle size, server rendering, re-renders. web-design-guidelines checks UI against over 100 rules for accessibility, forms, animation, and typography. writing-guidelines checks documentation texts. There are skills for React Native, View Transitions, composition patterns, project audit on Vercel, and deployment with project ownership transfer.
Who it is for. Frontend developers working with React, Next.js, and React Native, including those deploying on Vercel.
Good fit when
- Review React components for performance issues
- Check UI for accessibility and guideline compliance
- Refactor components with many boolean props
- Quickly deploy a project with a preview link
Not a fit when
- Project is not React-based and not deployed on Vercel
- Project code cannot be uploaded to an external deployment service
Example request
Check this Next.js page for request waterfalls and excessive bundle sizeLimitations
The deployment skill packages the project into an archive and uploads it to the deployment service, excluding node_modules and .git. The vercel-optimize skill relies on project metrics in Vercel. Other skills are sets of rules and do not replace profiling.
How to disable. Remove unnecessary skill folders from the agent's skills directory.
FAQ
What does the deployment skill return?
A link to the deployed site preview and a link to transfer the project to your Vercel account.
Discussion
No questions or reviews yet.
Related
SkillsVercel Plugin
vercel-plugin
Vercel's official plugin: an ecosystem graph, skills for Next.js, AI SDK, deployment and storage, specialist agents and deploy commands
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Emil Kowalski's skills for designers and engineers
Skills For Designers and Engineers
Animation and UI detail skills from Emil Kowalski: curves, durations, animation reviews and picking UI libraries
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
A skill that points the agent to ready VueUse composables for Vue 3 and Nuxt, with a usage and type reference for each function
README in short
The repository contains Vercel skills in Agent Skills format. Each skill's README describes its purpose, use cases, and covered rule categories. Installation is via npx skills add, after which the agent uses the skills automatically for relevant tasks. Each update publishes a release with an index for skill discovery. MIT license.
README badge
Original SKILL.md
--- name: vercel-react-best-practices description: 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. license: MIT metadata: author: vercel version: "1.0.0" --- # Vercel React Best Practices Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 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-` | | 3 | Server-Side Performance | HIGH | `server-` | | 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` | | 5 | Re-render Optimization | MEDIUM | `rerender-` | | 6 | Rendering Performance | MEDIUM | `rendering-` | | 7 | JavaScript Performance | LOW-MEDIUM | `js-` | | 8 | Advanced Patterns | LOW | `advanced-` | ## Quick Reference ### 1. Eliminating Waterfalls (CRITICAL) - `async-cheap-condition-before-await` - Check cheap sync conditions before awaiting flags or remote values - `async-defer-await` - Move await into branches where actually used - `async-parallel` - Use Promise.all() for independent operations - `async-dependencies` - Use better-all for partial dependencies - `async-api-routes` - Start promises early, await late in API routes - `async-suspense-boundaries` - Use Suspense to stream content ### 2. Bundle Size Optimization (CRITICAL) - `bundle-barrel-imports` - Import directly, avoid barrel files - `bundle-analyzable-paths` - Prefer statically analyzable import and file-system paths to avoid broad bundles and traces - `bundle-dynamic-imports` - Use next/dynamic for heavy components - `bundle-defer-third-party` - Load analytics/logging after hydration - `bundle-conditional` - Load modules only when feature is activated - `bundle-preload` - Preload on hover/focus for perceived speed ### 3. Server-Side Performance (HIGH) - `server-auth-actions` - Authenticate server actions like API routes - `server-cache-react` - Use React.cache() for per-request deduplication - `server-cache-lru` - Use LRU cache for cross-request caching