关于 material-ui-styling
帮助开发者选择和使用 Material UI 样式方案的 Agent 技能，涵盖从局部 `sx` 到全局 CSS 的范围选择，并说明组件插槽、状态及 `sx` 与 `styled()` 的区别。
主要功能
- 01样式层级选择
- 02局部 `sx` 样式
- 03可复用的 `styled()` 封装
- 04主题级组件覆盖
- 05全局样式与基线
- 06`sx` 与 `styled()` 用法指引
适用场景
- 01为样式修改选择合适方案
- 02覆盖组件插槽或状态
- 03创建可复用的样式封装
- 04避免 `sx` 与 `styled()` 的常见问题
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/material-ui-styling确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
README.mdreference.mdmetadata.jsonAGENTS.md详细介绍
Material UI 样式
用于选择 Material UI 正确样式层级的 Agent 技能（优先选择作用范围最小的层级）。SKILL.md 是入口和索引；AGENTS.md 是完整指南。
适用场景
- 为某项更改选择
sx、styled()、主题components或全局 CSS - 安全地覆盖组件插槽或状态
- 比较
sx与styled()的语义（间距、主题快捷方式）
AGENTS.md 中的章节（按优先级）
| 顺序 | 主题 | 范围 |
|---|---|---|
| 1 | 快速决策 | 选择 sx → styled → 主题 → 全局 |
| 2 | sx 属性 | 单次使用 / 局部 |
| 3 | styled() | 可复用包装器 |
| 4 | createTheme({ components }) | 所有实例 |
| 5 | GlobalStyles / CssBaseline | HTML 基础样式 / 全局样式 |
| 6 | sx 与 styled() 对照表 | 防止容易踩坑的错误 |
完整指南
阅读 AGENTS.md 以查看完整说明、示例和文档链接。
补充表格：reference.md。
评论
支持 Markdown