# mui

This skill guides Claude Code through Material UI v7 components, theme-based styling, responsive layouts, and form patterns in React projects.

- skill · `type=skill` · Claude Code · 110 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/mui
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/mui

## What it 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.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/mui
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill mui -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/mui/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/mui/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/mui/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/mui/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates mui
```

2. **Manually: put the files in place**
- File: `.github/skills/mui/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/mui
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/mui/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/mui

## When to use it
- 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
- Build a profile page with `Box`, `Paper`, and `Typography`, using `sx` for component styling.
- Make the card layout responsive with `Grid` and MUI breakpoints.
- Update this `Modal` component for MUI v7 and replace `onBackdropClick` with `onClose`.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 804 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md