https://github.com/vercel-labs/agent-skills
https://github.com/vercel-labs/agent-skills
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/vercel-labs/agent-skills
- Owner: vercel-labs
- Created: 2025-12-08T19:10:06.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-01-14T17:52:34.000Z (5 months ago)
- Last Synced: 2026-01-14T18:18:09.570Z (5 months ago)
- Language: Shell
- Size: 82 KB
- Stars: 805
- Watchers: 8
- Forks: 73
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
- skillshare-hub - **web-design-guidelines** - clean](https://img.shields.io/badge/risk-clean-brightgreen) — Review UI code for Web Interface Guidelines compliance and design quality (Skills Catalog / Design (17))
- awesome-github-projects - agent-skills - Vercel's official collection of agent skills ⭐26,621 `JavaScript` 🔥 (🔧 Utilities & Miscellaneous)
- awesome-claude-code - **agent-skills**
- StarryDivineSky - vercel-labs/agent-skills - labs/agent-skills 是 Vercel 官方推出的 AI 智能体技能库，旨在为开发者提供一套开箱即用的模块化工具，解决 AI 代理（Agent）开发中功能单一、重复造轮子的痛点。通过预置的标准化技能（如网络搜索、代码生成、数据分析等），开发者能快速构建具备复杂能力的 AI 代理，无需从零实现基础功能，显著降低开发门槛。 **项目的核心亮点在于其标准化、易扩展性与 Vercel 生态深度集成**。首先，技能以统一接口封装，例如 `search_web` 或 `generate_image`，开发者通过简单调用即可组合多技能，避免繁琐的 API 对接；其次，项目采用模块化设计，用户可基于现有技能轻松扩展自定义逻辑，甚至贡献回社区；最后，作为 Vercel 官方项目，其天然适配 Serverless 部署环境，与 Next.js 等框架无缝协作，省去基础设施适配成本。相较同类工具（如 LangChain 的 Tools），它更轻量、更聚焦于“即插即用”，尤其适合需要快速迭代的原型开发。 **其工作原理类似于“乐高积木”的拼装逻辑**。每个技能本质是一个独立函数，接收标准化输入（如自然语言指令）并返回结构化结果。AI 代理通过类似路由器的“技能调度器”解析用户意图，自动匹配最佳技能执行。例如，当用户提问“今天纽约的天气如何？”时，代理会先调用 `classify_intent` 技能识别需求类别，再触发 `fetch_weather` 技能获取数据。这一流程通过底层的事件总线（Event Bus）协调，确保高内聚低耦合。技术栈上，项目基于 TypeScript 开发，利用 Vercel 的 Serverless Functions 处理技能执行，既保证性能又可弹性扩展。 总体而言，agent-skills 通过抽象通用能力、标准化交互协议，为 AI 代理开发提供了“加速器”。其设计理念平衡了灵活性与效率，尤其适合中小团队在有限资源下构建功能丰富的智能应用，是 Vercel 布局 AI 生态的重要一环。 (A01_文本生成_文本对话 / 大语言对话模型及数据)
- awesome-scientific-skills - vercel-labs/agent-skills
- awesome-ccamel - vercel-labs/agent-skills - Vercel's official collection of agent skills (JavaScript)
- awesome-agent-skills - vercel
- awesome-prompts - vercel-labs/agent-skills
- awesome-claude-code - vercel-labs/agent-skills - labs/agent-skills?style=flat-square&logo=github) | React, Next.js, and web design best-practice rules for AI coding agents | (Skills & Plugins)
- awesome - vercel-labs/agent-skills - Vercel's official collection of agent skills (JavaScript)
- awesome-ai-coding-assistants-playbook - vercel-labs/agent-skills - FF6B35?style=flat)  (🧩 Skills / By Platform)
- antigravity-awesome-skills - vercel-labs/agent-skills - React Best Practices, Web Design Guidelines. (Credits & Sources / Official Sources)
- awesome-claude-code - agent-skills - labs/agent-skills?style=flat) | Vercel's official collection of agent skills, also available at skills.sh | (🎯 Agent Skills)
- awesome-frontend-skills - vercel-labs/agent-skills - react-best-practices` — 62 條規則、8 大類（消除 waterfall、bundle 最佳化、Server Side 效能、re-render 最佳化等） | `npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices` | (框架 Frameworks / React)
- awesome-openclaw-skills - vercel-labs/react-best-practices - | (Cloud & DevOps)
- awesome - vercel-labs/agent-skills - Vercel's official collection of agent skills (JavaScript)
README
# 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](https://agentskills.io/) 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:**
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
```bash
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