Mui

This one gives you the MUI v7 patterns you need: sx prop styling with proper TypeScript types, responsive breakpoints, theme integration, and component examples. It splits styling conventions by file size (inline for under 100 lines, separate files for complex components) which is practical. The breaking changes note matters if you're migrating from v6, especially the slots/slotProps standardization and the CSS layers support for Tailwind compatibility. Covers the common stuff like Grid, Typography, forms, and dialogs with working code blocks. Useful if you're building with Material-UI and want consistent patterns without digging through docs every time.

skills.sh installs: 1.1K
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --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