vercel-labs /
agent-skills
Installable skills that teach coding agents Vercel's React, UI and deploy practices
- 32.8k stars
- 1k stars since 3 Oct
- JavaScript
- Updated 8 days ago
- Beginner friendly
- Agent skills & plugins
AI coding agents often write working code that ignores framework-specific performance and design habits. This repo packages that knowledge as skills: folders holding a SKILL.md with instructions, plus optional scripts and reference docs. They follow the open Agent Skills format.
Once installed, the agent picks a skill when your task matches it. Ask it to review a React component and it can apply the React best-practices rules. Ask it to deploy and it can package your project and upload it to Vercel. The README lists eight skills, including vercel-optimize, react-best-practices, web-design-guidelines, writing-guidelines, react-native-guidelines, react-view-transitions, composition-patterns and vercel-deploy-claimable.
Unlike a general style guide, the rules are ranked by impact in places, such as critical for removing request waterfalls and cutting bundle size. The vercel-optimize skill collects Vercel metrics first, then looks only at the routes and files those metrics point to.
What it does
React and Next.js performance rules
40+ rules in 8 categories, ranked by impact. They cover waterfalls, bundle size, server-side performance, re-renders and rendering.
UI and writing audits
web-design-guidelines checks code against 100+ rules on accessibility, forms, animation and more. writing-guidelines checks docs against 80+ rules from the Vercel writing handbook.
Vercel project audit
vercel-optimize looks at cost, caching, function usage and build minutes, then produces a ranked cost and performance report.
Claimable deploys
vercel-deploy-claimable detects 40+ frameworks, uploads your project, and returns a preview URL and a claim URL to transfer ownership to your own Vercel account.
React Native and view transitions
react-native-guidelines has 16 rules on performance, layout and animation. react-view-transitions covers React's ViewTransition component and Next.js integration.
What you could build
- Review a React component for performance problems before merging it.
- Audit a UI for accessibility, focus states and form handling issues.
- Find caching and function-usage costs in a deployed Vercel project.
- Add page or list-to-detail transitions to a Next.js App Router app.
- Deploy a project from a conversation and hand over a claim link.
Get started
Run the install command in your project, then ask your agent for a matching task, such as reviewing a React component or deploying your app. The agent uses a skill when it detects a relevant task.
npx skills add vercel-labs/agent-skillsCommands are copied from the project's README. Read it on GitHub for the full setup.
More in Agent skills & plugins
superpowers
A set of skills that makes coding agents plan, test and review before they write code
mattpocock/skills
Small, editable agent skills for planning, testing and reviewing code with AI
ECC
Agents, skills, hooks and memory that add an engineering workflow to coding agents
andrej-karpathy-skills
A CLAUDE.md file that tells Claude Code to ask first, keep code small, edit narrowly
anthropics/skills
Anthropic's example Agent Skills: folders of instructions Claude loads per task
ponytail
A skill that makes AI coding agents write the least code that works
gstack
Slash-command skills that give Claude Code roles like reviewer, QA and release engineer
addyosmani/agent-skills
A pack of 25 Markdown skills that guide AI coding agents from spec to ship
taste-skill
Agent skills that steer AI coding tools toward better layout, type and motion
archify
Agent skill that turns a description or a codebase into an interactive HTML diagram