Mui Helper

MUI Helper

什么时候使用这个 Skill

当以下场景时，自动触发此 Skill：

1. 创建或修改使用 Material-UI 的 UI 组件
2. 解决 MUI 组件实现问题
3. 查询 MUI 组件属性和 API
4. 实现 MUI 布局和主题定制
5. 在 MUI 版本间迁移或自定义组件行为

使用前必须查阅文档

重要提醒

在使用任何 MUI 组件或功能前，必须先查阅官方文档，找到对应组件或主题的具体 URL，仔细阅读官方文档后才能开始开发。

为什么必须查阅文档

1. 每个 MUI 组件都有独特的 API 和属性
2. 官方文档包含正确的使用示例和最佳实践
3. 避免常见的错误用法和性能问题
4. 确保代码符合 MUI 的设计规范

查阅文档的步骤

第一步：访问文档索引

访问 MUI 官方文档索引：https://mui.com/material-ui/llms.txt

该文件包含所有组件和功能的目录，按以下分类组织：

• Components：所有组件列表
• Customization：主题定制相关
• Guides：使用指南
• Integrations：框架集成
• Migration：版本迁移

第二步：找到具体的 URL

在文档索引中找到你需要的组件或功能，例如：

• React Button component → https://mui.com/material-ui/react-button.md
• Dark mode → https://mui.com/material-ui/customization/dark-mode.md
• Next.js integration → https://mui.com/material-ui/integrations/nextjs.md

第三步：获取具体 URL 并阅读

使用 webfetch 工具获取文档内容，仔细阅读：

• 组件的 Props 和 API
• 示例代码
• 注意事项和限制
• 常见问题

第四步：基于文档开发

确保完全理解文档内容后，再进行开发。

查阅文档示例

场景 1：使用 Button 组件

1. 访问文档索引：https://mui.com/material-ui/llms.txt
2. 在 Components 部分找到 React Button component
3. 获取 URL：https://mui.com/material-ui/react-button.md
4. 使用 webfetch 获取该 URL 的文档内容
5. 阅读 Props 说明（variant, color, size, disabled 等）
6. 查看示例代码
7. 根据文档正确使用组件

场景 2：自定义主题

1. 访问文档索引：https://mui.com/material-ui/llms.txt
2. 在 Customization 部分找到 Theming
3. 获取 URL：https://mui.com/material-ui/customization/theming.md
4. 使用 webfetch 获取该 URL 的文档内容
5. 阅读 createTheme 的配置选项
6. 了解如何定义 palette, typography 等
7. 根据文档创建主题

场景 3：解决组件问题

1. 访问文档索引：https://mui.com/material-ui/llms.txt
2. 找到相关组件文档
3. 使用 webfetch 获取文档内容
4. 检查常见问题部分
5. 查看是否有 API 变更或废弃警告
6. 参考官方建议的解决方案

外部资源

• 官方文档
• 文档索引
• 组件 API 搜索
• 示例项目