# Mui

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-softaworks-agent-toolkit-mui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [softaworks](https://agentstack.voostack.com/s/softaworks)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [softaworks](https://github.com/softaworks)
- **Source:** https://github.com/softaworks/agent-toolkit/tree/main/dist/plugins/mui/skills/mui

## Install

```sh
agentstack add skill-softaworks-agent-toolkit-mui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
  },
  header: {
    mb: 3,
    fontSize: '1.5rem',
    fontWeight: 600,
  },
};

function MyComponent() {
  return (
    
      
        Title
      
      
        Action
      
    
  );
}
```

---

## Styling Patterns

### Inline Styles (> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
  },
  header: {
    mb: 2,
    color: 'primary.main',
  },
  button: {
    mt: 'auto',
    alignSelf: 'flex-end',
  },
};

function Component() {
  return (
    
      Header
      Action
    
  );
}
```

### Separate Styles File (>= 100 lines)

For complex components, create separate style file:

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

export const userProfileStyles: Record> = {
  container: {
    p: 3,
    maxWidth: 800,
    mx: 'auto',
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    mb: 3,
  },
  // ... many more styles
};

// UserProfile.tsx
import { userProfileStyles as styles } from './UserProfile.styles';

function UserProfile() {
  return ...;
}
```

---

## Common Components

### Layout Components

```typescript
// Box - Generic container

  Content

// Paper - Elevated surface

  Content

// Container - Centered content with max-width

  Content

// Stack - Flex container with spacing

  
  

```

### Grid System

```typescript
import { Grid } from '@mui/material';

// 12-column grid

  
    Left half
  
  
    Right half
  

// Responsive grid

  
    Card
  
  {/* Repeat for more cards */}

```

### Typography

```typescript
Heading 1
Heading 2
Body text
Small text

// With custom styling

  Custom Heading

```

### Buttons

```typescript
// Variants
Contained
Outlined
Text

// Colors
Primary
Secondary
Error

// With icons
import { Add as AddIcon } from '@mui/icons-material';

}>Add Item
```

---

## Theme Integration

### Using Theme Values

```typescript
import { useTheme } from '@mui/material';

function Component() {
  const theme = useTheme();

  return (
    
      Themed box
    
  );
}
```

### Theme in sx Prop

```typescript

  Content

// Callback for advanced usage
 ({
    color: theme.palette.primary.main,
    '&:hover': {
      color: theme.palette.primary.dark,
    },
  })}
>
  Hover me

```

---

## Responsive Design

### Breakpoints

```typescript
// Mobile-first responsive values

  Responsive width

// Responsive display

  Desktop only

```

### Responsive Typography

```typescript

  Responsive text

```

---

## Forms

```typescript
import { TextField, Stack, Button } from '@mui/material';

  
     setEmail(e.target.value)}
      fullWidth
      required
      error={!!errors.email}
      helperText={errors.email}
    />
    Submit
  

```

---

## Common Patterns

### Card Component

```typescript
import { Card, CardContent, CardActions, Typography, Button } from '@mui/material';

  
    
      Title
    
    
      Description
    
  
  
    Learn More
  

```

### Dialog/Modal

```typescript
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

  Confirm Action
  
    Are you sure you want to proceed?
  
  
    Cancel
    
      Confirm
    
  

```

### Loading States

```typescript
import { CircularProgress, Skeleton } from '@mui/material';

// Spinner

  

// Skeleton

  
  
  

```

---

## MUI-Specific Hooks

### useMuiSnackbar

```typescript
import { useMuiSnackbar } from '@/hooks/useMuiSnackbar';

function Component() {
  const { showSuccess, showError, showInfo } = useMuiSnackbar();

  const handleSave = async () => {
    try {
      await saveData();
      showSuccess('Saved successfully');
    } catch (error) {
      showError('Failed to save');
    }
  };

  return Save;
}
```

---

## Icons

```typescript
import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
import { Button, IconButton } from '@mui/material';

}>Add

```

---

## Best Practices

### 1. Type Your sx Props

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

// ✅ Good
const styles: Record> = {
  container: { p: 2 },
};

// ❌ Avoid
const styles = {
  container: { p: 2 }, // No type safety
};
```

### 2. Use Theme Tokens

```typescript
// ✅ Good: Use theme tokens

// ❌ Avoid: Hardcoded values

```

### 3. Consistent Spacing

```typescript
// ✅ Good: Use spacing scale

// ❌ Avoid: Random pixel values

```

---

## Additional Resources

For more detailed patterns, see:
- [styling-guide.md](resources/styling-guide.md) - Advanced styling patterns
- [component-library.md](resources/component-library.md) - Component examples
- [theme-customization.md](resources/theme-customization.md) - Theme setup

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [softaworks](https://github.com/softaworks)
- **Source:** [softaworks/agent-toolkit](https://github.com/softaworks/agent-toolkit)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-softaworks-agent-toolkit-mui
- Seller: https://agentstack.voostack.com/s/softaworks
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.