面向Web 开发的 Agent Skills

从 CLI 部署、管理、检查和排查 Vercel 项目，涵盖部署、环境变量、域名、日志、指标和 Core Web Vitals。

来自 vercel/vercel

• Release

使用 SWA CLI 创建、配置并部署 Azure Static Web Apps，包括本地模拟、staticwebapp.config.json、Functions API 和 GitHub Actions CI/CD。

来自 github/awesome-copilot

• Implementation
• Release

指导使用 AWS Blocks 构建全栈应用，这是一个 Infrastructure-from-Code 框架，涵盖 API、存储、认证、实时和部署。

来自 aws/agent-toolkit-for-aws

• Design
• Implementation
• Release

使用 Chrome DevTools MCP 进行专家级浏览器自动化、调试和性能分析：导航、截图、网络检查和性能剖析。

来自 github/awesome-copilot

面向 AI Agent 的浏览器自动化 CLI：通过 CDP 导航页面、填写表单、点击、截图、提取数据和测试 Web 应用。

来自 vercel-labs/agent-browser

• Testing

让 Web 应用在手机上感觉原生：使用 CSS 和 meta tags 修复粘滞 hover、点击高亮、100vh bug、输入缩放、安全区域和触摸交互。

来自 emilkowalski/skills

实现高级 TypeScript 类型系统、自定义类型守卫、工具类型、品牌类型和 tRPC，以实现端到端类型安全。

来自 jeffallan/claude-skills

• Design
• Implementation

妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。

来自 larksuite/cli

以书面 CONSTRAINTS.md 契约的形式确立项目质量标准，包含覆盖率、性能和可访问性阈值，并监控差异以发现被削弱的检查。

来自 addyosmani/agent-skills

通过文件所有权策略、冲突避免、接口契约和集成模式协调并行功能开发，用于多 agent 实现。

来自 wshobson/agents

• Implementation

指导 Stripe 集成决策，涵盖开发和测试环境规划（独立沙盒与共享测试模式沙盒）、API 选择（Checkout Sessions 与 PaymentIntents）、Connect 平台设置（Accounts v2、控制器属性）、计费/订阅、税务和注册（Stripe Tax、automatic_tax、产品税码）、Treasury 金融账户、集成选项（Checkout、Payment Element）、从已弃用的 Stripe API 迁移，以及安全最佳实践（API 密钥管理、API 密钥权限、webhooks、OAuth）。适用于规划、构建、修改、测试或审查任何 Stripe 集成时，包括选择开发环境、接受付款、构建市场平台、集成 Stripe、处理付款、设置订阅、收取销售税、VAT 或 GST、创建关联账户或实现安全密钥处理。

来自 stripe/ai

通过 gh-axi CLI 操作 GitHub：问题、拉取请求、讨论、堆叠 PR、工作流运行、发布和 Projects。

来自 kunchenguid/gh-axi

通过 Sleek API 设计移动应用 UI 屏幕，从自然语言描述创建项目和渲染屏幕，然后用 HTML、React Native 或 SwiftUI 实现。

来自 designed-by-ai/skills

声明的前提（自述）: API key · Paid account

使用 .NET Web 开发的当前官方指南构建、审查、重构或架构 ASP.NET Core Web 应用。适用于处理 Blazor Web Apps、Razor Pages、MVC、Minimal APIs、基于控制器的 Web APIs、SignalR、gRPC、中间件、依赖注入、配置、身份验证、授权、测试、性能、部署或 ASP.NET Core 升级时。

来自 openai/skills

• Implementation

必须用于 Vue.js 任务。强烈推荐将 Composition API 与 `<script setup>` 和 TypeScript 作为标准方案。涵盖 Vue 3、SSR、Volar、vue-tsc。任何 Vue、.vue 文件、Vue Router、Pinia 或使用 Vue 的 Vite 工作都应加载。除非项目明确要求 Options API，否则始终使用 Composition API。

来自 vuejs-ai/skills

• Design

通过实现集成的前端和后端组件，并在每一层实施分层安全，构建以安全为核心的全栈 Web 应用。覆盖从数据库到 UI 的完整技术栈，在所有层强制执行身份验证、输入验证、输出编码和参数化查询。使用…

来自 jeffallan/claude-skills

• Requirements
• Design
• Implementation

在构建新 UI 或重塑现有 UI 时，提供打造独特、有意图的视觉设计的指导。帮助确定美学方向、排版，并做出不显得像模板化默认选项的选择。

来自 anthropics/skills

• Implementation

将 Figma 设计转化为生产级应用代码，实现 1:1 视觉还原。适用于根据 Figma 文件实现 UI 代码、用户提到“实现设计”“生成代码”“实现组件”、提供 Figma URL，或要求构建与 Figma 规格匹配的组件时。若要通过 `use_figma` 写入 Figma 画布，请使用 `figma-use`。

来自 openai/skills

• Implementation

声明的前提（自述）: Node.js

> 审查和创建独特、生产级的前端界面，具有高设计质量和设计系统合规性。使用三个支柱进行评估：无摩擦的从洞察到行动、高质量工艺和可信赖的构建。适用于：PR 审查、设计审查、可访问性审计、设计系统合规性检查、创意前端设计、UI 代码审查、组件审查、响应式设计检查、主题测试和创建令人难忘的 UI。不适用于：后端 API 审查、数据库模式审查、基础设施或 DevOps 工作、无 UI 的纯业务逻辑或非前端代码。

来自 microsoft/skills

• Requirements
• Implementation

用于 Vue.js 测试。涵盖 Vitest、Vue Test Utils、组件测试、模拟、测试模式，以及用于 E2E 测试的 Playwright。

来自 vuejs-ai/skills

审查 UI 代码是否符合 Web Interface Guidelines。当被要求“review my UI”“check accessibility”“audit design”“review UX”或“check my site against best practices”时使用。

来自 vercel-labs/agent-skills

使用 Playwright 交互和测试本地 Web 应用的工具包。支持验证前端功能、调试 UI 行为、捕获浏览器截图和查看浏览器日志。

来自 anthropics/skills

• Implementation

使用 Tailwind CSS v4、设计令牌、组件库和响应式模式构建可扩展的设计系统。适用于创建组件库、实现设计系统或标准化 UI 模式时。

来自 wshobson/agents

当你开发、设计、构建、部署、调试、迁移或排查 CloudBase（腾讯云开发, 云开发, TCB, 微信云开发）项目时使用此 skill — Web、微信小程序、小程序、uni-app、移动端（iOS、Android、Flutter、React Native）。涵盖 UI（页面, 界面, 表单, dashboard, prototype, 原型）；认证（登录, 注册, OAuth, publishable key）；…

来自 tencentcloudbase/cloudbase-skills

• Requirements
• Implementation
• Release

声明的前提（自述）: Credentials

使用Midscene进行视觉驱动的浏览器自动化。从截图操作——无需DOM或无障碍标签。在无头Puppeteer中运行——不会接管用户的鼠标或键盘。还支持CDP模式和Bridge模式以连接现有Chrome。当用户…时使用此技能。

来自 web-infra-dev/midscene-skills

• Implementation
• Testing

antfu 风格设计约定，范围更广。以 UnoCSS 优先，基于类的语义 token，为工具和 devtools UI 提供明暗双主题，并为落地页和产品界面提供设计解读、反粗制滥造和微交互打磨。在使用 UnoCSS 构建或重构任何界面时使用。

来自 antfu/skills

指导稳定的 API 和接口设计。在设计 API、模块边界或任何公共接口时使用。在创建 REST 或 GraphQL 端点、定义模块之间的类型契约，或建立前后端边界时使用。

来自 addyosmani/agent-skills

• Implementation

在实现任何功能或修复 bug 时使用，需在编写实现代码之前。

来自 obra/superpowers

• Requirements
• Implementation

使用 Azure Playwright Workspaces（原 Microsoft Playwright Testing）大规模运行 Playwright 测试。适用于跨云托管浏览器扩展浏览器测试、与 CI/CD 流水线集成，或将测试结果发布到 Azure 门户。

来自 microsoft/skills

• Requirements
• Release

为用户代码库生成自定义设计系统规则。当用户说“创建设计系统规则”“为我的项目生成规则”“设置设计规则”“自定义设计系统指南”，或希望为 Figma 转代码工作流建立项目专属约定时使用。需要 Figma MCP 服务器连接。

来自 openai/skills

• Design

声明的前提（自述）: MCP server

当任务涉及将应用页面、视图或多板块布局转换到 Figma 时，请将此 skill 与 figma-use 搭配使用。触发条件：'write to Figma'、'create in Figma from code'、'push page to Figma'、'take this app/page and build it in Figma'、'create a screen'、'build a landing page in Figma'、'update the Figma screen to match code'。当用户希望根据代码或描述在 Figma 中构建或更新完整页面、屏幕或视图时，这是首选的工作流 skill。它通过 search_design_system 发现设计系统组件、变量和样式，将其导入，并使用设计系统 token 而非硬编码值，逐板块增量组装屏幕。

来自 openai/skills

• Implementation

将 Notion 规格转化为实施计划、任务和进度跟踪；适用于实施 PRD/功能规格并据此创建 Notion 计划和任务时。

来自 openai/skills

• Requirements

从 Penpot 文件中提取 DESIGN.md 设计文档文件：采用 design-md 格式的可移植 markdown 规范（YAML frontmatter 包含颜色/字体/圆角/间距/组件 token 映射 + 文字章节：Overview、Colors、Typography、Layout、Shapes、Components、Do's & Don'ts、Iteration Guide、Known Gaps），基于文件的真实 token、库资产和采样的组件样式——绝不虚构。对画布只读；写入一个本地 markdown 文件。触发词：'generate DESIGN.md'、'create a design.md'、'document the design system as markdown'、'export design guidelines'、'extract design documentation'、'design system spec file'、'make a style guide file from this design'。

来自 penpot/penpot-ai-kit

对照已实现的代码（源组件或 Storybook story）审查 Penpot 设计，并输出结构化的 DRIFT 报告。适用于工程师需要确认构建与设计一致时：从选区提取 HTML/CSS，将其 token/结构/状态映射到代码组件，进行差异比对，并列出双方各自缺失的内容及严重程度和调和方案。未提供代码源时，可优雅降级为设计系统 token 检查。触发词：'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。

来自 penpot/penpot-ai-kit

构建、测试并部署面向 Teams 和 Copilot 的 Microsoft 365 应用与 Agent。包含项目创建、本地测试、云部署、故障排查以及 Slack 到 Teams 迁移等子技能。适用场景：Teams agent、bot、tab、消息扩展、Declarative Agents、Custom Engine Agents、本地测试、Agents Playground、Azure 资源预配、远程部署、Slack 到 Teams 迁移、跨平台 bot 开发、Block Kit 到 Adaptive Cards 转换。不适用场景：通用 Web 开发、非 bot/非 Teams 项目。

来自 microsoft/skills

• Release

当实现已完成、所有测试通过，需要决定如何整合这项工作时使用。

来自 obra/superpowers

让每个实现决策都以官方文档为依据。当你希望在实现前对照官方文档验证方案，或希望获得权威、带来源引用且不含过时模式的代码时使用。在构建任何正确性重要的框架或库时使用。

来自 addyosmani/agent-skills

• Requirements
• Implementation

声明的前提（自述）: Python

在编码前创建规格说明。适用于启动新项目、新功能或重大变更且尚无规格说明时。适用于起草包含目标与范围的 PRD 或需求文档，或需求不清晰、含糊、仅以模糊想法存在时。适用于单个需求跨越多个可独立测试的能力，需要在编写规格前分解为模块能力图时。

来自 addyosmani/agent-skills

• Requirements
• Implementation