agent-skills
agent-skills 是 Vercel 官方推出的一套专为 AI 编程助手设计的技能库，旨在通过标准化的指令和脚本扩展智能体的编码能力。它有效解决了 AI 在生成代码时容易忽略性能优化、无障碍访问（Accessibility）及架构最佳实践等痛点，确保输出结果不仅功能可用，更具备生产级的高质量与可维护性。
这套工具特别适合前端开发者、全栈工程师以及希望提升代码质量的 AI 使用者。其核心亮点在于涵盖了多个垂直领域的深度指南：包括由 Vercel 工程团队总结的 React 与 Next.js 性能优化规则，能自动消除数据请求瀑布流并优化包体积；超过 100 条的 Web 设计规范，全面审查无障碍性、表单交互及深色模式适配；以及针对 React Native 的移动端架构建议和原生 View Transition API 的平滑动画实现方案。此外，它还提供了可扩展的组件组合模式，帮助避免复杂的布尔值 props 滥用。无论是构建新项目还是重构旧代码，agent-skills 都能让 AI 助手像资深专家一样思考，显著提升开发效率与代码水准。
使用场景
某前端团队正在基于 Next.js 重构电商详情页，需在两周内完成高性能页面开发并兼顾无障碍访问标准。
没有 agent-skills 时
- AI 生成的代码常出现数据获取“瀑布流”，导致首屏加载缓慢，开发者需手动排查性能瓶颈。
- 界面组件缺乏完整的无障碍属性（如 aria-labels），后续被测试团队退回整改，重复沟通成本高。
- 列表页到详情页的跳转生硬，AI 无法直接提供符合原生体验的共享元素过渡动画方案。
- 组件内部布尔值 Props 泛滥，逻辑耦合严重，后期维护时难以扩展新功能。
- 移动端适配遗漏安全区域处理，导致在 iPhone 刘海屏设备上内容被遮挡。
使用 agent-skills 后
- 调用
react-best-practices技能，AI 自动采用并行数据获取模式，消除渲染阻塞，首屏速度提升 40%。 - 结合
web-design-guidelines进行代码审计，自动补全键盘导航与语义化标签，一次性通过无障碍验收。 - 利用
react-view-transitions技能，直接生成带有方向感知的平滑路由过渡动画，用户体验媲美原生应用。 - 借助
composition-patterns重构组件架构，用复合组件替代繁琐的布尔开关，代码清晰度显著改善。 - 应用
react-native-guidelines（针对混合端）或 Web 布局规范，自动识别并修复安全区域与触摸反馈问题。
agent-skills 将 Vercel 官方的工程最佳实践转化为 AI 的可执行指令，让代码生成从“能跑”直接跃升至“生产级高质量”。
运行环境要求
- 未说明
未说明
未说明
快速开始
代理技能
用于 AI 编码代理的一组技能。技能是封装好的指令和脚本，用于扩展代理的功能。
技能遵循 Agent Skills 的格式。
可用技能
react-best-practices
由 Vercel 工程团队提供的 React 和 Next.js 性能优化指南。包含 8 个类别下的 40 多条规则，并按影响程度进行优先级排序。
适用场景：
- 编写新的 React 组件或 Next.js 页面
- 实现数据获取（客户端或服务器端）
- 审查代码中的性能问题
- 优化打包体积或加载时间
涵盖的类别：
- 消除瀑布渲染（关键）
- 打包体积优化（关键）
- 服务器端性能（高）
- 客户端数据获取（中高）
- 重新渲染优化（中）
- 渲染性能（中）
- JavaScript 微优化（低到中）
web-design-guidelines
审查 UI 代码是否符合 Web 界面最佳实践。针对可访问性、性能和用户体验方面的 100 多条规则对代码进行审计。
适用场景：
- “审查我的 UI”
- “检查可访问性”
- “设计审计”
- “审查 UX”
- “对照最佳实践检查我的网站”
涵盖的类别：
- 可访问性（aria-labels、语义化 HTML、键盘事件处理）
- 焦点状态（可见焦点、focus-visible 模式）
- 表单（自动填充、验证、错误处理）
- 动画（prefers-reduced-motion、适合合成器的变换）
- 排版（曲引号、省略号、等宽数字）
- 图片（尺寸、懒加载、替代文本）
- 性能（虚拟化、布局抖动、预连接）
- 导航与状态（URL 反映状态、深度链接）
- 深色模式与主题（color-scheme、theme-color meta）
- 触摸与交互（touch-action、点击高亮）
- 区域设置与国际化（Intl.DateTimeFormat、Intl.NumberFormat）
react-native-guidelines
专为 AI 代理优化的 React Native 最佳实践。包含 7 个部分下的 16 条规则，覆盖性能、架构以及平台特定模式。
适用场景：
- 构建 React Native 或 Expo 应用
- 优化移动端性能
- 实现动画或手势操作
- 使用原生模块或平台 API
涵盖的类别：
- 性能（关键）：FlashList、记忆化、密集计算
- 布局（高）：flex 布局、安全区域、键盘处理
- 动画（高）：Reanimated、手势处理
- 图片（中）：expo-image、缓存、懒加载
- 状态管理（中）：Zustand 模式、React Compiler
- 架构（中）：monorepo 结构、导入
- 平台（中）：iOS/Android 特定模式
react-view-transitions
使用 React 的 View Transition API 实现流畅、原生感的动画效果。涵盖 <ViewTransition> 组件、addTransitionType、过渡类型，以及与 Next.js 的集成，包括 next/link 上的 transitionTypes 属性。
适用场景：
- 添加页面过渡或路由动画
- 为组件的进入/退出添加动画
- 创建共享元素过渡（列表到详情的形态变化）
- 实现方向性（前进/后退）导航动画
- 在 Next.js App Router 中集成视图过渡
- 动画实现列表重排或 Suspense 回退内容的显示
涵盖的主题：
<ViewTransition>组件（进入、退出、更新、共享触发）addTransitionType用于方向性或上下文特定的动画- 视图过渡类及 CSS 伪元素
- 使用
name属性实现共享元素过渡 - 通过 Web Animations API 实现 JavaScript 动画
- Next.js
transitionTypes属性在next/link上的应用 - 即用型 CSS 动画配方（淡入淡出、滑动、缩放、翻转）
- 可访问性支持（prefers-reduced-motion）
composition-patterns
可扩展的 React 组合模式。帮助避免布尔属性泛滥，通过复合组件、状态提升和内部组合来实现。
适用场景：
- 重构具有大量布尔属性的组件
- 构建可复用的组件库
- 设计灵活的 API
- 审查组件架构
涵盖的模式：
- 提取复合组件
- 提升状态以减少属性传递
- 通过内部组合实现灵活性
- 避免属性钻透
vercel-deploy-claimable
将应用程序和网站即时部署到 Vercel。专为 claude.ai 和 Claude Desktop 设计，支持直接从对话中进行部署。部署后的项目可以“认领”——用户可以将其所有权转移至自己的 Vercel 账户。
适用场景：
- “部署我的应用”
- “把这个部署到生产环境”
- “把这个上线”
- “部署并给我链接”
功能：
- 自动检测
package.json中的 40 多种框架 - 返回预览 URL（实时站点）和认领 URL（转移所有权）
- 自动处理静态 HTML 项目
- 上传时排除
node_modules和.git
工作流程：
- 将项目打包成 tarball
- 检测框架（Next.js、Vite、Astro 等）
- 上传至部署服务
- 返回预览 URL 和认领 URL
输出示例：
部署成功！
预览 URL：https://skill-deploy-abc123.vercel.app
认领 URL：https://vercel.com/claim-deployment?code=...
安装
npx skills add vercel-labs/agent-skills
使用
安装完成后，技能会自动可用。当检测到相关任务时，代理将自动调用这些技能。
示例：
部署我的应用
审查这个 React 组件是否存在性能问题
帮我优化这个 Next.js 页面
技能结构
每个技能包含：
SKILL.md- 代理使用的说明文档scripts/- 辅助自动化脚本（可选）references/- 支持性文档（可选）
许可证
MIT
常见问题
相似工具推荐
stable-diffusion-webui
stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。
everything-claude-code
everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上
ComfyUI
ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。
NextChat
NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。 这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。 NextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。
ML-For-Beginners
ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。 无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。
ragflow
RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。 在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。 这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。