tRPC Next.js Pages Router 集成
在 Next.js Pages Router 中用 createNextApiHandler、createTRPCNext 与 withTRPC HOC 搭建 tRPC;通过 ssr 选项与 ssrPrepass 实现 SSR,通过 createServerSideHelpers 配合 getStaticProps 实现 SSG,并为 getServerSideProps 预取提供服务端 helpers。
使用场景/Cursor 开发必备
面向 Cursor 用户的入门组合:文件、GitHub、文档、浏览器。快速搭建 AI 编程工作流。
共匹配 6,719 个资源 · 第 106 / 140 页
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 粘贴即可,安装命令与鉴权环境变量一并给出。
在 Next.js Pages Router 中用 createNextApiHandler、createTRPCNext 与 withTRPC HOC 搭建 tRPC;通过 ssr 选项与 ssrPrepass 实现 SSR,通过 createServerSideHelpers 配合 getStaticProps 实现 SSG,并为 getServerSideProps 预取提供服务端 helpers。
Next.js App Router 的端到端 tRPC 配置。涵盖 route handler 与 fetchRequestHandler(GET + POST 导出)、TRPCProvider 与 QueryClientProvider、用于 RSC 预取的 createTRPCOptionsProxy、用于水合的 HydrateClient/HydrationBoundary、用于 Suspense 的 useSuspenseQuery,以及服务端调用器。
审查代码的安全漏洞、性能问题与最佳实践。在审查代码、做安全审计、检查代码质量、审查 pull request 时使用。
Python 开发原则与决策方法:框架选择、异步模式、类型标注、项目结构。教会思考,而非照抄。
在专用 playground 目录中运行和测试 Python 代码。当需要执行 Python 脚本、测试代码片段、研究 CPython 行为,或在不影响主代码库的情况下实验 Python 时使用。
基于 DOMShell MCP 服务器的浏览器自动化 CLI。将 Chrome 的无障碍树映射为虚拟文件系统,供 agent 原生导航。
创造具辨识度、生产级、高设计质量的前端界面。当用户要求构建 Web 组件、页面、artifacts、海报或应用时使用(示例包括网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或为任意 Web UI 做样式美化)。生成富有创意、精致的代码与 UI 设计,避免千篇一律的 AI 审美。
来自 Vercel 工程团队的 React 与 Next.js 性能优化指南。在编写、审查或重构 React/Next.js 代码时使用,以确保最佳性能模式。触发于涉及 React 组件、Next.js 页面、数据获取、包体积优化或性能改进的任务。
通过 mcporter CLI 发现并调用 MCP 服务器工具。当协调者通知你有新的 MCP 工具,或需要调用外部 API 时使用。包含为新 MCP 服务器生成技能文档的工作流。
通过 mcporter CLI 发现并调用 MCP 服务器工具。当协调者通知你有新的 MCP 工具,或需要调用外部 API 时使用。包含为新 MCP 服务器生成技能文档的工作流。
浏览器自动化。当你需要访问网页、打开网站、截图或执行任何浏览器自动化时,**必须先读本 SKILL.md**——其中包含必需的参数与操作规程。**未阅读就直接调用浏览器工具可能导致操作失败或意外行为。**
当你需要基于 POM、数据驱动测试或 BDD 等模式设计自动化测试方案时使用此技能;触发词包括自动化测试与 automation testing。
当你需要基于 POM、数据驱动测试或 BDD 等模式设计自动化测试方案时使用此技能;触发词包括 automation testing 与测试自动化策略。
使用 PyMuPDF 读取和编辑 PDF 文档的完整指南。
Automation Audit —— 专用于自动化审计的技能。
在代码审查期间使用此技能,主动在代码库中排查重复实现、重复造轮子,或未复用现有项目最佳实践与共享工具的情况。
以触发器与动作设计 Zapier/Make 自动化配方。在构建集成、串联工作流、配置触发器或制作模板时使用。
生成 flexbox、grid、动画、渐变与断点的 CSS。在搭建布局、制作动画、生成渐变时使用。
设计并实现自然且恰到好处的 Web 动画。当用户问到动画、运动、easing、时序、时长、spring、过渡或动画性能相关问题时主动使用。包括如何为特定 UI 元素做动画、该用哪种 easing、动画最佳实践,或动效的无障碍考量。触发词:easing、ease-out、ease-in、ease-in-out、cubic-bezier、bounce、spring 物理、keyframes、transform、opacity、fade、slide、scale、hover 效果、微交互、Framer Motion、React Spring、GSAP、CSS transitions、进出场动画、页面过渡、stagger、will-change、GPU 加速、prefers-reduced-motion、modal/dropdown/tooltip/popover/drawer 动画、手势动画、拖拽交互、按钮按压感、显得卡顿、变顺滑。
当验证CSS代码时,分析CSS语法,检查样式规范,优化CSS性能。验证响应式设计,检查可访问性,和最佳实践。
当验证Kubernetes配置时,分析YAML清单语法,检查资源定义规范,验证部署配置。验证集群资源,设计安全策略,和最佳实践。
当实施Kubernetes编排时,分析集群架构设计,优化容器编排性能,解决K8s相关问题。验证资源配置,设计服务部署策略,和最佳实践。
vdevelop
TypeScript 专属约定,包括 ts-expect-error 的用法、unknown 与 any 的取舍、const 断言,以及 type 与 interface 的选择偏好。在编写 TypeScript 代码时使用。
为编码代理可靠运行而设计或审查 CLI:非交互参数、带示例的分层 --help、stdin/管道、快速且可行动的错误信息、幂等性、dry-run 与可预期结构。在构建 CLI、添加命令、编写 --help,或用户提到代理、终端、自动化友好 CLI 时使用。
按 Metabase 追踪规范为 Clojure 代码添加 OpenTelemetry tracing span。在为后端代码埋点链路覆盖时使用。
使用 Jest、Vitest 与 Testing Library 实施全面测试策略,涵盖单元测试、集成测试与端到端测试,包括 mock、fixture 与测试驱动开发。在编写 JavaScript/TypeScript 测试、搭建测试基础设施或实践 TDD/BDD 工作流时使用。
在审查 Python 代码中常见的应避免反模式时使用本技能。可作为代码评审清单、实现定稿前的检查,或在排查可能源自已知不良实践的故障时使用。
基于 Playwright 的浏览器自动化模式,用于自主网页交互。
用 Neon Instagres 即时开通可用于生产的 Postgres 数据库。在配置数据库、用户提到 PostgreSQL/Postgres 或需要开发库时使用,兼容 Drizzle、Prisma 与原生 SQL。
管理 Docker 容器、镜像、卷、网络与 Compose 栈——生命周期操作、调试、清理与 Dockerfile 优化。
在创建新技能、编辑现有技能,或部署前验证技能是否有效时使用。
全面的 Flow Nexus 平台管理——认证、sandbox、应用部署、支付与挑战赛。
基于 Flow Nexus 平台的云端 AI swarm 部署与事件驱动工作流自动化。
使用 Flow Nexus 在分布式 E2B sandbox 中训练与部署神经网络。
Docker 容器化:把应用连同依赖打包为隔离、可移植的单元,确保开发、测试与生产环境的一致性。
vdevelop
WordPress 项目的 CSS 架构、最佳实践与设计模式。涵盖 ITCSS 方法论、可访问性、优先级(specificity)治理、命名规范以及现代 CSS 特性。
面向 AI agent 的浏览器自动化 CLI。当用户需要与网站交互时使用,包括页面导航、填写表单、点击按钮、截图、提取数据、测试 Web 应用或自动化任何浏览器任务。触发语包括「打开网站」「填写表单」「点击按钮」「截图」「抓取页面数据」「测试这个 Web 应用」「登录网站」「自动化浏览器操作」等需要程序化网页交互的任务。
运行完整的仓库兼容性流程:扫描器评分、启动路径、验证循环与文档可靠性。
构建并验证基于真实 PostgreSQL 的 Go 测试,以及用于追踪行为的轻量传输冒烟测试。
用于探测敌方主将的判断质量与决策状态。取材于钟会索粮试吴:提出一次物资请求,观察其是否采纳明智建议,据其反应评估骄纵程度与内部分裂,以判断进攻时机。
Gemini CLI 专用技能,提供高性能、快速失败的 GitHub Actions 工作流监控,并对 CI 失败进行本地自动化验证。自动发现运行记录——只需提供分支名。
面向 Claude Code 会话的正式评估框架,落实评估驱动开发(EDD)原则。
完整的测试策略,用于实践测试驱动开发并确保 Go 代码的高质量。
基于 pytest 的 Python 测试策略:TDD 方法、fixture、Mock、参数化与覆盖率要求。
编写现代 CSS:正确的层叠上下文、布局模式、响应式技术与性能优化。
面向 AI agent 的浏览器自动化 CLI。当用户需要与网站交互时使用,包括导航页面、填写表单、点击按钮、截图、提取数据、测试 Web 应用,或自动化任意浏览器任务。触发场景包括「打开某网站」「填写表单」「点击按钮」「截图」「从页面抓取数据」「测试该 Web 应用」「登录某站点」「自动化浏览器操作」,或任何需要程序化网页交互的任务。
在 `apps/mobile` 中完成移动功能改动或缺陷修复后进行自测。每当用户要求验证移动端改动、跑模拟器验收、对移动端 PR 做冒烟测试或提供修复的截图证明时使用。本技能负责判定 prod 与 local API 模式、按需启动本地 follow-server、构建 release 应用、仅用 Maestro 为免认证工作引导注册,随后转入截图驱动的视觉验证并返回截图证据。
TypeScript 严格模式实践与最佳做法。触发时机:在 .ts/.tsx 中实现或重构 TypeScript 时(类型、接口、泛型、const 映射、类型守卫、移除 any、收紧 unknown)。
两者皆可:项目级 .cursor/mcp.json 随仓库共享给团队,全局 ~/.cursor/mcp.json 对本机所有项目生效。含密钥的配置建议放项目级并加入 .gitignore,或用环境变量引用。
每个启用的 MCP 都会向上下文注入工具定义,建议按项目启用、用完禁用不常用的服务器,把上下文留给真正需要的工具。
JSON 结构相同,差异主要在命令路径与环境变量写法(如 npx 与绝对路径、引号转义)。AgentHub 详情页会区分 stdio 与远程托管(streamable-http/SSE)两类接入方式。