所有 Skills

frontend-testing

150Ktesting-qa

使用 Vitest 和 Testing Library 编写、更新或审查 Dify 前端测试。适用于 web/ 或 packages/dify-ui/ 下的前端规范、测试覆盖率请求、回归测试、可测试性或测试策略。

langgenius

frontend-code-review

149Kfrontend

审查 Dify 前端代码的正确性、可访问性、组件设计、dify-ui 使用、数据/查询边界、性能和测试。触发条件为 `.tsx`、`.ts`、`.js`、UI、React、Next.js、待变更或聚焦前端审查请求。

langgenius

next-partial-prefetching-adoption

142Kfrontend

Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the `partialPrefetching` flag, opt routes in with `export const prefetch = 'partial'`, audit `<Link prefetch={true}>` calls, or resolve the link-prefetch-partial and instant-shell-url-data insights.

next-cache-components-adoption

141Kfrontend

在 Next.js 应用中开启缓存组件，并解决由此暴露的阻塞路由。当用户想要启用、采用或迁移到缓存组件、翻转 `cacheComponents` 标志、处理大量 blocking-prerender / instant 验证错误、运行 `cache-components-instant-false` codemod，或决定是使用 `export const instant = false` 将路由排除在验证之外还是原地修复时使用。

next-dev-loop

141Kfrontend

验证编辑应用代码后的 Next.js 运行时行为。使用此技能确认更改在实际运行的应用中有效——而不仅仅是编译或类型检查通过。结合 /_next/mcp（Next.js 的视角）和 agent-browser（浏览器的视角）。需要正在运行的 `next dev`。

next-cache-components-optimizer

141Ktesting-qa

通过设置代理循环，在缓存组件/PPR下，使Next.js路由在初始加载（硬导航）和客户端导航（软导航）时实现即时导航。将目标编码为一个失败的@next/playwright instant()端到端测试，并逐步使其通过，每次验证一个路由；交付的测试随后防止回归。当被要求使路由导航即时（其静态外壳立即提交）、修复静态外壳未预渲染/服务/预取的路由、扩展路由的静态外壳或修复其首次绘制缓慢、诊断哪个Suspense边界阻止路由进入静态外壳，或为路由编写instant()端到端守卫时使用。需要Next.js 16.3+并启用cacheComponents；如果版本较旧，则指导升级。

migrate-radix-to-base

121Kfrontend

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

shadcn-ui

migrate-radix-to-base

119Kfrontend

将 React 项目和组件从 Radix UI 迁移到 Base UI。当被要求从 radix 迁移、切换到 base-ui、转换 radix 原语或切换 shadcn 项目的基础库时使用。处理单个组件（如“迁移 accordion”）和整个项目。

shadcn

shadcn

119Kfrontend

管理 shadcn 组件和项目——添加、搜索、修复、调试、样式化和组合 UI，包括聊天界面。提供项目上下文、组件文档和使用示例。适用于使用 shadcn/ui、组件注册表、预设、--preset 代码或任何包含 components.json 文件的项目。也会在“shadcn init”、“使用 --preset 创建应用”或“切换到 --preset”时触发。

shadcn-ui

gstack

119Ktesting-qa

gstack Skill 套件的路由分发器。(gstack)

garrytan

shadcn

117Kfrontend

管理 shadcn 组件和项目——添加、搜索、修复、调试、样式化和组合 UI。提供项目上下文、组件文档和使用示例。适用于使用 shadcn/ui、组件注册表、预设、--preset 代码或任何包含 components.json 文件的项目。同时触发于“shadcn init”、“create an app with --preset”或“switch to --preset”。

shadcn

x402

115Kbackend-api

Set up Browser Use Cloud payments with x402 — pay per request from a crypto wallet (USDC on Base mainnet), no signup or API key. Two setups it works out up front — "just use it" (set up a wallet so you or Claude Code can run cloud browser tasks paid from the wallet — Claude writes and runs throwaway scripts, nothing touches your codebase) or "build it in" (install the SDK and write the key + code into your project). Walks through wallet setup, funding, .env, and a ~$1 test run. Use when the user asks about x402, pay-per-use, USDC payments, or wants Browser Use Cloud without an API key. For the free-tier signup (reverse-CAPTCHA → API key), use `browser-use cloud signup` or the `cloud` skill instead.

vercel-composition-patterns

108Kdatabase

React composition patterns that scale. Use when refactoring components with

supabase

vitest

108Ktesting-qa

Vitest API 与配置参考指南（兼容 Jest）—— 涵盖 vi.* Mock 模拟、Spies 侦听器、伪造定时器（Fake Timers）、代码覆盖率配置、Fixtures 测试固件、快照测试以及测试用例筛选等内容。适用于 Monorepo 中任意模块的 Vitest API 和配置相关疑问；若涉及 Studio 专属的测试策略与组件测试搭建，请先参阅 studio-testing 和 studio-mock-api-tests。

supabase

cloud

107Kbackend-api

Browser Use Cloud 参考文档指南。Browser Use Cloud 是用于浏览器自动化的托管式 API 与 SDK。当用户需要处理以下需求时请触发此 Skill：Cloud REST API（v2 或 v3）、browser-use-sdk（Python 或 TypeScript）、X-Browser-Use-API-Key 身份验证、云端 Session（会话）、浏览器 Profile 配置与同步、CDP WebSocket 直连、防检测隐身浏览器、住宅代理、验证码（CAPTCHA）处理、Webhook、工作区（Workspace）、Skill 技能市场、liveUrl 实时流传输、价格方案，或各类集成模式（如 Chat UI 界面、Subagent 子 Agent 模式、为现有 Agent 扩展浏览器工具等）。当遇到 n8n / Make / Zapier 集成、在云端基础设施上运行 Playwright / Puppeteer / Selenium，或 1Password 凭据库集成相关问题时也可触发。请注意：若用户询问的是开源版 Python 库（Agent、Browser、Tools 配置），请勿使用本 Skill，请改用开源版 Skill。

open-source

107Kmcp-integrations

使用 browser-use 开源库编写 Python 代码的文档参考。当用户需要 Agent、Browser 或 Tools 配置帮助、编写从 browser_use 导入的代码、询问 @sandbox 部署、支持的 LLM 模型、Actor API、自定义工具、生命周期钩子、MCP 服务器设置或使用 Laminar 或 OpenLIT 进行监控/可观测性时，使用此技能。也适用于关于 browser-use 安装、提示策略或敏感数据处理的问题。请勿用于 Cloud API/SDK 使用或定价——请改用 cloud 技能。请勿用于通过 CLI 命令直接自动化浏览器——请改用 browser-use 技能。

remote-browser

106Kbrowser-web

从沙箱远程机器控制本地浏览器。当代理在沙箱（无图形界面）中运行，需要浏览网站、与网页交互、填写表单、截图或通过隧道暴露本地开发服务器时使用。

design-system

106Kfrontend

令牌架构、组件规范和幻灯片生成。三层令牌（原始→语义→组件）、CSS变量、间距/排版比例、组件规范、策略性幻灯片创建。用于设计令牌、系统化设计、符合品牌规范的演示文稿。

design

106Kdesign-ui

综合设计技能：品牌标识、设计令牌、UI样式、Logo生成（55种风格，Gemini AI）、企业形象识别系统（50个交付物，CIP样机）、HTML演示文稿（Chart.js）、横幅设计（22种风格，社交/广告/网页/印刷）、图标设计（15种风格，SVG，Gemini 3.1 Pro）、社交照片（HTML→截图，多平台）。操作：设计Logo、创建CIP、生成样机、制作幻灯片、设计横幅、生成图标、创建社交照片、社交媒体图片、品牌标识、设计系统。平台：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。

ui-styling

106Kfrontend

使用 shadcn/ui 组件（基于 Radix UI + Tailwind）、Tailwind CSS 实用优先样式和基于画布的视觉设计，创建美观、可访问的用户界面。适用于构建用户界面、实现设计系统、创建响应式布局、添加可访问组件（对话框、下拉菜单、表单、表格）、自定义主题和颜色、实现深色模式、生成视觉设计和海报，或建立跨应用的一致样式模式。

banner-design

106Kdesign-ui

为社交媒体、广告、网站主视觉、创意素材和印刷品设计横幅。提供多种艺术指导方向，搭配AI生成的视觉元素。操作：设计、创建、生成横幅。平台：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、网站主视觉、印刷品。风格：极简、渐变、粗体排版、照片、插画、几何、复古、玻璃拟态、3D、霓虹、双色调、编辑、拼贴。使用ui-ux-pro-max、frontend-design、ai-artist、ai-multimodal技能。