vercel-labs/agent-skills

What it is

Agent Skills is a small library of skill packs that can be added to an AI‑coding assistant (e.g., Claude, ChatGPT, or any LLM‑driven tool that understands the Agent Skills format). Each pack bundles a description (SKILL.md) and optional helper scripts that tell the agent how to perform a concrete developer task – such as auditing a Vercel deployment, checking React code for performance, or deploying a project with a single prompt.

Why it matters

AI‑coding agents need concrete, reusable “recipes” to turn a natural‑language request into executable steps. By publishing ready‑made skill definitions, Vercel Labs lets developers and AI‑tool builders quickly extend an agent’s capabilities without writing custom prompts or code each time. The collection focuses on Vercel‑centric workflows (deployment, cost‑optimisation) and general front‑end best‑practice checks, which are common pain points for teams using Next.js, React, and React Native.

Core skills (highlight)

Skill	When you’d use it	What it does
vercel‑optimize	You have a live Vercel app that feels slow or expensive.	Pulls Vercel metrics, pinpoints costly routes/files, and returns a ranked report with concrete cost‑ and performance‑saving suggestions.
react‑best‑practices	Writing or reviewing React/Next.js components.	Provides 40+ prioritized rules (waterfall elimination, bundle size, SSR performance, etc.) to guide developers toward faster, smaller bundles.
web‑design‑guidelines	Auditing UI code for accessibility, UX, and performance.	Checks >100 rules covering ARIA, focus states, form handling, animation, theming, image handling, and more.
writing‑guidelines	Reviewing documentation or marketing copy.	Enforces Vercel’s writing handbook (voice, structure, code‑sample style, AI‑workflow disclosure, etc.) across 80+ rules.
vercel‑deploy‑claimable	“Deploy this app now” in a chat with an AI assistant.	Detects the framework from `package.json`, bundles the project, uploads it to Vercel, and returns both a preview URL and a claim URL so the user can take ownership of the deployment.
(others)	React Native, view‑transition animations, composition patterns, etc.	Offer focused best‑practice checklists or code snippets for those domains.

How to get it

# Add the whole collection to any agent that supports the Agent Skills format
npx skills add vercel-labs/agent-skills

The command registers every skill in the repository; the agent will automatically surface the appropriate one when it detects a matching user request.

Using a skill

After installation you simply talk to the agent as you normally would:

Deploy my app

The agent recognises the vercel‑deploy‑claimable skill, runs its scripts, and replies with a preview and claim URL.

Review this React component for performance issues

Triggers the react‑best‑practices skill, which runs the rule set against the supplied code and returns a prioritized list of improvements.

Structure of a skill

Each folder contains:

SKILL.md – human‑readable instructions that the agent parses to understand the task.
scripts/ – optional automation (e.g., a Node script that talks to the Vercel API).
references/ – extra docs or links used by the skill.

License

MIT – you can freely use, modify, and redistribute the skill packs.

Bottom line: Agent Skills is a curated toolbox that equips LLM‑powered coding assistants with ready‑made, Vercel‑focused expertise, turning vague natural‑language commands into concrete, actionable developer workflows.