设计类 MCP / Skill 推荐

MCP 服务器开发，包括工具设计、资源端点、提示词模板与传输层配置

用 linear-gradient 做 CSS alpha 遮罩，实现横向或纵向的边缘渐隐（mask-image 与 -webkit-mask-image）。在被要求写 alpha mask、边缘渐隐或 CSS 遮罩渐变时使用。

用于撰写供人阅读的文本——文档、提交信息、错误消息、解释说明、报告或 UI 文案。运用 Strunk 的经典写作规则，让文字更清晰、更有力、更专业

基于代码库的威胁建模，枚举信任边界、资产、攻击者能力、滥用路径与缓解措施，并撰写简明的 Markdown 威胁模型。仅当用户明确要求对代码库或路径进行威胁建模、枚举威胁/滥用路径，或执行 AppSec 威胁建模时触发。对通用架构总结、代码审查或非安全设计工作不要触发。

外科手术式代码重构，在不改变行为的前提下提升可维护性。涵盖抽取函数、变量重命名、拆解上帝函数、增强类型安全、消除 code smell 与应用设计模式。比 repo-rebuilder 更渐进；用于持续改进。

面向 Node.js、Express 和 Next.js API 路由的后端架构模式、API 设计、数据库优化与服务端最佳实践。

Python 项目的组织方式、模块架构与公共 API 设计。适用于搭建新项目、组织模块、通过 __all__ 定义公共接口，或规划目录布局。

评审 API 设计、REST 约定与后端架构。当初级工程师构建 API 端点、Express 路由、中间件、控制器，或询问“这符合 RESTful 吗”“帮我检查这个端点”时使用。

Tailwind CSS v4 原则：CSS 优先配置、容器查询、现代模式与设计令牌架构。

后端架构模式、API 设计、数据库优化，以及 Node.js、Express 与 Next.js API 路由的服务端最佳实践。

面向 React、Next.js 的前端开发模式，涵盖状态管理、性能优化与 UI 最佳实践。

Docker 容器化专家，精通多阶段构建、镜像优化、容器安全、Docker Compose 编排与生产部署模式。对 Dockerfile 优化、容器问题、镜像体积、安全加固、网络与编排难题主动使用。

落地安全的 API 设计模式，涵盖认证、授权、输入校验、限流，以及对常见 API 漏洞的防护。

API 设计原则与决策方法：REST、GraphQL 与 tRPC 的选型，以及响应格式、版本管理与分页。

用于撰写人类会阅读的散文——文档、提交信息、错误提示、解释说明、报告或 UI 文案。套用 Strunk 的经典规则，让文字更清晰、更有力、更专业。

精通 TypeScript、Node.js、Next.js App Router、React、Shadcn UI、Radix UI 与 Tailwind。

面向 Node.js、Express 和 Next.js API 路由的后端架构模式、API 设计、数据库优化与服务端最佳实践。

将 Python 类、继承及面向对象模式翻译为 Scala 的指南。适用于转换包含类、dataclass、抽象类、继承、属性、静态方法、类方法或设计模式的 Python 代码。

全面的 Docker 容器化工作流，涵盖多阶段构建、docker-compose 编排、镜像优化、调试与生产最佳实践。在容器化应用、搭建开发环境或用 Docker 部署时使用。

全面的 Docker 容器化工作流，涵盖多阶段构建、docker-compose 编排、镜像优化、调试与生产最佳实践。在容器化应用、搭建开发环境或用 Docker 部署时使用。

审查 Dockerfile 的最佳实践、安全问题与镜像体积优化，包括多阶段构建与层缓存。在处理 Docker、容器或部署时使用。

在审查 schema 设计、数据库查询、ORM 使用或迁移时自动调用。强制规范化、索引意识、查询优化与迁移安全。

CSS 架构与样式专家，深入掌握现代 CSS 特性、响应式设计、CSS-in-JS 优化、性能、可访问性与设计系统。主动用于 CSS 布局问题、样式架构、响应式设计问题、CSS-in-JS 性能、主题实现、跨浏览器兼容与设计系统开发。若有更合适的专家，将建议切换并停止。

资深后端架构师，精通可扩展 API 设计、微服务架构与分布式系统。掌握 REST/GraphQL/gRPC API、事件驱动架构、服务网格模式和现代后端框架。负责服务边界定义、服务间通信、韧性模式与可观测性。在创建新的后端服务或 API 时主动使用。

资深 Kubernetes 架构师，精通云原生基础设施、高级 GitOps 工作流（ArgoCD/Flux）与企业级容器编排。掌握 EKS/AKS/GKE、服务网格（Istio/Linkerd）、渐进式交付、多租户与平台工程。覆盖安全、可观测性、成本优化与开发者体验。在 K8s 架构、GitOps 落地或云原生平台设计时主动使用。

资深数据库架构师，专长于从零设计数据层、技术选型、schema 建模和可扩展数据库架构。精通 SQL/NoSQL/时序数据库选型、规范化策略、迁移规划与性能优先设计。同时支持全新架构设计和既有系统的再架构。在数据库架构、技术选型或数据建模决策时主动使用。

用 pytest 编写并评估有效的 Python 测试。在写测试、审阅测试代码、调试测试失败或提升测试覆盖率时使用，涵盖测试设计、fixture、参数化、mock 与异步测试。

构建响应式、移动优先的 Web 应用。在实现响应式布局、触摸交互、移动端导航或针对各类屏幕尺寸优化时使用。触发词：响应式设计、移动优先、断点、触摸事件、视口。

按 Sentry 工程实践执行代码审查。在审查拉取请求、检查代码改动或就代码质量给出反馈时使用，覆盖安全、性能、测试与设计评审。

世界级的数据科学技能，覆盖统计建模、实验设计、因果推断与高级分析。精通 Python（NumPy、Pandas、Scikit-learn）、R、SQL、统计方法、A/B 测试、时间序列与商业智能，包含实验设计、特征工程、模型评估与业务方沟通。在设计实验、构建预测模型、做因果分析或推动数据驱动决策时使用。

面向 ReactJS、NextJS、TypeScript、Tailwind CSS 的全面前端开发技能，包含组件脚手架、性能优化、包体积分析与 UI 最佳实践。在开发前端特性、优化性能、实现 UI/UX 设计、管理状态或审查前端代码时使用。

覆盖 ReactJS、NextJS、NodeJS、Express、React Native、Swift、Kotlin、Flutter、Postgres、GraphQL、Go、Python 的全面软件架构技能，用于设计可扩展、可维护的系统。包含架构图生成、系统设计模式、技术选型决策框架与依赖分析。在设计架构、做技术决策、绘制架构图、评估权衡或定义集成模式时使用。

在为 Web UI 编写 CSS/样式/布局时使用；输出可直接投产、无障碍且易维护的 CSS。

在为 Web UI 编写 CSS/样式/布局时使用；输出可直接投产、无障碍且易维护的 CSS。

安全威胁建模

基于仓库事实的威胁建模：枚举信任边界、资产、攻击者能力、滥用路径与缓解措施，并产出一份简洁的 Markdown 威胁模型。仅在用户明确要求对代码库或路径做威胁建模、枚举威胁与滥用路径或开展 AppSec 威胁建模时触发；一般架构梳理、代码审查及非安全设计工作不要触发。

playwright

当任务需要从终端驱动真实浏览器（导航、填表、快照、截图、数据抽取、UI 流程调试）时使用，经 `playwright-cli` 或内置封装脚本执行。

playwright-interactive

通过 `js_repl` 维持持久浏览器与 Electron 会话，实现快速迭代式 UI 调试。

chatgpt-apps

构建、搭建脚手架、重构并排障结合了 MCP 服务器与 widget UI 的 ChatGPT Apps SDK 应用。当 Codex 需要设计工具、注册 UI 资源、接通 MCP Apps 桥接或 ChatGPT 兼容 API、应用 Apps SDK 元数据/CSP/域名设置，或产出符合官方文档的项目脚手架时使用。优先采用文档先行工作流：先生成代码前调用 openai-docs 技能或 OpenAI 开发者文档 MCP 工具。

任何创造性工作之前必须先使用——创建功能、构建组件、添加能力或修改行为。在实现之前探索用户意图、需求与设计。

React View Transition 动画

使用 React 的 View Transition API（`<ViewTransition>` 组件、`addTransitionType` 以及 CSS 视图过渡伪元素）实现顺滑、接近原生体验动画的指南。只要用户想添加页面过渡、动画化路由切换、做共享元素动画、组件进出场动画、列表重排动画、前进/后退方向性导航动画，或在 Next.js 中集成视图过渡，就使用此技能。用户提到 view transitions、`startViewTransition`、`ViewTransition`、transition types，或询问如何不借助第三方动画库在 React 中做 UI 状态间动画时也应使用。