agent-skills

Agent Skills 是一套面向 AI 编码代理的技能集合，以指令和脚本的形式打包，用于扩展代理的能力。技能遵循 Agent Skills 格式，安装后即可自动使用，代理在检测到相关任务时会调用它们。 包含的技能： - vercel-optimize：审计 Vercel 项目的成本、性能、可靠性、缓存、函数使用情况和计费机会。它首先收集 Vercel 指标，然后仅调查这些指标所指向的路由和文件。适用于优化已部署项目、降低成本或函数使用量、调查缓慢或昂贵的路由、发现缓存/ISR/中间件/图片/构建分钟数问题，并生成按优先级排序的成本和性能报告。 - react-best-practices：来自 Vercel Engineering 的 React 和 Next.js 性能优化指南，包含 8 个类别、40 多条规则，并按影响程度排序。类别包括消除瀑布流、包体积优化、服务端性能、客户端数据获取、重渲染优化、渲染性能以及 JavaScript 微优化。适用于编写组件或页面、实现数据获取、审查代码性能，或优化包体积和加载时间。 - web-design-guidelines：根据 100 多条规则审查 UI 代码，涵盖无障碍性、性能和用户体验。类别包括无障碍性、焦点状态、表单、动画、排版、图片、性能、导航与状态、深色模式与主题、触摸与交互，以及区域设置/i18n。 - writing-guidelines：根据 Vercel 写作手册审查文档和文章，包含 80 多条规则，涵盖规划、语气与语调、按内容类型划分的语调、标题与结构、列表、代码、占位符/单位/数字、排版、源格式、定价与付费页面、AI 工作流以及审查。 - react-native-guidelines：针对 AI 代理优化的 React Native 最佳实践，包含 7 个部分、16 条规则，涵盖性能、布局、动画、图片、状态管理、架构以及平台特定模式。 - react-view-transitions：使用 React 的 View Transition API 实现动画的指南，涵盖 ViewTransition 组件、addTransitionType、过渡类型、共享元素过渡、通过 Web Animations API 实现的 JavaScript 动画、Next.js 集成（包括 next/link 上的 transitionTypes 属性）、可直接使用的 CSS 动画配方，以及无障碍性注意事项。 - composition-patterns：用于扩展的 React 组合模式，通过复合组件、状态提升和内部组合，帮助避免布尔属性泛滥。 - vercel-deploy-claimable：将应用和网站部署到 Vercel，专为与 claude.ai 和 Claude Desktop 配合使用而设计。它从 package.json 自动检测 40 多个框架，返回预览 URL 和用于转移所有权的认领 URL，处理静态 HTML 项目，并在上传时排除 node_modules 和 .git。 安装通过 npx skills add vercel-labs/agent-skills 完成。每个技能包含一个带有代理指令的 SKILL.md、用于自动化的可选脚本，以及可选参考。main 分支上对技能的任何更改都会发布一个不可变的 GitHub release，其中包含 Agent Skills 发现索引和每个技能一个产物；相同的产物也可以使用提供的脚本在本地构建。该项目采用 MIT 许可证。