关于 material-ui-theming
用于创建 Material UI 主题和设计令牌的 Agent 技能，涵盖配色方案与 CSS 主题变量，适合配置主题提供程序、调色板行为、SSR 配色处理或自定义主题键。
主要功能
- 01主题创建与提供程序设置
- 02设计令牌配置
- 03调色板与配色方案
- 04CSS 主题变量
- 05主题组合
- 06使用 TypeScript 扩展主题键
适用场景
- 01设置 Material UI 主题
- 02配置浅色和深色配色方案
- 03使用 CSS 主题变量
- 04通过 TypeScript 添加自定义主题令牌
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/material-ui-theming确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
README.mdmetadata.jsonreference.mdAGENTS.md详细介绍
Material UI 主题配置与设计令牌
用于创建主题、设计令牌、浅色/深色模式和 CSS 主题变量的 Agent 技能。入口文件为 SKILL.md；完整指南见 AGENTS.md。
适用场景
createTheme、ThemeProvider、useTheme、CssBaselinecolorSchemes、useColorScheme、存储 / SSR 行为cssVariables: true、theme.vars、applyStyles('dark', …)- 自定义主题键和 TypeScript 模块扩充
AGENTS.md 中的章节
| 区域 | 主题 |
|---|---|
| 核心设置 | 导入、提供程序放置位置、useTheme |
| 令牌映射 | palette、typography、spacing、shape、breakpoints、components、… |
| 调色板 | main / 派生颜色、@mui/material/colors、mode |
| 配色方案 | 与仅使用 palette 的区别、hydration、ThemeProvider 属性 |
| CSS 变量 | cssVariables、保留的 vars、避免闪烁 |
| 组合 | 多步 createTheme、deepmerge、嵌套提供程序 |
| 自定义令牌 | 扩充 Theme / ThemeOptions |
完整指南
阅读 AGENTS.md 查看完整说明和链接。
TypeScript 代码片段：reference.md。
评论
支持 Markdown