git-commit

根据 Conventional Commits 规范生成提交信息，并在分析代码变更的基础上自动完成变更拆分、文件暂存与安全提交。

react-best-practices

对 React 或 Next.js 项目的代码进行质量审查与性能分析，并针对结构与实现问题提供优化建议。

webapp-testing

基于 Playwright 生成并执行自动化测试脚本，以完成前端功能验证、界面调试与页面行为分析。

composition-patterns

基于组件组合模式对复杂组件进行拆分与重构，并优化组件结构与状态管理方式。

agent-browser

通过脚本化方式执行浏览器操作，以完成页面交互、数据提取与自动化流程控制。

brainstorming

在开发前强制对需求进行梳理与澄清，并通过交互式对话逐步形成可执行的设计方案与需求文档。

figma

解析 Figma 设计稿并生成对应的前端代码，同时复用现有设计系统与组件规范。

frontend-design

从零生成具有明确视觉风格的前端界面，在排版、配色与动效等方面完成整体设计。

frontend-skill

构建结构清晰且风格克制的前端界面，并通过规范的信息层级与排版提升视觉效果。

chart-visualization

根据数据特征选择合适的图表类型，并生成用于展示趋势、对比关系或结构关系的可视化结果。

data-analysis

基于 SQL 对 Excel 或 CSV 数据进行查询、聚合与多表关联分析，并输出结构化结果。

canvas-design

生成海报、封面等原创静态视觉内容，并通过构图与图形表达设计主题。

doc-coauthoring

通过分阶段的协作流程组织与完善文档内容，并生成结构清晰、逻辑完整的文稿。

简介

git-commit 是一个基于 Conventional Commits 规范的代码提交辅助工具。它可以分析代码变更，自动完成文件分组与暂存，并生成结构化的提交信息。该技能内置严格的 Git 安全协议与最佳实践，确保提交历史规范且安全。

应用场景

• 生成规范的提交信息

在提交代码时，AI 会通过该技能来自动分析暂存区或工作区的代码差异（diff），识别变更类型（如 feat、fix、docs）及作用范围（scope），并生成符合 Conventional Commits 规范的提交信息。提交描述必须使用现在时祈使句，长度不超过 72 字符。

• 按逻辑拆分与暂存变更

当工作区中存在多项变更时，该技能支持通过文件路径、通配符或交互式方式（git add -p）来暂存特定文件，确保单次提交仅包含一个变更。同时，该技能会严格遵守安全准则，不会将 .env、凭证或私钥等机密文件加入提交列表。

• 安全执行 Git 提交流程

执行 git commit 时，该技能支持让你以交互式方式修改或覆盖自动生成的类型、范围和描述。同时，它会严格遵循 Git 安全协议：

• 不修改 Git 配置；

• 不执行破坏性命令（如 --force、hard reset）；

• 默认不跳过代码检查钩子（--no-verify）；

• 钩子校验失败时，需修复后重新提交，不使用 git commit --amend 覆盖历史提交。

简介

react-best-practices 是一个面向 React 和 Next.js 项目（尤其是 TSX/JSX 文件）的代码质量审查与性能优化工具。它的内置规则基于 Vercel 官方最佳实践（8 类、64 条，按优先级划分），覆盖组件结构、Hooks 规范、a11y、TypeScript 以及服务端/客户端性能优化。该技能会在组件编写、修改或重构时自动被触发，然后执行代码检查并提供优化建议。

应用场景

• 核心性能瓶颈诊断与优化

针对数据请求与页面加载，该技能重点解决以下两大 CRITICAL 优先级的问题：

• 请求瀑布流：使用 Promise.all、Suspense 流式渲染，优化 API 路由中的异步依赖。

• Bundle 体积：避免引入冗余的 barrel file，使用 next/dynamic 动态加载组件，同时延迟第三方脚本的加载，从而提升页面的感知加载速度。

• UI 架构审查与技术栈迁移

检测到传统 CSS-in-JS（如 styled-components、@emotion）或大型组件库（如 @mui/material、@chakra-ui/react）时，该技能会提示你迁移至 shadcn/ui + Tailwind CSS 等现代技术栈，以提升服务端渲染性能与构建效率。

• 组件渲染与状态管理优化

在组件开发与重构阶段，该技能会审查代码并提供优化建议：

• 服务端/客户端协同：规范 React Server Components 的数据序列化与缓存机制（如 React.cache()），并优化客户端的 SWR 请求去重。

• 重渲染控制：规范 Hooks 的使用，优先采用派生状态（Derived State），避免过度使用 useEffect；结合 useTransition 与缓存策略，降低不必要的重渲染。

简介

webapp-testing 是一个基于 Playwright 的本地 Web 应用测试工具集，支持前端功能验证、UI 调试、页面截图及浏览器控制台日志采集，遵循 “先侦查后执行” 的流程。该技能提供示例与辅助脚本，覆盖静态 HTML 自动化测试、元素定位、日志抓取能力，并可在多服务场景下统一管理服务器生命周期。

应用场景

• 前端功能验证

在本地开发 Web 应用（如 React、Vue、Svelte）时，通过自然语言描述测试需求（如 “测试登录流程”），AI 会调用该技能，自动生成 Playwright 脚本，模拟用户操作并返回结果。

• UI 行为调试与分析

当你发现页面中某元素渲染异常或交互行为异常时，可向 AI 下达指令（例如：“截取首页完整截图” 或 “检查按钮的 DOM 结构”），AI 会执行该技能中的对应脚本，捕获截图或获取 HTML 内容，并将检查结果返回给你，以帮助你定位问题。

• 多服务应用测试

若你的应用为前后端分离架构，测试前端功能需后端 API 服务同步运行，只需向 AI 提供项目结构与启动命令，AI 会借助该技能中的 with_server.py 脚本来同时启动所有必需服务，再运行测试脚本，确保在完整的环境中执行测试。

• 静态页面测试

若你有不依赖服务器的纯静态 HTML 页面，需验证其内容或结构，只需向 AI 提供文件路径与测试需求，AI 会编写脚本并通过 file:// 协议在浏览器中打开该文件，然后执行自动化验证。

简介

composition-patterns 是一个面向 React 组件组合模式与架构设计的代码审查与重构工具。其核心目标是解决组件迭代过程中因逻辑叠加导致的 props 膨胀问题，通过复合组件（Compound Components）、状态提升（Lifting State）及现代 React API（含 React 19），构建具备高灵活性、高可维护性的组件体系。

应用场景

• 重构臃肿组件

当一个组件包含过多业务分支，充斥大量布尔 props（比如 isPrimary、hasIcon）和多层 if-else 时，你可以使用该技能来重构它。该技能会协助你将一个复杂组件拆分为多个细粒度子组件，以组合方式替代参数扩展，从而降低组件的复杂度。

• 设计可复用的组件库

在实现 Tabs、Modal、Select 这类通用组件时，该技能采用 Compound Components 来设计 API：将状态收敛在内部（通常为 Provider + Context），同时把结构的控制权交给使用者，让组件可以自由组合，而非固定用法。

• 设计灵活的业务 API

面对不确定的业务需求，需要为组件预留足够的内部扩展空间时，可以使用该技能。它会优先使用 children 来组合节点，而非一开始就引入复杂的 renderProps 或大量配置项，这样可以减少组件内部的复杂度，也更容易应对后续变化。

• 审查组件架构并规范状态

你可以将该技能作为团队的组件设计审核工具，在代码审查时用于评估组件架构是否健壮。该技能强制推行状态解耦，确保状态管理内聚在 Provider 中，并定义标准化的 Context 接口，保证复杂组件树中的状态流向清晰、易于维护。

• 适配 React 19 API

当需要重构组件以适配 React 19 的新特性时，可以使用该技能。例如，它会协助你移除冗余的 forwardRef 包装，并使用更灵活的 use() hook 替代传统的 useContext()，让组件代码更符合最新的 React 演进方向。

简介

agent-browser 是一个面向 AI 智能体的浏览器自动化 CLI 工具，用于执行网页交互与数据操作，包括页面导航、表单填写、点击操作、截图、数据提取及 Web 应用测试等，适用于以编程方式控制浏览器的自动化流程。

该技能支持的典型请求包括：打开页面、填写表单、点击元素、截图、抓取数据、登录网站等。

应用场景

• 测试网页中的复杂交互

当一个网页包含复杂的表单填写、下拉选择或多步点击时，可以借助该技能来自动化测试该网页。该技能通过快照命令（snapshot）获取页面内所有元素的简化标识（如 @e1），然后通过批量命令（batch）执行操作，从而提升执行效率并降低 Token 消耗。

• 抓取网页中的数据

当你需要从多个网页提取特定信息或结构化数据时，可以使用该技能。它支持提取页面链接（--urls）及指定元素内容（如 get text），并自动处理 Iframe，非常适用于结构化数据采集。

• 响应式布局与视觉回归验证

当需要验证网页在不同屏幕尺寸或设备上的表现时，可以使用该技能。它支持动态调整视口分辨率、模拟各类设备（如 iPhone 14），并生成全页面或特定元素的截图；结合 diff 功能，该技能非常适用于 UI 回归测试与布局校验。

简介

Brainstorming 是一个强制性的前置设计与需求分析技能，旨在通过协作式对话，将你的初步想法转化为结构化、可执行的设计方案与需求文档。在完成文档并获得用户确认前，禁止执行任何实现类操作（如编写代码、初始化项目等）。

该技能避免了 “需求太简单而无需设计” 的反模式，所有需求均需经过设计阶段，从而降低最终实现的偏差与返工率。

应用场景

• 引入全新功能与组件

你可以在需要增加新的业务逻辑、开发独立的模块，或在现有系统中扩展新能力等场景中使用该技能。它会引导你明确新需求，梳理现有代码与新功能的耦合度，并提供最终的设计方案。

• 修改或重构现有逻辑

当你需要修改或重构现有逻辑（例如臃肿的代码）时，该技能会在修改前先探索现有结构和瓶颈，然后提出针对性的改进方案。

• 拆解并规划大型项目

面对搭建类似 Notion 的协作平台等宏大需求时，该技能会在早期阶段对项目范围进行收敛。它会引导你理清各个子系统的依赖关系，确定最小可行性版本（MVP），将整体项目拆分为多个可独立开发的小任务。随后，它会优先为第一个子项目启动设计流程。

• 涉及 UI/UX 的视觉辅助决策

当讨论诸如 “仪表盘布局” 或 “页面交互” 等需要直观展示的需求时，该技能会提供基于浏览器的可视化工具（Visual Companion），直接渲染线框图、架构图或多套布局方案。这种直观的对比展示能够帮助你更准确地完成设计相关的决策。

简介

figma 是一个基于 Figma MCP Server 的设计到代码转换工具。其标准流程包括：通过设计链接获取节点结构（get_design_context）与参考截图（get_screenshot），生成初始代码（通常为 React + Tailwind），然后将生成的初始代码重构为符合项目规范的代码。

在实现过程中，该技能会让 AI 优先复用现有设计系统（如 tokens、基础组件、架构模式），并通过原生接口直接集成所需的图像与 SVG 资源，最终通过截图对比来完成视觉与行为校验。

应用场景

• 将 Figma 设计稿实现为代码

通过该技能，AI 可以把 Figma 中的某个页面、组件或模块实现为精确的前端代码。适用于对视觉一致性要求极高的场景，比如产品官网、落地页、营销页等。

• 用现有组件实现 Figma 设计

当设计稿与现有项目的设计系统存在差异时，可以用这个技能做转换。在尽量还原 Figma 视觉效果的前提下，AI 会优先复用项目中已有的组件和样式规范（如 color、typography、spacing 等），避免重复实现或引入不一致的写法。

• 按节点实现或修改代码

当你只需要实现或修改 Figma 中的某个具体部分（比如按钮、卡片或一个模块）时，可以直接针对这个节点来开发。通过 Figma 链接定位到对应的节点，并获取相关的设计上下文，只改需要改的部分，适合做局部调整或增量迭代。

简介

frontend-design 用于生成具备独特风格和高质量的前端界面，满足生产级 UI 标准。它的核心目标是避免生成同质化的“AI 风格” 界面，而是通过选择大胆、明确的美学主题（例如：极简、复古、未来感、野兽派等），并注重排版、色彩、动效、空间布局等细节，来打造具有辨识度和艺术感的前端界面。

应用场景

• 构建网页组件或页面

在从零开始创建一个具体的 UI 时（如一个 React 组件、一个 HTML/CSS 布局，或一个独立的静态页面），该技能会确保这个 UI 不仅功能完善，而且在视觉上具有辨识度。

• 开发完整的 Web 应用或网站

在构建落地页、仪表盘或小型网站等产品时，该技能会让 AI 从整体出发，确立一个统一且鲜明的设计风格，并将其全局应用到产物中。

• 美化或重塑现有界面

针对已有但设计质量较低的界面，可以使用该技能来提升界面的整体视觉质量，包括优化字体、配色、动效、布局等。

简介

frontend-skill 适用于打造视觉冲击力强的落地页、网站、应用、原型、Demo 或游戏界面。它强调克制的构图、图像主导的层级、统一的内容结构和精致动效。

该技能要求在编写代码前建立明确的视觉基调、内容规划、交互理念。当界面质量更依赖于艺术指导和视觉张力，而非功能堆砌时，该技能可以帮助你交付具有明确设计意图、符合现代审美的作品。其实现方式通常是聚焦于一个核心创意，并通过突出的视觉元素、简洁的文案、严格的间距和令人印象深刻的动效来呈现。

应用场景

• 构建高质量的落地页与官网

该技能可用来构建需要建立强烈视觉焦点的页面。它在设计上强调首屏全画幅视觉、大面积留白与高对比度的文字排版，通过精简的内容结构清晰传达产品信息，避免使用堆叠式卡片与过多装饰元素。

• 开发现代化的 Web 应用

该技能可用来开发强调效率和信息密度的软件界面，它会采用克制的层级关系和极简风格（类似 Linear 的设计语言），采用合适的字体排印和间距来组织内容，仅保留必要的边框和强调色，去除多余的阴影与渐变背景，且仅在真正代表交互的模块上使用卡片，以确保界面的整洁与易读性。

• 开发高质量的原型与 Demo

该技能可用来制作对视觉质量、叙事性和动态效果有较高要求的演示项目。设计上强调图像的叙事作用，要求使用具有临场感的高质量真实摄影图，避免使用抽象的 3D 渲染或带 UI 边框的网图。同时严格限制动效的数量，仅保留 2-3 个能改变页面氛围的核心动效，确保整体的交互克制但令人印象深刻。

核心定位

将 Figma 上的设计稿高度还原为代码，即 Design-to-Code。

大胆的创意与极致的视觉张力。

克制、高级感与现代感的设计。

主要功能

通过 Figma MCP Server，读取你提供的 Figma 链接或 Node ID，获取设计上下文、设计变量、图片资源，并将其精准翻译为生产级别的代码（如 React + Tailwind）。

当你只有需求而没有设计稿时，它能从零帮你设计并编写具有强烈风格的前端界面。它极力避免 “AI 味” 的审美和千篇一律的组件库风格。

用于构建结构严谨、排版专业的落地页（Landing Page）、SaaS 应用界面或原型。它推崇类似 Linear 那种干净、克制、高端的设计语言。

特点

不负责提供设计创意，而是严格遵守现有的设计稿，并复用你项目中的设计系统、Token 和组件。

强调艺术指导。它会要求明确的视觉基调（例如：极致极简、粗野主义、复古未来风、高级杂志风等），并在排版、字体（拒绝常见字体）、色彩对比、特殊视觉细节上做大胆尝试。

强调信息层级和排版。默认拒绝泛滥的卡片式设计，主张全屏大图、精准的留白、极少的颜色干扰、精炼的文案，以及少量但优雅的动效（如 Framer Motion 滚动反馈）。

何时选择

• 你已经有了现成的 Figma 设计稿。

• 你需要 AI 帮你把 Figma 上的某个页面或组件，精准地写成代码，并且要求视觉和行为上的高度还原。

• 你没有设计稿，需要从零构建一个页面。

• 你需要这个界面非常独特、吸引眼球、具有强烈的艺术风格。

• 你没有设计稿，需要从零构建一个页面。

• 你的界面侧重于功能性和信息获取效率，强调克制的设计风格、清晰的信息层级。

简介

chart-visualization 技能可以帮你快速将数据可视化。它会根据数据特征，从 26 种图表类型中自动选择最合适的一种，并提取生成图表所需的参数。随后，它会通过 Node.js 脚本生成高质量的图表图片，并返回图片 URL 及完整参数信息。

应用场景

• 多维数据对比

通过该技能，AI 可将时间序列与分类数据转换为折线图、柱状图或双轴图，帮助你观察核心指标随时间的变化趋势及周期性波动，并在同一视图中对比不同类别的数据的差异。例如，你可以用该技能来同时展示多项产品的销量变化与利润数据，用于评估业务的整体表现。

• 复杂层级与拓扑网络梳理

针对具有层级关系或流向关联的非线性数据，AI 可以通过该技能生成相应的组织架构图、网络关系图或桑基图。通过解析节点与连接关系，呈现层级结构、流转路径及关键转化情况，适用于梳理系统结构、分析资源流向或分析用户行为路径等场景。

• 地理性数据可视化

当数据包含地理信息或需要对数据统计分析时，AI 可以通过该技能生成区域地图、轨迹图，以及箱线图、直方图。它既可展示数据在空间上的分布情况，也可展示数据的分布特征，如数据的集中趋势、中位数及异常值，特别适用于区域市场监控和底层数据特征排查。

简介

data-analysis 技能基于 DuckDB（嵌入式分析型 SQL 引擎），用于处理用户的 Excel（.xlsx/.xls）和 CSV 文件，并对结构化数据进行分析与探索。整体流程包括：理解用户需求、检查文件结构以及执行数据分析。

该技能通过统一的 Python 脚本完成数据结构检查、基于 SQL 的查询和统计摘要生成，支持多工作表 Excel 文件处理，以及聚合、筛选、表关联（join）等操作，并可将结果导出为 CSV、JSON 或 Markdown 文件。

应用场景

• 数据结构理解与初步探索

在获取新的 Excel/CSV 文件后，快速查看表结构、字段类型、数据规模及样例数据，用于建立对数据内容的基本认知。

• SQL 查询与数据筛选

基于明确条件对数据进行查询、过滤和排序，从原始数据中提取所需结果，适用于定向的数据检索与问题验证。

• 聚合统计与指标分析

通过分组与聚合计算（如 SUM、AVG、COUNT），生成关键指标或对比不同维度的数据的表现，是最常见的分析场景。

• 多表关联与综合分析

若一个 Excel 文件包含多个工作表或需要同时分析多个文件，该技能会通过 join 来关联数据，然后对跨源数据进行整体分析，例如对订单、用户与商品数据的整合与分析。

简介

canvas-design 技能用于生成静态视觉设计作品（如海报、艺术页、封面），并可将作品输出为 .md、.pdf 和 .png 文件。它的执行流程分为两个步骤：

1. 生成设计原则：首先，该技能会生成一份设计原则文档（.md），以确立创作的核心理念。

2. 完成画布作品：然后，基于这份设计哲学，完成最终的视觉设计。

该技能强调通过构图、色彩、图形、留白和少量文字进行艺术表达，并要求所有输出均为原创，严禁模仿或复制现有作品。

应用场景

• 海报设计

该技能可用来制作线下活动、艺术展览或主题分享会的宣传海报。你只需提供活动主题，该技能会自动帮你完成排版：它会以图形、色块和几何分割为主来构成画面，并仅在画面特定位置保留标题、时间等少量核心文本。

• 封面设计

该技能可用来为行业报告、白皮书、电子书或音乐专辑等制作封面。它会将你提供的主题转化为视觉元素，例如网格、纹理等抽象图形，然后最终会生成一张带主标题的静态图像，可直接作为长篇文档或出版物的封面。

• 系列视觉图集

该技能可用来制作一组风格一致、但内容不同的图像。例如：一套四张的节气明信片、同一场活动的三天倒计时海报，或类似实体画册的连贯配图。该技能会先固定一套色彩和图形规则，再在此基础上连续生成多张构图各异的图片，确保整组物料在视觉风格上属于同一系列。

简介

byted-seedream-image-generate 是一个基于火山引擎 Seedream（豆包·星绘）大模型开发的高效图像生成 skill。它能够通过文本提示词直接生成高质量、多风格的图像。支持文生图（Text-to-Image）、图生图（Image-to-Image）、批量生成、自定义图片尺寸以及水印控制。

该技能提供三个不同的模型版本以应对不同需求：

• 4.0：适合日常使用，快速生成所需图像，响应迅速且稳定。

• 4.5：细节表现更优，适合处理复杂的图像。

• 5.0：提供最高的图像质量，且支持联网搜索工具及自定义输出格式。

应用场景

• 根据文本生成图像（文生图）

当你只提供文字描述，希望通过自然语言提示词直接生成符合语意的高质量图片时，可以使用该技能。

• 创作多种风格的艺术作品

当你需要生成特定艺术风格的美术作品时，例如动漫、写实、3D、水彩、插画等丰富多样的视觉风格，可以使用该技能。

• 制作创意项目的视觉物料

当你需要为创意项目、营销策划、海报设计或产品方案设计制作引人注目的配图与视觉素材时，可以使用该技能。

• 集成 AI 生成图像能力

当你的工作流或开发任务中，需要通过 “AI 生成图像” 的能力来提升效率时，可以使用该技能。

• 转换参考图的风格（图生图）

当你已经有一张参考图片，希望在此基础上将其转换成不同艺术风格的图片，或者保留原图结构进行二次创作时，可以使用该技能。

• 批量产出图片

当你需要在单次请求中一次性批量生成多张图片，可以使用该技能。

• 产出专业级高质量图片

当你对图像的细节、光影、构图有极高要求，需要专业的、可直接用于展示或生产环境的图片时，可以使用该技能。

简介

doc-coauthoring 是一款引导你编写结构化文档的技能。当您提出写作需求时（例如，“帮我写一个文档”、“写一个 PRD”），它会通过一个协作流程，将你的零散想法转化为逻辑清晰、内容完整的文档。

其工作流包含三个阶段：

1. 收集上下文：用户提供所有相关背景信息，AI 通过提问来补充和澄清必要信息。

2. 分块起草与细化：通过头脑风暴与编辑，逐步完善各个部分内容

3. 读者视角测试：在定稿前，模拟一位不了解背景的读者来审阅文稿，以发现潜在盲点。

这一机制旨在消除 AI 与你之间的信息壁垒，帮助你产出高质量、易于理解的文档。

应用场景

• 起草技术规格说明书

在从零构建系统设计文档时，引导你逐步细化技术方案，确保技术架构、系统依赖、向后兼容性等关键工程细节被完整且有序地记录。

• 记录工程决策与项目提案

帮助你结构化地梳理团队决策过程，清晰呈现问题背景、方案权衡（Trade-offs）、未采纳方案的理由以及最终的决策依据。

• 编写产品需求文档

该技能可以辅助你准确界定产品目标与功能边界，从目标受众的视角消除需求描述中的歧义，产出逻辑严密的 PRD。

• 排查文档盲区 & 验证文档可用性

在定稿或发布重要文档前，通过模拟“无背景知识读者”的视角进行独立测试，发现并修复仅核心参与者能理解、而外部团队易产生困惑的信息断层与逻辑盲点。