mui_skill

Overview

This skill packages practical patterns for Material-UI v7 usage, focusing on the sx prop, theme integration, responsive design, and MUI hooks. It highlights v7 breaking changes and provides concise examples and best practices to speed up building consistent UIs with MUI components.

How this skill works

The skill inspects common component patterns (Box, Grid, Paper, Typography, Card, Dialog) and offers ready-to-use sx prop styles and theme-aware examples. It demonstrates responsive breakpoint usage, theme token access, and recommended typing for SxProps, plus MUI-specific utilities like snackbar hooks and icon usage. Followable code snippets and file-structure suggestions show when to inline styles versus extracting them to separate files.

When to use it

• Styling components with MUI sx prop and needing typed styles
• Creating responsive layouts using MUI breakpoints and Grid/Stack patterns
• Customizing or reading theme tokens in components
• Implementing common UI primitives: cards, dialogs, forms, loading states
• Using MUI v7 slots/slotProps and hooks like custom snackbar utilities

Best practices

• Type sx props with SxProps<Theme> for compile-time safety
• Use theme tokens (palette, spacing, shape) instead of hardcoded values
• Keep inline styles for small components; extract to a styles file when > ~100 lines
• Prefer the slots/slotProps pattern introduced in v7 for consistent overrides
• Use mobile-first breakpoint values in sx for predictable responsive behavior

Example use cases

• Build a responsive dashboard page using Grid and responsive sx widths
• Create a themed card list reusing typed styles from a separate styles file
• Implement a form with TextField validation and a submit Button using theme spacing
• Show a confirmation Dialog with onClose handling and accessible actions
• Use a custom useMuiSnackbar hook to centralize toasts after async operations