Anthropic Agent Skills vs Vercel Agent Skills

Note: This repository contains Anthropic's implementation of skills for Claude. For information about the Agent Skills standard, see agentskills.io.

Skills

Skills are folders of instructions, scripts, and resources that Claude loads dynamically to improve performance on specialized tasks. Skills teach Claude how to complete specific tasks in a repeatable way, whether that's creating documents with your company's brand guidelines, analyzing data using your organization's specific workflows, or automating personal tasks.

For more information, check out:

• What are skills?
• Using skills in Claude
• How to create custom skills
• Equipping agents for the real world with Agent Skills

About This Repository

This repository contains skills that demonstrate what's possible with Claude's skills system. These skills range from creative applications (art, music, design) to technical tasks (testing web apps, MCP server generation) to enterprise workflows (communications, branding, etc.).

Each skill is self-contained in its own folder with a SKILL.md file containing the instructions and metadata that Claude uses. Browse through these skills to get inspiration for your own skills or to understand different patterns and approaches.

Many skills in this repo are open source (Apache 2.0). We've also included the document creation & editing skills that power Claude's document capabilities under the hood in the skills/docx, skills/pdf, skills/pptx, and skills/xlsx subfolders. These are also open source (Apache 2.0), and we wanted to share them with developers as a reference for more complex skills that are actively used in a production AI application.

Disclaimer

These skills are provided for demonstration and educational purposes only. While some of these capabilities may be available in Claude, the implementations and behaviors you receive from Claude may differ from what is shown in these skills. These skills are meant to illustrate patterns and possibilities. Always test skills thoroughly in your own environment before relying on them for critical tasks.

Skill Sets

• ./skills: Skill examples for Creative & Design, Development & Technical, Enterprise & Communication, and Document Skills
• ./spec: The Agent Skills specification
• ./template: Skill template

Try in Claude Code, Claude.ai, and the API

Claude Code

You can register this repository as a Claude Code Plugin marketplace by running the following command in Claude Code:

/plugin marketplace add anthropics/skills

Then, to install a specific set of skills:

1. Select Browse and install plugins
2. Select anthropic-agent-skills
3. Select document-skills or example-skills
4. Select Install now

Alternatively, directly install either Plugin via:

/plugin install document-skills@anthropic-agent-skills
/plugin install example-skills@anthropic-agent-skills

After installing the plugin, you can use the skill by just mentioning it. For instance, if you install the document-skills plugin from the marketplace, you can ask Claude Code to do something like: "Use the PDF skill to extract the form fields from path/to/some-file.pdf"

Claude.ai

These example skills are all already available to paid plans in Claude.ai.

To use any skill from this repository or upload custom skills, follow the instructions in Using skills in Claude.

Claude API

You can use Anthropic's pre-built skills, and upload custom skills, via the Claude API. See the Skills API Quickstart for more.

Creating a Basic Skill

Skills are simple to create - just a folder with a SKILL.md file containing YAML frontmatter and instructions. You can use the template-skill in this repository as a starting point:

---
name: my-skill-name
description: A clear description of what this skill does and when to use it
---

## My Skill Name

[Add your instructions here that Claude will follow when this skill is active]

## Examples
- Example usage 1
- Example usage 2

## Guidelines
- Guideline 1
- Guideline 2

The frontmatter requires only two fields:

• name - A unique identifier for your skill (lowercase, hyphens for spaces)
• description - A complete description of what the skill does and when to use it

The markdown content below contains the instructions, examples, and guidelines that Claude will follow. For more details, see How to create custom skills.

Partner Skills

Skills are a great way to teach Claude how to get better at using specific pieces of software. As we see awesome example skills from partners, we may highlight some of them here:

• Notion - Notion Skills for Claude

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.

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:

• Optimizing a deployed Vercel project
• Reducing Vercel costs or function usage
• Investigating slow or expensive routes
• Finding caching, ISR, middleware, image, or build-minute issues
• Producing a ranked cost and performance report

react-best-practices

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

Use when:

• Writing new React components or Next.js pages
• Implementing data fetching (client or server-side)
• Reviewing code for performance issues
• Optimizing bundle size or load times

Categories covered:

• Eliminating waterfalls (Critical)
• Bundle size optimization (Critical)
• Server-side performance (High)
• Client-side data fetching (Medium-High)
• Re-render optimization (Medium)
• Rendering performance (Medium)
• JavaScript micro-optimizations (Low-Medium)

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:

• "Review my UI"
• "Check accessibility"
• "Audit design"
• "Review UX"
• "Check my site against best practices"

Categories covered:

• Accessibility (aria-labels, semantic HTML, keyboard handlers)
• Focus States (visible focus, focus-visible patterns)
• Forms (autocomplete, validation, error handling)
• Animation (prefers-reduced-motion, compositor-friendly transforms)
• Typography (curly quotes, ellipsis, tabular-nums)
• Images (dimensions, lazy loading, alt text)
• Performance (virtualization, layout thrashing, preconnect)
• Navigation & State (URL reflects state, deep-linking)
• Dark Mode & Theming (color-scheme, theme-color meta)
• Touch & Interaction (touch-action, tap-highlight)
• Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)

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:

• "Review my docs"
• "Check writing style"
• "Audit prose"
• "Review docs voice and tone"
• "Check this page against the writing handbook"

Categories covered:

• Planning (content plan, content type, user-shaped titles)
• Voice & tone (active voice, direct address, banned words like easy/simple/quick)
• Tone by content type (tutorial, how-to, reference, conceptual, troubleshooting)
• Headings & structure (sentence case, descriptive subheadings, TL;DR opens)
• Lists (when to use, bold/description format)
• Code (language tags, TypeScript first, <Steps/>, 80-col / 25-line limits)
• Placeholders, units, & numbers (snake_case text, count-up numbers, 64 KB/200 ms)
• Typography (no em dashes as punctuation, curly quotes, ellipsis character, non-breaking spaces)
• Source formatting (no hard-wrap, no --- rules, blank line discipline)
• Pricing & money pages (tables, uncompromising detail)
• AI workflow (accountability, enterprise models, plan first, disclose AI use)
• Review (PR description discipline, author accountability)

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:

• Building React Native or Expo apps
• Optimizing mobile performance
• Implementing animations or gestures
• Working with native modules or platform APIs

Categories covered:

• Performance (Critical) - FlashList, memoization, heavy computation
• Layout (High) - flex patterns, safe areas, keyboard handling
• Animation (High) - Reanimated, gesture handling
• Images (Medium) - expo-image, caching, lazy loading
• State Management (Medium) - Zustand patterns, React Compiler
• Architecture (Medium) - monorepo structure, imports
• Platform (Medium) - iOS/Android specific patterns

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:

• Adding page transitions or route animations
• Animating enter/exit of components
• Creating shared element transitions (list-to-detail morphing)
• Implementing directional (forward/back) navigation animations
• Integrating view transitions in Next.js App Router
• Animating list reorder or Suspense fallback reveals

Topics covered:

• <ViewTransition> component (enter, exit, update, share triggers)
• addTransitionType for directional/context-specific animations
• View Transition Classes and CSS pseudo-elements
• Shared element transitions with the name prop
• JavaScript animations via Web Animations API
• Next.js transitionTypes prop on next/link
• Ready-to-use CSS animation recipes (fade, slide, scale, flip)
• Accessibility (prefers-reduced-motion)

composition-patterns

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

Use when:

• Refactoring components with many boolean props
• Building reusable component libraries
• Designing flexible APIs
• Reviewing component architecture

Patterns covered:

• Extracting compound components
• Lifting state to reduce props
• Composing internals for flexibility
• Avoiding prop drilling

deploy-to-vercel

Deploy applications and websites to Vercel. Prefers git-push deploys on a linked project, falls back to the Vercel CLI, and uses vercel deploy --temporary when no login is available. Temporary deployments return a claim URL so users can keep them.

Use when:

• "Deploy my app"
• "Push this live"
• "Deploy and give me the link"
• "Create a preview deployment"

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:

• SKILL.md - Instructions for the agent
• scripts/ - Helper scripts for automation (optional)
• references/ - Supporting documentation (optional)

License

MIT