用途：在 Next.js App Router 与 TypeScript 的前端代码库中处理各类任务，包括新增页面、构建组件、修复 UI 缺陷、样式、表单与数据获取。
主要能力与架构约定：默认使用 Server Component；需要 useState、useEffect、onClick 或浏览器 API 时才加 'use client'，并保持客户端组件为小的叶子节点。数据获取用 Server Component 的 async fetch；内部变更用 Server Actions，配合 Zod 校验与 revalidatePath；公共 API、webhook、大上传、流式响应用 Route Handler。缓存采用显式 'use cache' 指令。TanStack Query 仅用于实时轮询或复杂乐观更新。
样式与设计：MUI sx prop，100 行以内内联，超过则拆 .styles.ts；Grid 使用 size={{ xs: 12, md: 6 }}。要求字体、配色、间距、动效有明确设计意图。
文件约定：app/layout.tsx、page.tsx、loading.tsx、error.tsx（'use client'）、not-found.tsx，以及 users/[id]/page.tsx、actions.ts、api/webhook/route.ts。
限制与规则：避免在组件树顶层使用大范围 'use client'；不要在客户端暴露密钥；Server Action 输入必须用 Zod 校验。性能（包体积、瀑布、缓存、重渲染）另参考 vercel-react-best-practices；项目特定约定查看 .claude/CLAUDE.md 或 .cursor/rules/*。Next.js 16+ 可配合 next-devtools 系列 MCP 工具做文档查询与运行时诊断。