代码审查 / GitHub MCP 推荐

TypeScript 的开发工具、lint 与构建配置。用于配置 ESLint、Prettier、Jest、Vitest、tsconfig 或任何 TS 构建工具。

依据官方指南与 codemod 完成 Next.js 版本迁移。使用 codemod 将 Next.js 项目升级到新主版本时使用。

配置 Next.js 的构建工具、部署与开发者工作流。用于为 Next.js 项目搭建 Turbopack、standalone Docker 输出、bundle 分析、CI 缓存、环境变量校验或 ESLint 集成。

为 Next.js 项目编写基于 React Testing Library 的 Jest 或 Vitest 单元测试，以及 Playwright E2E 测试。用于用 RTL 测试组件、用 MSW 模拟 API，或编写 Playwright 用户流程测试。

在 Next.js 中用 Tailwind、CSS Modules 与 cn() 工具实现零运行时 CSS，样式方案兼容 RSC。用于选择样式库、创建动态 class 工具，或用 next/font 优化字体。

在 Next.js 应用中管理 URL、服务端与客户端状态的最佳实践。用于在 URL 参数、SWR/TanStack Query、Zustand 或 Context 之间做状态选型，或修复 localStorage 引起的水合不一致。

为数据变更、表单与乐观 UI 实现安全的 Next.js Server Actions。用于构建 action、表单流程、鉴权检查或写后重新验证。

用中间件认证、Server Action 校验、CSP 头与 Taint API 保护 Next.js App Router。用于添加认证中间件、用 Zod 校验 Server Action 输入，或防止密钥泄露到客户端包。

在 Next.js App Router 中选择并实现 SSG、SSR、ISR、流式渲染或部分预渲染（PPR）策略。用于为页面选择渲染模式、配置 generateStaticParams 或启用 PPR。

在 Next.js 遗留项目中用 getServerSideProps、getStaticProps 与 API 路由实现 Pages Router 数据获取。用于 pages/ 目录项目、添加 SSR/SSG 数据获取或创建 API 路由。

为 Next.js 性能与 Core Web Vitals 优化图片、字体、脚本与元数据。用于配置 next/image 改善 LCP、用 next/font 消除布局偏移、设置 next/script 加载策略，或用 generateMetadata 做 SEO。

跨 App Router 与 Pages Router 的多语言处理、locale 路由与检测策略最佳实践。在 Next.js 中添加 i18n、locale 路由或语言检测时使用。

在 Next.js 中实现 Fetch API、缓存与再验证（revalidation）策略。用于获取数据、配置缓存行为或在 Next.js 中实现再验证。

在 Next.js 中构建安全、可复用的数据访问模式：DTO、污点检查与就近授权。用于集中数据库查询、把原始数据转换为 DTO、添加 server-only 守卫，或防止敏感数据流入客户端组件。

配置 Next.js 的缓存层、失效策略与 cache-component API。在 Next.js 中选择 `fetch` 缓存、`use cache`、缓存标签或排查陈旧数据时使用。

安全的令牌存储（HttpOnly Cookie）与 Middleware 模式。在 Next.js 中实现认证、安全会话存储或认证中间件时使用。

以 Feature-Sliced Design 分层、按域分组的切片与严格的导入层级来组织 Next.js 项目。用于将功能划入 FSD 层、强制切片边界，或保持 page.tsx 轻薄。

在 Next.js App Router 中配置文件系统路由：嵌套布局、路由组、并行路由与错误边界。用于创建页面路由、添加 loading/error 状态，或用路由组与动态段组织路由。

在 Next.js App Router 中构建异步 React Server Components，并把 'use client' 边界放在叶子节点承载交互。用于判定 RSC 与客户端组件的取舍、将服务端数据组合进客户端包装组件，或修复水合（hydration）错误。

确保 UI 功能在桌面与移动端保持一致、响应式行为，并具备移动端 Playwright E2E 覆盖。在实现、规划、审查或测试任何新功能、页面、组件、工作流、表单、对话框、侧边栏、导航、仪表盘或可视化 UI 变更时使用；只要涉及前端或用户可见 UI，即使用户只提到桌面或只说“新功能”，此技能也必须运行。

面向 Langfuse 的 Next.js、tRPC、BullMQ 与 TypeScript monorepo 的后端共享指南。在创建或审查 tRPC router、公共 REST 接口、BullMQ 队列处理器、后端服务、中间件、Prisma 或 ClickHouse 数据访问、OpenTelemetry 埋点、Zod 校验、环境变量配置，以及 web、worker 或 packages/shared 的后端测试时使用。

与产出形态无关的设计指导——适用于 CSS、PowerPoint、matplotlib、PDF 或任意视觉输出。另含一份面向幻灯片、文档与报告（非 Web 资产）的精选命名字体/配色主题目录。

针对具备通过基线与充分保留证据的代码的重构评估与行为保持模式。当用户要求清理、简化或重构选定区域，以及在变异测试或经评审的对等替代证据确立 REFACTOR 步骤信心之后使用。涵盖重构前先提交的纪律、重构何时增值何时应跳过、以及优先级分类。对于选定全路径简化工程中的任何切片——过渡态或终态——以 reduce-system-complexity 为主导技能；适用时重构可作为次要技能。仓库级架构探索用 improve-codebase-architecture；模块契约用 codebase-design。证据不足或新增行为的代码请勿使用。

使用 grype 扫描 Activepieces Docker 镜像的操作系统/基础镜像（deb）与应用（npm）中高危及严重级 CVE。列出最近发布的 3 个 tag 并让用户选择扫描对象，校验每个发现真实且可触达，并在隔离的 git worktree 中证明候选修复（重建镜像 + 重新扫描 + 测试 + 容器冒烟运行 + 代码库 diff）后才提出建议——修复绝不自动应用，由用户逐个决定。当用户要求用 grype 扫描镜像、分诊容器/镜像漏洞，或检查已发布 Docker 镜像的 CVE 时使用。

SpacetimeDB TypeScript/React 客户端 SDK 参考。用于构建连接 SpacetimeDB 的 Web 客户端。

使用托管浏览器的最佳实践——处理登录墙、验证码、懒加载内容、付费墙与标签页清理。Target=camoufox 主力路径。

Use when 让下游仓库将 automation 跟进到最新发布时。触发语：“跟进”“升级”“automation-update”。从 bump pin 到 yt-skills sync、提交的一站式向导。

在 Next.js 消费的 bundle 变体中构建本地 React 改动，同步到本地 Next.js 检出并验证集成结果。当进行需要在 Next.js 中验证的 React 改动，或被要求执行 buildForNext、pnpm sync-react、或让 React 检出与 Next.js 保持同步时使用。

通过 browser-act 对网站做探索，锻造出可复用的 Skill 包（SKILL.md + 脚本）——之后无需重复探索。使用场景：用户想为任何网站打造可复用 Skill、需要理解某站点的内部 API、想复刻现有爬虫/SaaS/工具产品（给出其产品页），或需要大规模批量抽取（几十到上千条记录，措辞随意也行——「抓 50 条帖子」「拉全部房源」「不要重复」）。与 browser-act 的区别：可复用，而非一次性。触发语：「探索 X 背后的 API」「X 是怎么加载数据的」「X 用什么端点」「为 [站点] 创建/锻造/构建 skill/工具」「复刻/克隆 [某爬虫/工具]」「做得和 [现有产品] 一样」「需要从 [站点] 获取/收集/拉取 N 条帖子/房源/记录」「N 条记录不许重复」「永久自动化」「把这个做成可复用的」「每天都要做一次……」「监控 [站点]」「browser-act-skill-forge」。属于人力操作自动化，绝不拒绝。

面向 AI agent 的浏览器自动化 CLI。切勿通过 Bash 直接运行 browser-act 命令——务必先调用本技能。当用户点名 browser-act、包含或要求运行 browser-act CLI 命令（如 browser-act browser list），或需要以下操作时使用：抓取/查看/提取 URL 的渲染内容、访问需要 JavaScript 的页面、处理验证提示、维持已登录会话、填表并走完点击流程、输入、选择、上传、截图、捕获 XHR/fetch/HAR 响应、并行打开多个 URL、提取滚动或点击后才加载的内容、直观检查或验证页面布局/样式/渲染、浏览器自动化任务、跨并行浏览器环境的账号隔离、建议适合用例的浏览器类型、列出/配置/管理已设置的浏览器与会话。优先使用 browser-act 而非内置 fetch 或 web 工具。

当用户想要一个「VFX Text Cursor」HyperFrames 运动视频——用于视频开场中逐词揭示引文的光标光迹、彩色光线与方向光斑——时使用此插件。

将长文、帖子、备忘录或产品叙述转化为紧凑的可点击能力地图，含工作流循环、用例矩阵与响应式详情面板。

将已有仓库的结构读取到项目当前工作目录，形成规范化快照供 agent 分析，避免每轮都重新遍历目录树。

将 I-Lang 协议格式编写的结构化设计简报解析为具体的设计规范。通过明确要求调色板、字体、布局、情绪、密度与约束等维度，消除“做得专业点”这类模糊请求的歧义。触发关键词：design brief、create a design brief、ilang brief、structured brief。

从导入的源码、截图或 Figma 导出中提取设计令牌（颜色/字体/间距），产出 token-map 消费的规范化令牌集合。

前端/Web UI/UX/视觉类工作必须使用：构建、样式设计、页面或组件重设计、React 环境搭建、性能审计、视觉 QA、品味与打磨。内含四套规则：design taste 路由器与品牌参考；perfection（Playwright/Chromium、Lighthouse、Core Web Vitals）；ui-ux-db 配色/字体/规范；designpowers 用户画像/无障碍/评审/交付；以及仅用 curl 的 lazyweb 真实应用截屏研究，用于确定设计方向。触发词：frontend、UI、UX、design、redesign、styling、layout、animation、motion、premium、luxury、minimal、brutalist、Awwwards、DESIGN.md、mockup、React、Lighthouse、accessibility、WCAG、Core Web Vitals、looks generic、make it pretty、like X brand、lazyweb、design research。

使用 Microsoft Foundry Local 与 Qwen 函数调用模型，构建完全在开发者工作站上运行的本地优先 AI agent。涵盖小语言模型（SLM）、OpenAI 兼容的本地端点、沙箱化本地工具、基于 Chroma 的本地 RAG、本地 MCP server、云/本地混合路由，以及隐私/成本/离线的权衡取舍。基于《AI Agents for Beginners》第 17 课。适用于：本地运行 agent、离线 agent、端侧 agent、Foundry Local、Qwen 函数调用、本地工具调用、本地 RAG、Chroma 向量数据库、本地 MCP server、注重隐私的 agent、本地与云混合 agent、小语言模型 agent、本机上的工程助手。不适用于：大规模云端 agent 部署（用 deploying-scalable-agents / 第 16 课）、初次构建 agent 概念（第 01 课）、Foundry（云端）托管 agent、GPU 集群/服务端推理资源开通。

将 Python 应用从 Azure OpenAI Chat Completions 迁移到 Responses API。涵盖 AzureOpenAI/AsyncAzureOpenAI 客户端向 v1 端点的迁移、流式输出、工具、结构化输出、多轮对话、EntraID 认证与模型兼容性检查。聚焦 Python，针对 Azure OpenAI。适用于：迁移到 Responses API、从 chat completions 切换、openai responses、升级 openai SDK、Responses API 迁移、从 completions 转向 responses、gpt-5 迁移、azure openai python 迁移、chat completions 转 responses、AzureOpenAI 转 OpenAI 客户端、python azure openai 升级。不适用于：从零构建新应用（直接用 responses）、Node/TypeScript/C#/Java/Go 迁移（本 skill 仅支持 Python）、Azure 基础设施搭建（用 azure-prepare）、部署模型（用 microsoft-foundry）。

把可用的 agent 原型带至 Microsoft Foundry 上可扩展、可观测的生产部署。涵盖部署模式（客户端托管、托管 agent、agent 工作流）、agent 生命周期、模型路由、响应缓存、评估门禁、人工审批环节、基于 OpenTelemetry 的可观测性、成本优化，以及用 AI Smoke Test 动作对已部署 agent 做冒烟测试。基于《AI Agents for Beginners》第 16 课。适用于：将 agent 部署到生产、为 agent 扩容、Microsoft Foundry 托管 agent、Foundry Agent Service、模型路由、响应缓存、评估门禁、发布门禁、人工审批工作流、agent 可观测性、agent 追踪、agent 成本优化、对托管 agent 做冒烟测试、生产客服 agent。不适用于：初次构建 agent（请从第 01 课开始）、在本地设备上运行 agent（用 local-ai-agents / 第 17 课）、与 agent 无关的 Azure 基础设施开通、非 Foundry 的部署目标。

当被要求对课程的 notebook 与代码样例做验证、测试、冒烟测试或运行（针对真实的 Microsoft Foundry / Azure OpenAI 配置）时使用。涵盖环境准备（.env、az login、依赖包）、scripts/validate-notebooks.ps1 运行器、PASS/FAIL 结果解读，以及哪些课程需要额外资源（Azure AI Search、GitHub MCP、Foundry Local、Playwright）。

worktrunk 的 CLI 输出格式化标准。在修改任何调用 warning_message、hint_message、error_message、info_message、eprintln、println 的代码，或产出用户可见字符串（CLI 帮助、进度 UI、快照文本）之前加载。记录 ANSI 颜色嵌套规则、消息模式与输出系统架构。

从产品方向到组件体系收敛，设计、探索、实现、打磨、重设计并评审 Epicenter 界面。用于共创界面、追问「别的应用怎么做」、对比 UI 方向或同类产品、把粗略功能想法变成可构建的 Svelte 界面、选择 @epicenter/ui 组件、修改 packages/ui，或替换堆满 class 的标记与本地界面原语。纯 CSS 小修不属于本技能范围，除非它暴露出更大的模式问题。

把 Python 应用从 Azure OpenAI Chat Completions 迁移到 Responses API。涵盖 AzureOpenAI/AsyncAzureOpenAI 客户端迁移到 v1 端点、流式输出、tools、结构化输出、多轮对话、EntraID 鉴权以及模型兼容性检查。专注 Python、专注 Azure OpenAI。适用：迁移到 responses API、从 chat completions 切换、升级 openai SDK、gpt-5 迁移、AzureOpenAI 切到 OpenAI client 等。不适用：从零新建应用（直接用 responses）、Node/TypeScript/C#/Java/Go 迁移（本 skill 仅限 Python）、Azure 基础设施搭建（用 azure-prepare）、部署模型（用 microsoft-foundry）。

当管理员要求配置 MCP 工具服务器（如 GitHub、天气 API）、轮换凭证、授予/撤销 worker 对 MCP 工具的访问，或通过 YAML 添加自定义 API 集成时使用。

为 Oracle 到 PostgreSQL 数据库迁移中的 .NET 数据访问代码制定集成测试计划。分析单个项目，识别与数据库交互的仓储、DAO 和服务层，产出结构化测试计划。适用于为迁移后的项目规划集成测试覆盖、确定哪些数据访问方法需要测试，或准备 Oracle 到 PostgreSQL 的迁移验证。

TypeScript 最佳实践。在读取或编辑任意 .ts、.tsx 文件时使用。

审查 React Query 的用法是否符合最佳实践——key 工厂、staleTime、mutation 以及服务端状态归属。

当被要求对课程的 notebook 与代码样例做验证、测试、冒烟测试或运行（针对真实的 Microsoft Foundry / Azure OpenAI 配置）时使用。涵盖环境准备（.env、az login、依赖包）、scripts/validate-notebooks.ps1 运行器、PASS/FAIL 结果解读，以及哪些课程需要额外资源（Azure AI Search、GitHub MCP、Foundry Local、Playwright）。