已發佈技能 17
web-design-guidelines
檢視 UI 程式碼是否符合設計規範
Claude 可以自動根據既定的網頁設計規範檢視 UI 程式碼,在部署前發現無障礙功能問題、使用性問題和最佳實踐違規。此技能會擷取最新的規範並進行靜態分析,以識別可改進之處。
vercel-react-view-transitions
為 React 應用程式新增原生檢視轉場效果
為 React 應用程式新增流暢的頁面轉場和共享元素動畫,需要理解 View Transitions API 及其整合模式。此技能提供逐步指導、CSS 配方,以及來自 Vercel Labs 的 Next.js 模式。
vercel-react-native-skills
應用 React Native 最佳實踐
建高效能的 React Native 應用需要遵循平台特定模式,包括清單、動畫和狀態管理。本技能提供 35 條以上的 AI 代理規則,以實現最佳化的行動開發。
vercel-react-best-practices
優化 React 和 Next.js 效能
React 應用程式經常有效能問題,例如不必要的重新渲染、大型套件大小和串列式資料獲取瀑布流。這個技能提供來自 Vercel 工程團隊的 45 條優先規則,以消除這些瓶頸並建置高效能的 Web 應用程式。
vercel-composition-patterns
應用 React 組合模式
使用布林屬性建構 React 元件會導致程式碼難以維護。本技能提供適配 AI 的指南,說明如何使用複合元件、提升狀態和組合內部邏輯,以建立可擴展的元件架構。
slack
使用瀏覽器自動化來自動化 Slack
手動檢查 Slack 訊息和搜尋對話很耗時。此技能透過瀏覽器自動化來自動執行 Slack 互動,無需 API 驗證或機器人權杖。
vercel-cli-with-tokens
使用權杖驗證部署至 Vercel
將 Web 應用程式部署至 Vercel 需要驗證和專案設定。此技能可讓您的 AI 助理使用存取權杖管理 Vercel 部署,無需互動式登入提示。
skill-creator
建立 Claude Code 技能
使用者需要建立有效 Claude Code 技能的指導。此技能提供建立、結構化和封裝技能的完整指南,包含經過驗證的最佳實踐。
react-best-practices
React 最佳實踐
適用於 Claude、Codex 和 Claude Code 的 AI 技能
next-upgrade
Next 升級
專為 Claude、Codex 和 Claude Code 設計的 AI 技能
next-cache-components
使用 Cache Components 優化 Next.js 效能
Next.js 應用程式經常反覆抓取資料,導致頁面載入緩慢。Cache Components 支援 Partial Prerendering 和智慧快取策略,可即時提供快取內容,同時串流傳輸動態部分。
next-best-practices
建立可投入生產的 Next.js 應用程式
不再猜測 Next.js 模式,寫出可擴展的程式碼。此技能提供來自 Vercel 的權威指導,包括檔案慣例、React Server Components、資料獲取、錯誤處理和部署最佳實踐。
find-skills
探索並安裝代理技能
使用者通常不知道有哪些技能可以幫助他們完成任務。這個技能引導他們從開放的代理生態系统中發現相關功能,並使用簡單的命令進行安裝。
electron
自動化 Electron 桌面應用程式
透過 Chrome DevTools Protocol 控制 VS Code、Slack、Discord 和 Figma 等 Electron 應用程式。連接到執行中的桌面應用程式、自動化 UI 互動,以及測試原生 Electron 應用程式。
dogfood
測試網頁應用程式的錯誤與問題
Dogfood 系統性地探索網頁應用程式以找出錯誤、使用者體驗問題及其他缺陷,並產生包含完整重現證據(包括截圖和影片)的結構化報告。
deploy-to-vercel
立即將您的專案部署到 Vercel
手動部署專案到 Vercel 需要時間且必須瀏覽儀表板。此技能透過自動框架偵測和預覽網址生成,自動化整個部署工作流程。
agent-browser
自動化網頁測試的瀏覽器互動
手動自動化網頁互動既耗時又容易出錯。Agent-browser 提供了一個命令列介面用於瀏覽器自動化,可實現自動化表單填寫、螢幕截圖、網頁擷取和端到端測試工作流程。