VL

vercel-labs/agent-skills

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

3.3万 stars 质量 67 趋势 99

Vercel官方的特工技能收藏

概览

一系列针对人工智能编码代理的技能。技能是集成的指令和脚本,用于扩展代理的能力。 审计Vercel项目的成本、性能、可靠性、缓存、功能使用情况和计费机会。它首先收集Vercel指标,然后仅调查这些指标指向的路由和文件。 - 优化已部署的Vercel项目 - 降低Vercel成本或功能使用率 - 调查缓慢或昂贵的路由 - 发现缓存、ISR、中间件、映像或构建分钟问题 - 生成排名成本和性能报告 React 和 Vercel Engineering Next.js性能优化指南。包含 8 个类别的 40+ 规则,按影响力优先级排序。 - 编写新的 React 组件或下一步。

概述(AI 翻译)

一系列针对人工智能编码代理的技能。技能是集成的指令和脚本,用于扩展代理的能力。

技能遵循特工技能格式。

可用技能

Vercel-优化

审计Vercel项目的成本、性能、可靠性、缓存、功能使用情况和计费机会。它首先收集Vercel指标,然后仅调查这些指标指向的路由和文件。

使用时间:

  • 优化已部署的 Vercel 项目
  • 降低Vercel成本或函数使用率
  • 调查缓慢或昂贵的路线
  • 查找缓存、ISR、中间件、映像或构建分钟问题
  • 制作排名成本与绩效报告

反应最佳实践

React 和 Vercel Engineering Next.js性能优化指南。包含 8 个类别的 40+ 规则,按影响力优先级排序。

使用时间:

  • 编写新的 React 组件或Next.js页面
  • 实现数据获取(客户端或服务器端)
  • 审查代码以识别性能问题
  • 优化捆绑大小或加载时间

涵盖类别:

  • 消除瀑布(关键)
  • 丛大小优化(关键)
  • 服务器端性能(高)

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 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 format.

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:

  • Optimizing a deployed Vercel project
  • Reducing Vercel costs or function usage
  • Investigating slow or expensive routes
  • Finding caching, ISR, middleware, image, or build-minute issues
  • Producing a ranked cost and performance report

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)

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:

  • “Review my docs”
  • “Check writing style”
  • “Audit prose”
  • “Review docs voice and tone”
  • “Check this page against the writing handbook”

Categories covered:

  • Planning (content plan, content type, user-shaped titles)
  • Voice & tone (active voice, direct address, banned words like easy/simple/quick)
在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add vercel-labs/agent-skills
新手?先看 mcpskill.org 教程 →