# Mui

Material-UI v7 component library patterns including sx prop styling, theme integration...

- Repository: https://github.com/softaworks/agent-toolkit (2611 stars)
- Category: Design
- License: MIT
- Last updated: 2026-03-05
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add softaworks/agent-toolkit --skill mui -g -a claude-code -y`
Codex: `npx skills add softaworks/agent-toolkit --skill mui -g -a codex -y`
Cursor: `npx skills add softaworks/agent-toolkit --skill mui -g -a cursor -y`
Gemini CLI: `npx skills add softaworks/agent-toolkit --skill mui -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add softaworks/agent-toolkit`

## Description

Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# MUI v7 Patterns

## Purpose

Material-UI v7 (released March 2025) patterns for component usage, styling with sx prop, theme integration, and responsive design.

**Note**: MUI v7 breaking changes from v6:
- Deep imports no longer work - use package exports field
- `onBackdropClick` removed from Modal - use `onClose` instead
- All components now use standardized `slots` and `slotProps` pattern
- CSS layers support via `enableCssLayer` config (works with Tailwind v4)

## When to Use This Skill

- Styling components with MUI sx prop
- Using MUI components (Box, Grid, Paper, Typography, etc.)
- Theme customization and usage
- Responsive design with MUI breakpoints
- MUI-specific utilities and hooks

---

## Quick Start

### Basic MUI Component

```typescript
import { Box, Typography, Button, Paper } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';

const styles: Record<string, SxProps<Theme>> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
  },
  header: {
    mb: 3,
    fontSize: '1.5rem',
    fontWeight: 600,
  },
};

function MyComponent() {
  return (
    <Paper sx={styles.container}>
      <Typography sx={styles.header}>
        Title
      </Typography>
      <Button variant="contained">
        Action
      </Button>
    </Paper>
  );
}
```

---

## Styling Patterns

### Inline Styles (< 100 lines)

For components with simple styling, define styles at the top:

```typescript
import type { SxProps, Theme } from '@mui/material';

const componentStyles: Record<string, SxProps<Theme>> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
  },
  header: {
    mb: 2,
    color: 'primary.main',
  },
  button: {
    mt: 'auto',
    alignSelf: 'flex-end',
  },
};

The rest: https://github.com/softaworks/agent-toolkit/blob/HEAD/dist/plugins/mui/skills/mui/SKILL.md