Material UI and Next.js 是一个面向 Next.js + Material UI 接线的 Agent 技能,覆盖 SSR/流式渲染、缓存 Provider、字体、CSS 层、Link 以及 App Router 的 URL 状态。入口文件是 SKILL.md,完整指南见 AGENTS.md。
适用时机:
- 使用 @mui/material 新建 App Router 或 Pages Router 应用。
- 出现样式缺失、样式顺序错误,或样式被放在 body 而不是 head 中。
- 在 next/font 与 ThemeProvider / createTheme 之间做整合。
- 同时使用 Tailwind 或 CSS Modules 与 MUI,需要 enableCssLayer。
- Button 搭配 component={Link} 使用,或遇到 Next.js v16 客户端边界错误。
- 使用 useSearchParams,或在 URL 驱动的 MUI 视图与 Suspense 边界中工作。
AGENTS.md 的章节划分:
- App Router:AppRouterCacheProvider、@emotion/cache、options、useSearchParams + <Suspense>。
- Pages Router:_document、_app、DocumentHeadTags、AppCacheProvider。
- Fonts:'use client' 主题、next/font、html 上的 CSS 变量。
- CSS variables:cssVariables、SSR 闪烁相关文档。
- CSS layers:enableCssLayer、Tailwind 或其他 CSS。
- Link:客户端包装器、路由指南、示例仓库。
完整指南建议阅读 AGENTS.md 以获取完整步骤和文档链接。reference.md 列出了导入路径和 Provider 形态。