agent-skills README

The project's README from github.com/vercel-labs/agent-skills. As one markdown file: README.md.

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.

skills.sh

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:

react-best-practices

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

Use when:

Categories covered:

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:

Categories covered:

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:

Categories covered:

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:

Categories covered:

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:

Topics covered:

composition-patterns

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

Use when:

Patterns covered:

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:

Features:

How it works:

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

License

MIT

agent-skills (vercel-labs/agent-skills)

Searching Database…

Что это такое?Это официальная коллекция Vercel из многоразовых «навыков» — готовых инструкций и скриптов, которые дают ИИ-агентам для программирования экспертизу в конкретных задачах: аудит стоимости и производительности Vercel, лучшие практики React и Next.js, ревью UI-дизайна, ревью стиля текста и развёртывание проектов на Vercel, которые можно забрать себе в аккаунт.
Это плагин, который я запускаю, или просто файлы, которые читает агент?Это не код, который вы запускаете сами. Каждый навык — это папка с файлом инструкций SKILL.md и, по желанию, вспомогательными скриптами и справочными документами, которые ИИ-агент читает и выполняет.
Как добавить эти навыки в моего агента?После установки по шагу Installation из репозитория навыки начинают работать автоматически: агент сам выбирает подходящий навык, как только замечает подходящую задачу, и ничего вызывать вручную не нужно.
Какие ИИ-агенты могут реально использовать эти навыки?Любой агент, который поддерживает формат Agent Skills, может использовать большинство этих навыков. Но навык vercel-deploy-claimable создан специально для claude.ai и Claude Desktop, чтобы пользователи могли забрать развёртывание себе.
Работает ли vercel-optimize с любой кодовой базой?Нет: vercel-optimize требует проект, который уже развёрнут на Vercel, потому что сначала он получает живые метрики Vercel и разбирает только те маршруты и файлы, которые эти метрики отмечают.
Что умеет навык react-best-practices?Он объединяет более 40 правил производительности React и Next.js в 8 категориях — устранение «водопадов» последовательных запросов, размер бандла, серверная производительность, загрузка данных на клиенте, оптимизация повторных рендеров и другое — с сортировкой по влиянию на результат.
Что проверяет web-design-guidelines?Он проверяет UI-код по более чем 100 правилам: доступность, состояния фокуса, формы, анимацию, типографику, тёмную тему, а также работу с сенсорным вводом и локализацией.
Как навык vercel-deploy-claimable на самом деле развёртывает проект?Он упаковывает проект в архив tarball, исключая node_modules и .git, автоматически определяет фреймворк по package.json среди более чем 40 фреймворков, загружает его и возвращает ссылку на живой предпросмотр и ссылку для передачи, чтобы пользователь мог перенести владение проектом в свой аккаунт Vercel.
Как распространяются обновления навыков?Каждое изменение навыка в основной ветке main публикует неизменяемый релиз на GitHub, который содержит индекс для обнаружения навыков Agent Skills и отдельный артефакт для каждого навыка; такие же артефакты можно собрать и локально.
Size
11.4 MB
Stars
32.6K
Age
10mo
Commits · 90 Days