agent-skills README

The project's README from github.com/vercel-labs/agent-skills. As one markdown file: README.md.

Agent Skills

A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.

Skills follow the Agent Skills format.

skills.sh

Available Skills

vercel-optimize

Audits a Vercel project for cost, performance, reliability, caching, function usage, and billing opportunities. It collects Vercel metrics first, then investigates only the routes and files those metrics point to.

Use when:

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.

Use when:

Categories covered:

web-design-guidelines

Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.

Use when:

Categories covered:

writing-guidelines

Review docs and prose for compliance with the Vercel writing handbook. Audits your pages for 80+ rules covering voice, structure, content types, code samples, typography, and AI workflow.

Use when:

Categories covered:

react-native-guidelines

React Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.

Use when:

Categories covered:

react-view-transitions

Implement smooth, native-feeling animations using React's View Transition API. Covers the <ViewTransition> component, addTransitionType, transition types, and Next.js integration including the transitionTypes prop on next/link.

Use when:

Topics covered:

composition-patterns

React composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.

Use when:

Patterns covered:

vercel-deploy-claimable

Deploy applications and websites to Vercel instantly. Designed for use with claude.ai and Claude Desktop to enable deployments directly from conversations. Deployments are "claimable" - users can transfer ownership to their own Vercel account.

Use when:

Features:

How it works:

  1. Packages your project into a tarball
  2. Detects framework (Next.js, Vite, Astro, etc.)
  3. Uploads to deployment service
  4. Returns preview URL and claim URL

Output:

Deployment successful!

Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL:   https://vercel.com/claim-deployment?code=...

Installation

npx skills add vercel-labs/agent-skills

Usage

Skills are automatically available once installed. The agent will use them when relevant tasks are detected.

Examples:

Deploy my app

Review this React component for performance issues

Help me optimize this Next.js page

Discovery index

Every change to a skill on main publishes an immutable GitHub release with an Agent Skills discovery index and one artifact per skill. Build the same artifacts locally with:

npm ci --ignore-scripts
node scripts/build-discovery-index.mjs https://example.com/skills

Skill Structure

Each skill contains:

License

MIT

agent-skills (vercel-labs/agent-skills)

caching
Searching Database…

32.6K ·GitHub
Agent-skills
What is this?This is Vercel's official collection of reusable 'skills' - packaged instructions and scripts - that give AI coding agents expertise on specific tasks like Vercel cost/performance audits, React and Next.js best practices, UI design review, writing style review, and claimable Vercel deployments.
Is this a plugin I run, or just files an agent reads?It is not code you execute yourself. Each skill is a folder containing a SKILL.md instructions file plus optional helper scripts and reference docs that an AI agent reads and follows.
How do I add these skills to my agent?After installing per the repo's Installation step, the skills work automatically - the agent picks up the relevant one on its own whenever it detects a matching task, with no manual invocation needed.
Which AI agents can actually use these skills?Any agent that supports the Agent Skills format can use most of these skills, but the vercel-deploy-claimable skill is built specifically for claude.ai and Claude Desktop so users can claim the deployment.
Does vercel-optimize work on any codebase?No - vercel-optimize needs a project already deployed on Vercel, because it pulls live Vercel metrics first and only digs into the specific routes and files those metrics flag.
What does the react-best-practices skill cover?It bundles 40+ React and Next.js performance rules across 8 categories - eliminating waterfalls, bundle size, server-side performance, client data fetching, re-render optimization and more - ranked by impact.
What does web-design-guidelines check?It audits UI code against 100+ rules covering accessibility, focus states, forms, animation, typography, dark mode, and touch/locale handling.
How does the vercel-deploy-claimable skill actually deploy a project?It tarballs the project excluding node_modules and .git, auto-detects the framework from package.json among 40+ frameworks, uploads it, and returns a live preview URL plus a claim URL so the user can transfer ownership to their own Vercel account.
How are skill updates distributed?Every change to a skill on the main branch publishes an immutable GitHub release containing an Agent Skills discovery index and one artifact per skill, and the same artifacts can be built locally.
What are similar projects?SwiftUI-Agent-Skill, skills, evondevKit, oil-ui, skills, golive-skill, pstack, agent-skills
Which topics is it in?vercel, caching, code-review, deployment, react-native, agent-skill, best-practices, accessibility, claude-skills, nextjs, skill, skills
Creator
vercel-labs
Size
11.4 MB
Stars
32.6K
Updated
CommitAug 28Releaseagent-skills-063bee94c3f4df8453406c830b0a7df0f2860278Aug 28
Age
10mo
Commits · 90 Days