Mui

Covers Material-UI v7 component patterns with a focus on the sx prop styling system, theme integration, and responsive design. You'll want this when building React UIs with MUI components like Box, Grid, Typography, and Paper. The skill includes practical guidance on when to inline styles versus splitting them into separate files (uses 100 lines as the threshold), plus examples of form handling, dialogs, and loading states. Notable callout on v7 breaking changes: deep imports are gone, Modal lost onBackdropClick, and everything now uses the standardized slots pattern. The responsive breakpoint examples and theme access patterns are genuinely handy references.

skills.sh installs: 824
GitHub stars: 2.7K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add softaworks/agent-toolkit --skill mui --agent claude-code

Installs into .claude/skills of the current project.

Files

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

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,
  },
};

SKILL.md on GitHub