The vercel-labs/agent-skills repository presents a collection of packaged instructions and scripts, termed "skills," designed to extend the capabilities of AI coding agents. These skills adhere to a defined "Agent Skills format" and are intended to provide agents with specialized functionalities for development tasks.

The core methodology involves integrating these pre-defined skills into an AI agent's operational framework, enabling the agent to autonomously leverage them when relevant user tasks are detected. Each skill encapsulates specific knowledge, rules, and optional helper scripts to execute complex operations.

Key skills detailed include:

1. react-best-practices:

This skill focuses on performance optimization for React and Next.js applications, drawing from Vercel Engineering guidelines. Its methodology involves auditing source code against a comprehensive set of over 40 rules, categorized across 8 distinct areas, and prioritized by impact severity. The rules are designed to identify and flag issues related to:

• Critical Impact: Eliminating waterfalls in data fetching and optimizing bundle size.
• High Impact: Enhancing server-side performance.
• Medium-High Impact: Optimizing client-side data fetching.
• Medium Impact: Improving re-render efficiency and overall rendering performance.
• Low-Medium Impact: Applying JavaScript micro-optimizations.

This skill is applicable during the creation of new components/pages, implementation of data fetching mechanisms, code review processes, and efforts to reduce bundle size or load times.

2. web-design-guidelines:

This skill systematically reviews UI code to ensure compliance with web interface best practices, encompassing accessibility, performance, and user experience (UX). Its methodology involves an automated audit against more than 100 rules distributed across 11 categories:

• Accessibility: Covering aspects like aria-labels, semantic HTML, and keyboard handlers.
• Focus States: Ensuring visible focus indicators and focus-visible patterns.
• Forms: Addressing autocomplete attributes, validation, and error handling.
• Animation: Incorporating prefers-reduced-motion and compositor-friendly transforms.
• Typography: Focusing on stylistic details such as curly quotes, ellipses, and tabular numbers.
• Images: Verifying proper dimensions, lazy loading, and alt text.
• Performance: Including virtualization techniques, prevention of layout thrashing, and preconnect directives.
• Navigation & State: Ensuring URL reflection of state and deep-linking capabilities.
• Dark Mode & Theming: Guidelines for color-scheme and theme-color meta tags.
• Touch & Interaction: Optimizing touch-action and tap-highlight behavior.
• Locale & i18n: Utilizing Intl.DateTimeFormat and Intl.NumberFormat for internationalization.

3. vercel-deploy-claimable:

This skill enables instant deployment of applications and websites to the Vercel platform, particularly integrated for use with claude.ai and Claude Desktop. The core methodology for deployment involves:

• Project Packaging: The project's files are programmatically bundled into a tarball.
• Framework Detection: The system automatically detects the project's framework by analyzing its package.json file, supporting over 40 frameworks (e.g., Next.js, Vite, Astro). Static HTML projects are also handled.
• Exclusion: Sensitive or unnecessary directories, specifically node_modules and .git, are automatically excluded from the upload to optimize transfer size and security.
• Upload & Deployment: The packaged project is then uploaded to the Vercel deployment service.
• Output: Upon successful deployment, the skill returns two crucial URLs: a preview URL for the live site (https://skill-deploy-abc123.vercel.app) and a "claim URL" ($https://vercel.com/claim-deployment?code=...$) that allows the user to transfer ownership of the deployment to their personal Vercel account, providing a seamless and secure handoff.

Installation of these skills is managed via npx add-skill vercel-labs/agent-skills, after which they become automatically available to the agent for relevant task execution. Each skill's internal structure typically comprises a SKILL.md file for instructions, an optional scripts/ directory for helper automation, and an optional references/ directory for supporting documentation. The project is distributed under an MIT License.