Agent skill · software engineering · davila7
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.
Why this skill is useful
Provides specific patterns and best practices for using Material-UI v7 components, which the AI may not reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
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 --- Styling Patterns Inline Styles (< 100 lines) For components with simple styling, define styles at the top: Separate Styles File (>= 100 lines) For complex components, create separate style file: --- Common Components Layout Components Grid System Typography Buttons --- Theme Integration Using Theme Values Theme in sx Prop --- Responsive Design Breakpoints Responsive Typography --- Forms --- Common Patterns Card Component Dialog/Modal Loading States --- MUI-Specific Hooks useMuiSnackbar --- Icons --- Best Practices 1. Type Your sx Props 2. Use Theme Tokens 3. Consistent Spacing --- Additional Resources For more detailed patterns, see: styling-guide.md - Advanced styling patterns component-library.md - Component examples theme-customization.md - Theme setup
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/mui