Vercel發(fā)布了agent-skills，這是一套將最佳實(shí)踐手冊(cè)轉(zhuǎn)化為AI編碼代理可復(fù)用技能的集合。該項(xiàng)目遵循Agent Skills規(guī)范，首先專注于React和Next.js性能、網(wǎng)頁設(shè)計(jì)審查以及在某平臺(tái)的的可認(rèn)領(lǐng)部署。技能通過一個(gè)類似于npm的命令安裝，隨后在正常的編碼流程中被兼容的代理發(fā)現(xiàn)。

Agent Skills格式

Agent Skills是一種用于為AI代理打包能力的開放格式。一個(gè)技能是一個(gè)包含指令和可選腳本的文件夾。該格式的設(shè)計(jì)使得不同的工具能夠理解相同的布局。

在vercel-labs/agent-skills中，一個(gè)典型的技能包含三個(gè)主要組件：

• SKILL.md：包含描述該技能功能和行為的自然語言指令。
• scripts目錄：包含代理可以調(diào)用以檢查或修改項(xiàng)目的輔助命令。
• references目錄（可選）：包含額外的文檔或示例。

react-best-practices技能還會(huì)將其單獨(dú)的規(guī)則文件編譯成一個(gè)單獨(dú)的AGENTS.md文件。該文件針對(duì)代理進(jìn)行了優(yōu)化，將所有規(guī)則聚合到一個(gè)文檔中，可以在代碼審查或重構(gòu)期間作為知識(shí)源加載。這消除了為每個(gè)項(xiàng)目進(jìn)行臨時(shí)提示工程的需要。

vercel-labs/agent-skills中的核心技能

該倉庫目前提供了三個(gè)針對(duì)常見前端工作流程的主要技能：

1. react-best-practices
該技能將React和Next.js性能指導(dǎo)編碼為一個(gè)結(jié)構(gòu)化的規(guī)則庫。它包含超過40條規(guī)則，分為8個(gè)類別。這些規(guī)則涵蓋了諸如消除網(wǎng)絡(luò)瀑布流、減少捆綁包大小、服務(wù)器端性能、客戶端數(shù)據(jù)獲取、重渲染行為、渲染性能和JavaScript微優(yōu)化等領(lǐng)域。
每條規(guī)則都包含一個(gè)影響評(píng)級(jí)。關(guān)鍵問題列在前面，然后是影響較小的更改。規(guī)則通過具體的代碼示例來表達(dá)，展示了一個(gè)反模式和一個(gè)修正版本。當(dāng)兼容的代理審查React組件時(shí)，它可以將發(fā)現(xiàn)直接映射到這些規(guī)則上。

2. web-design-guidelines
該技能專注于用戶界面和用戶體驗(yàn)質(zhì)量。它包含超過100條規(guī)則，涵蓋可訪問性、焦點(diǎn)處理、表單行為、動(dòng)畫、排版、圖像、性能、導(dǎo)航、深色模式、觸摸交互和國際化。
在審查期間，代理可以使用這些規(guī)則來檢測缺失的ARIA屬性、表單控件不正確的標(biāo)簽關(guān)聯(lián)、用戶請(qǐng)求減少運(yùn)動(dòng)時(shí)對(duì)動(dòng)畫的誤用、圖像缺少替代文本或延遲加載，以及其他在手動(dòng)審查中容易遺漏的問題。

3. vercel-deploy-claimable
該技能將代理審查循環(huán)與部署連接起來。它可以將當(dāng)前項(xiàng)目打包成tarball，基于package.json自動(dòng)檢測框架，并在某平臺(tái)上創(chuàng)建部署。該腳本可以識(shí)別超過40種框架，并且還支持靜態(tài)HTML站點(diǎn)。
該技能返回兩個(gè)URL。一個(gè)是已部署站點(diǎn)的預(yù)覽URL。另一個(gè)是認(rèn)領(lǐng)URL。認(rèn)領(lǐng)URL允許用戶或團(tuán)隊(duì)將部署附加到他們的某平臺(tái)賬戶，而無需共享原始環(huán)境的憑據(jù)。

安裝和集成流程

可以從命令行安裝技能。發(fā)布公告強(qiáng)調(diào)了一個(gè)簡單的路徑：

npx skills i vercel-labs/agent-skills

該命令獲取agent-skills倉庫并將其準(zhǔn)備為一個(gè)技能包。
某平臺(tái)及周邊生態(tài)系統(tǒng)還提供了一個(gè)add-skill CLI，旨在將技能連接到特定的代理。典型的流程如下：

npx add-skill vercel-labs/agent-skills

add-skill通過檢查配置目錄來掃描已安裝的編碼代理。例如，Claude Code使用.claude目錄，而Cursor使用.cursor和主文件夾下的目錄。然后，CLI會(huì)將選定的技能安裝到每個(gè)工具的正確技能文件夾中。
您可以在非交互模式下調(diào)用add-skill以精確控制安裝內(nèi)容。例如，您可以為Claude Code僅在全局級(jí)別安裝React技能：

npx add-skill vercel-labs/agent-skills --skill react-best-practices -g -a claude-code -y

您也可以在安裝前列出可用的技能：

npx add-skill vercel-labs/agent-skills --list

安裝后，技能存儲(chǔ)在代理特定的目錄中，例如~/.claude/skills或.cursor/skills。代理發(fā)現(xiàn)這些技能，讀取SKILL.md，然后能夠?qū)⑾嚓P(guān)的用戶請(qǐng)求路由到正確的技能。
部署后，用戶通過自然語言進(jìn)行交互。例如，“審查此組件是否存在React性能問題”或“檢查此頁面的可訪問性問題”。代理檢查已安裝的技能，并在適當(dāng)?shù)臅r(shí)候使用react-best-practices或web-design-guidelines。

關(guān)鍵要點(diǎn)

• vercel-labs/agent-skills實(shí)現(xiàn)了Agent Skills規(guī)范，將每個(gè)能力打包成包含SKILL.md、可選腳本和參考資料的文件夾，這樣不同的AI編碼代理就可以使用相同的技能布局。
• 該倉庫目前提供了3個(gè)技能：用于React和Next.js性能的react-best-practices、用于UI和UX審查的web-design-guidelines，以及用于在某平臺(tái)上創(chuàng)建可認(rèn)領(lǐng)部署的vercel-deploy-claimable。
• react-best-practices編碼了超過40條規(guī)則，分為8個(gè)類別，按影響排序，并提供具體的代碼示例，這使得代理能夠運(yùn)行結(jié)構(gòu)化的性能審查，而不是基于臨時(shí)提示的檢查。
• web-design-guidelines提供了超過100條規(guī)則，涵蓋可訪問性、焦點(diǎn)處理、表單、動(dòng)畫、排版、圖像、性能、導(dǎo)航、深色模式、觸摸交互和國際化，使代理能夠進(jìn)行系統(tǒng)化的UI質(zhì)量檢查。
• 技能通過諸如npx skills i vercel-labs/agent-skills和npx add-skill vercel-labs/agent-skills等命令安裝，然后從代理特定的技能目錄中被發(fā)現(xiàn)，從而將最佳實(shí)踐庫轉(zhuǎn)化為AI編碼工作流中可復(fù)用、版本可控的構(gòu)建塊。