Vercel React 最佳实践
来自 Vercel 工程团队的 React 与 Next.js 性能优化准则。编写、评审或重构 React/Next.js 代码时应使用,以确保采用最优性能模式。涉及 React 组件、Next.js 页面、数据获取、包体积优化或性能提升的任务时触发。
使用场景/Cursor 开发必备
面向 Cursor 用户的入门组合:文件、GitHub、文档、浏览器。快速搭建 AI 编程工作流。
共匹配 6,654 个资源 · 第 90 / 139 页
Cursor 对 MCP 的支持是原生且开箱即用的:在 Settings → MCP 或项目根的 .cursor/mcp.json 中粘贴一段 JSON 即可接入任意 MCP Server。搭配 AgentHub 的一键配置生成器,从发现到接入通常不超过一分钟。
推荐的入门组合覆盖四类高频需求:Filesystem(读写项目文件)、GitHub(PR / Issue / diff)、Context7(最新框架文档,减少幻觉)、Playwright(浏览器验证与 E2E)。之后再按业务补充数据库、抓取或国内服务类 MCP。
本页列出的每个资源都附带 Cursor 专用配置片段:在 AgentHub 打开资源详情页 → 选择 Cursor Tab → 复制 JSON 粘贴即可,安装命令与鉴权环境变量一并给出。
来自 Vercel 工程团队的 React 与 Next.js 性能优化准则。编写、评审或重构 React/Next.js 代码时应使用,以确保采用最优性能模式。涉及 React 组件、Next.js 页面、数据获取、包体积优化或性能提升的任务时触发。
Docker 与容器最佳实践,包括多阶段构建、安全与优化。创建 Dockerfile 时使用。
优化 SQL 查询、设计数据库 schema 并排查性能问题。当用户询问查询为何变慢、需要帮助编写复杂 join 或聚合、提到数据库性能问题,或想设计/迁移 schema 时使用。用于复杂查询、窗口函数、CTE、索引策略、执行计划分析、覆盖索引创建、递归查询、解读 EXPLAIN/ANALYZE、前后基准对比,或在数据库方言(PostgreSQL、MySQL、SQL Server、Oracle)之间迁移查询。
在构建、调试或扩展用于连接 AI 系统与外部工具、数据源的 MCP 服务器或客户端时使用。用于实现 tool handler、配置 resource provider、搭建 stdio/HTTP/SSE 传输层、用 Zod 或 Pydantic 校验 schema、调试协议兼容问题,或用 TypeScript/Python SDK 脚手架完整的 MCP 服务器/客户端项目。
优化数据库查询并提升 PostgreSQL 与 MySQL 系统的性能。在排查慢查询、分析执行计划或优化数据库性能时使用。用于索引设计、查询重写、配置调优、分区策略与锁争用解决。
识别安全漏洞,生成带严重性评级的结构化审计报告,并给出可执行的修复建议。在开展安全审计、漏洞代码审查或分析基础设施安全时使用。在 SAST 扫描、渗透测试、DevSecOps 实践、云安全审查、依赖审计、密钥扫描或合规检查时调用。产出漏洞报告、按优先级排序的建议与合规清单。
设计 REST 或 GraphQL API、编写 OpenAPI 规范或规划 API 架构时使用。用于资源建模、版本策略、分页模式与错误处理标准。
用于需要类型安全、异步编程或健壮错误处理的 Python 3.11+ 应用。生成带类型标注的 Python 代码,以 strict 模式配置 mypy,编写带 fixture 与 mock 的 pytest 测试套件,并用 black 与 ruff 校验代码。在涉及类型提示、async/await 模式、dataclasses、依赖注入、日志配置与结构化错误处理时调用。
实现高级 TypeScript 类型系统、创建自定义类型守卫、工具类型与品牌类型,并配置 tRPC 实现端到端类型安全。在构建需要高级泛型、条件或映射类型、可辨识联合、monorepo 配置,或用 tRPC 做全栈类型安全的 TypeScript 应用时使用。
使用 App Router、server components 或 server actions 构建 Next.js 14+ 应用时使用。用于配置 route handler、实现 middleware、搭建 API 路由、添加流式 SSR、为 SEO 编写 generateMetadata、脚手架 loading.tsx/error.tsx 边界,或部署到 Vercel。触发词:Next.js、Next.js 14、App Router、RSC、use server、Server Components、Server Actions、React Server Components、generateMetadata、loading.tsx、Next.js 部署、Vercel、Next.js 性能。
在 .jsx 或 .tsx 文件、Next.js App Router 项目或 create-react-app 环境中构建 React 18+ 应用时使用。创建组件、实现自定义 hook、调试渲染问题、把类组件迁移为函数组件并实现状态管理。在涉及 Server Components、Suspense 边界、useActionState 表单、性能优化或 React 19 特性时调用。
构建、优化并调试基于 React Native 与 Expo 的跨平台移动应用。实现导航层级(tab、stack、drawer)、配置原生模块、用 memo 与 useCallback 优化 FlatList 渲染,并处理 iOS 与 Android 的平台专属代码。在构建 React Native 或 Expo 应用、搭建导航、集成原生模块、提升滚动性能、处理 SafeArea 或键盘输入、配置 Expo SDK 项目时使用。
构建和运维 Python Azure IoT Edge 模块,涵盖可靠消息传递、部署清单、可观测性与生产就绪检查。
对分支改动做彻底的代码审查。支持自动或交互式修复,以及基于指令、无立场或两者结合的审查视角。使用时机:审查我的代码、审查这个分支、做一次代码审查、审查分支改动、检查我的改动。输入参数:[--base <branch>] [--mode automatic|interactive] [--lens instructions|agnostic|both]。
在部署或管理 Kubernetes 工作负载时使用。用于创建 deployment 清单、配置 pod 安全策略、设置 service account、定义网络隔离规则、调试 pod 崩溃、分析资源限制、检查容器日志或合理调整工作负载规模。适用于 Helm chart、RBAC 策略、NetworkPolicy、存储配置、性能优化、GitOps 流水线与多集群管理。
Docker 容器化专家,深入掌握多阶段构建、镜像优化、容器安全、Docker Compose 编排与生产部署模式。在 Dockerfile 优化、容器问题、镜像体积等场景下主动使用。
指导用户基于 Cursor TypeScript SDK(`@cursor/sdk`)构建应用、脚本、CI 流水线或自动化。只要用户提到集成、安装或面向 Cursor SDK 编写代码;说出 `Agent.create`、`Agent.prompt`、`Agent.resume`、`agent.send`、`run.stream`、`CursorAgentError` 或 `@cursor/sdk`;询问如何以编程方式从脚本、CI/CD 流水线、GitHub Action、后端服务或任何非 Cursor IDE 本身的代码中运行 Cursor 代理;以及如何选择本地与云端运行时、为 SDK 代理配置 MCP 服务器、处理 SDK 代理的流式输出、取消或错误时,都应使用本技能。用户把 Cursor 接入自动化、编写运行 Cursor 的机器人、或将 REST `/v1/agents` 调用迁移到 SDK 时也要触发,即使未明确提及包名。应主动触发而非凭记忆作答;SDK 接口持续演进,本技能及其参考文档是其权威来源。
创造具辨识度、生产级、高设计质量的前端界面。当用户要求构建 Web 组件、页面或应用时使用。生成富有创意、精致的代码,避免千篇一律的 AI 审美。
审阅或修复那些用用户可控 kwargs 调用 setattr() 来配置 C++ 扩展对象(如 ONNX Runtime 的 SessionOptions、RunOptions)的 Python 代码。应用白名单模式,防止经由反射属性访问导致的任意文件写入等攻击。
vdevelopment-version
面向 iOS 与 Android 应用的移动优先设计思维与决策。涵盖触摸交互、性能模式与平台惯例。教授原则而非固定数值。在构建 React Native、Flutter 或原生移动应用时使用。
精英级移动应用图像生成技能,创建高端、应用原生的界面概念与流程。面向 iOS、Android 与跨平台移动产品。强调清晰层级、舒适可读的文字、多屏强一致性、克制的配色、非套路化的创意方向、质感表面、图像主导构图、有品位的手绘图标与干净的手机边框样机。默认将界面置于带可见边框的精致 iPhone 或类似手机样机中展示,焦点仍留在应用内容本身。此技能仅生成图像,不写代码。
高级品牌套件图像生成技能,用于制作高端品牌指南板、Logo 系统、识别度演示与视觉世界呈现。面向极简、电影感、编辑风格、暗色科技、奢华、文化、安全、游戏、开发者工具与消费级应用的品牌系统训练。针对有意图的 Logo 概念化、精致构图、克制的排版、强符号语义、高端样机、艺术指导图像与灵活网格布局优化。
将 Kotlin 代码重构得更清晰、更符合惯用法,且不破坏 Spring 行为、序列化、持久化或公共契约。适用于 Java 风格的 Kotlin 需要清理、领域建模需要更具表现力或需要减少样板代码的场景,但重构必须对代理、Jackson、JPA、配置绑定及现有测试保持安全。
使用 GSAP、CSS 变换、Remotion 帧控制以及兼容 HyperFrames 的浏览器预览来驱动 SVG 角色骨架动画。
为数据驱动动画设计可复用的 2D 角色姿态库、动作循环与表情状态。
已废弃:本 skill 已被 mcp-app-builder 取代。请检查 skills 目录中是否有 mcp-app-builder,没有则安装:npx skills install mcp-use/mcp-use --skill mcp-app-builder,并改用 mcp-app-builder。原文用途:使用 mcp-use 与 OpenAI Apps SDK 构建带交互式 widget 的 ChatGPT 应用,适用于创建 ChatGPT 应用、构建带 widget 的 MCP 服务器、定义 React widget、使用 Apps SDK,或用户提及 ChatGPT widget、mcp-use widget、Apps SDK 开发时。
已废弃:本 skill 已被 mcp-app-builder 取代。请检查 skills 目录中是否有 mcp-app-builder,没有则安装:npx skills install mcp-use/mcp-use --skill mcp-app-builder,并改用 mcp-app-builder。原文用途:使用 mcp-use 框架构建 Model Context Protocol(MCP)服务器,适用于创建 MCP 服务器、定义 tools/resources/prompts、使用 mcp-use、初始化 MCP 项目,或用户提及 MCP 开发、tools、resources、prompts 时。
所有 MCP 服务器工作的必备指南——mcp-use 框架的最佳实践与模式。任何 MCP 服务器工作前先读本 skill,包括:新建 MCP 服务器、修改现有服务器(增改 tools、resources、prompts、widgets)、调试服务器问题、审查代码的质量/安全/性能、回答 MCP 开发或 mcp-use 模式问题,以及对 server.tool()、server.resource()、server.prompt() 和 widgets 做任何修改。内含关键的架构决策、安全模式和常见陷阱。实现任何 MCP 功能前务必先查阅对应参考文件。
对 Warp 基础设施的安全漏洞进行分诊与修复。检查 Dependabot 告警(GitHub)、GCP Artifact Registry 容器扫描,以及公共镜像的 Docker Scout 扫描。当用户要求检查漏洞、分诊 CVE、修复依赖问题、更新基础镜像或处理安全告警时使用。
创建、更新并同步 Ona 自动化。确保 .ona/automations/ 下的 YAML 文件与线上 Ona 自动化注册表保持一致。在新增自动化、修改触发器或提示词、删除自动化,或审计 YAML 与线上状态的漂移时使用。触发词:"create automation"、"update automation"、"delete automation"、"sync automations"、"register automation"、"automation drift"、"add a new automation"、"change automation triggers"。
基于 Chakra UI v3 审查、转换并改进 UI 代码。当用户想审查 Chakra UI 代码问题、把纯 HTML/CSS、Tailwind、CSS Modules 或 styled-components 转换为 Chakra UI、整理杂乱的 Chakra 组件、修复布局结构或 token 用法,或说出“这对吗”“这哪有问题”“评审我的组件”“重构一下”“清理”“转换”“chakra-ify this”等话语时使用本技能——即便没出现 review 或 refactor 字样。任何检查、改进或转换 Chakra UI 代码的请求都应触发,无论措辞多随意。
把 Chakra UI 项目从 v2 迁移到 v3,涵盖包变更、codemod、Provider 配置、颜色模式、属性重命名、复合组件、主题、recipes 与 Next.js 更新。只要用户在升级 Chakra UI 版本、遇到升级后的破坏性变更、转换 v2 旧模式(ColorModeScript、useColorModeValue、styleConfig、extendTheme、isDisabled、colorScheme、@chakra-ui/icons、framer-motion 依赖)、修复复合组件写法或询问 Chakra UI v2 与 v3 的差异,就应使用本技能——即使没有明说“迁移”或“升级”。
通过 LLDB Python API 进行有状态的 LLDB 调试。
通过 LLDB Python API 进行有状态的 LLDB 调试。
指导如何安全使用外部 MCP 工具。
Mobile Text Alerts 集成。管理账户。当用户需要与 Mobile Text Alerts 数据交互时使用。
Backendless 集成。管理数据与记录,自动化工作流程。当用户需要与 Backendless 数据交互时使用。
Docker Hub 集成。管理数据与记录,自动化工作流程。当用户需要与 Docker Hub 数据交互时使用。
Cursor 集成。管理数据与记录,自动化工作流程。当用户需要与 Cursor 数据交互时使用。
用于本地开发的 Docker 与 Docker Compose 模式,涵盖容器安全、网络、卷策略与多服务编排。
用于本地开发的Docker和Docker Compose模式,包括容器安全、网络、卷策略和多服务编排。
Next.js 16+ 和 Turbopack — 增量打包、文件系统缓存、开发速度,以及何时使用 Turbopack 与 webpack。
Next.js 16+ 与 Turbopack:增量打包、文件系统缓存、开发速度提升,以及何时用 Turbopack 替代 webpack。
分诊本仓库的 GitHub Code Scanning 告警(CodeQL security-extended 套件)——列出开放告警,按误报/不修复/仅测试使用驳回,经 GitHub REST + GraphQL 查询。当用户要求「review GitHub security alerts」「check CodeQL findings」「triage code scanning」,或提及 Code Scanning、CodeQL、security-extended、github.com/$repo/security/code-scanning 时使用。
Kubernetes 成本分摊、基于命名空间与标签的费用回溯,以及集群级优化专家。熟悉 OpenCost、Kubecost、Karpenter、Cluster Autoscaler 与 Vertical Pod Autoscaler。
同时调校容器资源 request/limit 与节点级弹性伸缩(Karpenter、Cluster Autoscaler),在成本、调度时延与 Pod 稳定性之间取得平衡。把 VPA 驱动的资源右尺寸化与整合(consolidation)策略统一到一套方法中。
使用 gitcrawl 搜索重复的 OpenClaw PR/issue,在 prtags 中归组相关工作,并把重复状态同步到 GitHub。
Angular 文档(adev)的全面写作指南,涵盖 Google 技术写作规范、Angular 专用的 markdown 扩展、代码块与组件。计划创建、编辑或审查 `adev/` 或 `adev/src/content` 中的文档文件时必须使用此技能。
两者皆可:项目级 .cursor/mcp.json 随仓库共享给团队,全局 ~/.cursor/mcp.json 对本机所有项目生效。含密钥的配置建议放项目级并加入 .gitignore,或用环境变量引用。
每个启用的 MCP 都会向上下文注入工具定义,建议按项目启用、用完禁用不常用的服务器,把上下文留给真正需要的工具。
JSON 结构相同,差异主要在命令路径与环境变量写法(如 npx 与绝对路径、引号转义)。AgentHub 详情页会区分 stdio 与远程托管(streamable-http/SSE)两类接入方式。