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

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)

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:

"Deploy my app"
"Deploy this to production"
"Push this live"
"Deploy and give me the link"

Features:

Auto-detects 40+ frameworks from package.json
Returns preview URL (live site) and claim URL (transfer ownership)
Handles static HTML projects automatically
Excludes node_modules and .git from uploads

How it works:

Packages your project into a tarball
Detects framework (Next.js, Vite, Astro, etc.)
Uploads to deployment service
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 add-skill 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

Skill Structure

Each skill contains:

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

License

MIT

React Best Practices

React Best Practices