mcpField
M
material-ui-nextjs

material-ui-nextjs

github.com/mui开发99.3k738 次安装今天更新
代码仓库

关于 material-ui-nextjs

面向 Next.js 与 Material UI 集成的 Agent 技能，涵盖 App Router 和 Pages Router 设置、渲染、样式、字体、链接及 URL 驱动视图，适合新建应用或排查集成问题。

主要功能

  1. 01App Router 与 Pages Router 设置
  2. 02SSR 和流式渲染缓存配置
  3. 03字体与主题设置
  4. 04CSS 层集成
  5. 05Next.js Link 用法
  6. 06URL 状态与 Suspense 指引

适用场景

  1. 01启动使用 Material UI 的 Next.js 应用
  2. 02修复样式位置或顺序错误
  3. 03将 next/font 与 Material UI 主题结合
  4. 04使用 useSearchParams 构建 URL 驱动视图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mui/material-ui --skill material-ui-nextjs

安装后在 Claude Code 中输入/material-ui-nextjs确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

README.md
AGENTS.md
metadata.json
reference.md

详细介绍

Material UI 与 Next.js

用于 Next.js + Material UI 连接配置的 Agent 技能（SSR/流式传输、缓存提供程序、字体、层、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 RouterAppRouterCacheProvider、@emotion/cache、options、useSearchParams + <Suspense>
Pages Router_document、_app、DocumentHeadTags、AppCacheProvider
字体'use client' 主题、next/font、html 上的 CSS 变量
CSS 变量cssVariables、SSR 闪烁文档
CSS 层enableCssLayer、Tailwind / 其他 CSS
Link客户端封装、路由指南、示例仓库

完整指南

阅读 AGENTS.md 获取完整步骤和文档链接。

reference.md 列出了导入路径和提供程序结构。

评论

支持 Markdown