---
name: Vercel Agent Skills
slug: vercel-agent-skills
url: "https://dontmakeitugly.com/resources/vercel-agent-skills"
website: "https://github.com/vercel-labs/agent-skills"
github: "https://github.com/vercel-labs/agent-skills"
type: agent-skill
categories:
  - agent-resources
tags:
  - skills
  - claude-code
  - cursor
  - codex
  - react
  - nextjs
  - guidelines
  - review
frameworks:
  - react
  - nextjs
pricing: free
license: MIT
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - github
  - cli
  - copy_paste
installCommand: npx skills add vercel-labs/agent-skills
difficulty: beginner
staffPick: true
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Vercel Agent Skills

Installable skills that teach agents React, Next.js and web design best practices.

- Type: Agent skill
- Categories: Agent Resources
- Pricing: Free · License: MIT
- Open source: yes
- Works with: React, Next.js, Markdown, Agent skills

## What it is

Vercel's agent-skills repository contains skills that coding agents (Claude Code, Cursor, Codex and others) can load: guidance on React and Next.js performance patterns, and web design guidelines for auditing and improving interfaces. Skills are Markdown-based and versioned in Git.

## Why it's here

A good example of what "agent resources" should look like: opinionated, specific, machine-readable. Install the design-guidelines skill and ask your agent to review a page against it.

## Best for

- agent design reviews
- React and Next.js quality
- Claude Code setups

## Links

- Website: https://github.com/vercel-labs/agent-skills
- GitHub: https://github.com/vercel-labs/agent-skills

## Can my agent use this?

Yes, this is built for agents. Install with the skills CLI or copy the skill folders into your project's skills directory, then invoke the skill by name.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: GitHub, CLI, Copy/paste.
Install: `npx skills add vercel-labs/agent-skills`

## Prompt to hand your agent

```text
Set up and use Vercel Agent Skills in this project.

What it is: Installable skills that teach agents React, Next.js and web design best practices.

Website: https://github.com/vercel-labs/agent-skills
GitHub: https://github.com/vercel-labs/agent-skills
Install: npx skills add vercel-labs/agent-skills

Use it specifically for:
- agent design reviews
- React and Next.js quality
- Claude Code setups

How you can access it: GitHub, CLI, Copy/paste.
Works with: React, Next.js.
License: MIT. Respect it.

Follow the official setup instructions above. Once available, use it when it is relevant to the task rather than by default, and tell me what it changed.
```

## Related

- [Web Interface Guidelines](https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md): A concise, agent-readable checklist of what a well-built web interface must get right.
- [Anthropic Skills](https://dontmakeitugly.com/resources/anthropic-skills.md): Anthropic's public skills repository, including skills for front-end and design work.
- [UI/UX Pro Max](https://dontmakeitugly.com/resources/ui-ux-pro-max.md): A popular open-source design-intelligence skill with styles, palettes and font pairings for agents.
- [21st.dev Magic MCP](https://dontmakeitugly.com/resources/magic-mcp-21st.md): Describe a component in your agent and get a polished one generated from a large library.

## In collections

- [Best resources for designing with Claude Code](https://dontmakeitugly.com/collections/building-with-claude-code.md)

Vercel Agent Skills is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.