工具集

Next.js 官方插件，随 vercel/next.js 仓库发布：引导启用和优化 Cache Components 与 Partial Prefetching，并结合 Next.js MCP 与 agent-browser 在运行中的 dev server 上验证改动。

改完代码后让 agent 结合 /_next/mcp 与 agent-browser 在运行中的 Next.js 应用里核对路由、报错与页面表现，确认改动真正生效。Next.js 官方维护，需要 Next.js 16.3+（Turbopack）与 agent-browser。

让 agent 在 Cache Components 下把 Next.js 路由优化成即时导航：先用 @next/playwright 的 instant() 写一个失败的端到端测试，再把 Suspense 边界下推到它保护的数据处、扩大静态外壳，直到测试通过并保留为回归防护；首次加载与客户端导航都覆盖。需要 Next.js 16.3+ 并开启 cacheComponents。

Vercel 官方成本与性能优化技能：先采集线上指标、用量与项目配置，只排查指标指向的路由和文件，输出带文档依据的优化建议排序；支持 Next.js、SvelteKit 与 Nuxt。需要 Vercel CLI v53+ 登录并关联项目。

Vercel 工程团队整理的 React 与 Next.js 性能规范，70 条规则按影响排序，涵盖消除请求瀑布、包体积、服务端性能与重复渲染，供编写、评审与重构时对照。Vercel 官方维护。

用轻量 WebGL 库 cobe 在首页或关于页加入可旋转的地球，讲解画布按设备像素比设置尺寸、位置标记、旋转动画、窗口缩放后重建与销毁，可在 React/Next.js 中集成。

Vercel 官方：自动发现本地运行的 Next.js 16+ 开发服务器，把其内置 MCP 端点提供的运行时报错、路由与日志交给 agent，并引导 agent 查阅与所装版本一致的文档。

先通过提问了解设计范围、痛点、参考产品、品牌调性与约束，再从项目现有的 Tailwind 配置、CSS 变量或组件库主题中提取视觉语言，在临时路由里生成 5 个不同的界面方案并附带交互式反馈浮层，按反馈迭代后输出实现计划，结束或取消时清理所有临时文件。面向 Next.js、Vite 等 React 项目。

Vercel 官方插件：内置 Vercel 生态知识图谱、数十个技能、部署与性能等专家子代理，以及部署、环境变量、项目状态命令，覆盖 Next.js、AI SDK、存储与 CI/CD。需 Node.js 18+ 与 Bun，默认开启遥测（可关闭）。

在 Next.js App Router 项目中，agent 只改动单个 CSS 值或 Tailwind 类时，页面上会出现浮动调节条，用户用方向键微调数值、切换相关属性，回车复制修改提示、Esc 还原。需在 app/layout.tsx 引入 budge.design 托管的运行时脚本。

把 Paper 设计稿（经 Paper MCP、Viewfinder 或导出的 JSX）实现为 React/Next.js 代码前先梳理层级、识别可复用组件；每个图标单独成组件，任意值收进 globals.css 令牌，优先复用 shadcn 组件，移植真实字体，图表按数据建模。