mui — Claude Code skill: MUI patterns and installation
This skill guides Claude Code through Material UI v7 components, theme-based styling, responsive layouts, and form patterns in React projects.
npx claude-code-templates@latest --skill development/muiWhat mui does
The skill provides coding patterns for Material UI v7 in React and TypeScript projects. It covers layout components such as Box, Paper, and Grid, along with Typography, buttons, and forms. The examples explain how to define component styles with sx, draw values from the active theme, and adjust layouts at different viewport widths.
For small components, the guidance keeps style definitions close to the component code. Larger components can move their styles into a separate file, such as UserProfile.styles.ts. The material also covers useTheme, the SxProps and Theme types, responsive typography, and form field validation. These patterns give Claude Code concrete conventions to follow when editing UI code.
MUI v7 changes several APIs inherited from v6. Modal code should use onClose instead of the removed onBackdropClick property, and component customization follows the slots and slotProps approach. The skill also covers enableCssLayer for projects using Tailwind v4, so existing styling setups may need adjustments when adopting these patterns.
What it helps with
- Style React components with
sx - Apply theme colors and spacing to UI elements
- Build responsive card grids with MUI breakpoints
- Move large component styles into a separate file
- Replace outdated Modal handlers when migrating to MUI v7
Example prompts for the agent
- Build a profile page with
Box,Paper, andTypography, usingsxfor component styling. - Make the card layout responsive with
Gridand MUI breakpoints. - Update this
Modalcomponent for MUI v7 and replaceonBackdropClickwithonClose.
How to install mui
1claude-code-templates
npx claude-code-templates@latest --skill development/mui2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill mui -a claude-code3Manually: put the files in place
~/.claude/skills/mui/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mui/
Manually: put the files in place
.agents/skills/mui/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/mui/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates mui2Manually: put the files in place
.github/skills/mui/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/muiManually: put the files in place
.devin/skills/mui/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about mui
How do I install mui in Claude Code?
From your project directory, run npx claude-code-templates@latest --skill development/mui. Alternatively, run npx skills add davila7/claude-code-templates --skill mui -a claude-code. The installed skill file path is ~/.claude/skills/mui/SKILL.md.
What does the mui skill do?
It gives Claude Code practical guidance for Material UI v7, including sx styling, theme usage, responsive layouts, component patterns, and form implementation.
What changed between MUI v6 and v7?
The onBackdropClick property was removed from Modal, so use onClose instead. Components use the standardized slots and slotProps approach, and deep imports should be replaced with imports supported by package exports.
