Does it include TypeScript support?

Yes, all patterns include proper TypeScript typing for SxProps and Theme to ensure type-safe frontend development.

What version of Material-UI does this skill support?

This skill is specifically optimized for Material-UI (MUI) v7, including the 2025 breaking changes and updated component patterns.

Does this skill handle the new MUI slots pattern?

Yes, it provides guidance on the standardized slots and slotProps pattern that replaced the older component API in version 7.

Can it help with responsive design?

Absolutely. It includes patterns for mobile-first design using MUI breakpoints and responsive values within the sx prop.

Material-UI v7 Component Patterns

Name: Material-UI v7 Component Patterns
Author: softaworks

bysoftaworks

•

347

•

Design Tools

Standardizes Material-UI v7 development by providing production-ready component patterns, theme integrations, and modern styling workflows.

This skill equips Claude with specialized knowledge of the Material-UI (MUI) v7 ecosystem, enabling it to generate and refactor React components using the latest industry standards. It specifically addresses breaking changes from version 6, such as the transition to standardized slots/slotProps patterns and the shift toward package exports over deep imports. By implementing best practices for the sx prop, responsive design breakpoints, and theme-aware styling, this skill ensures that AI-generated frontend code is performant, accessible, and perfectly aligned with MUI's modern architectural updates.

Key Features

01Standardized component patterns for layout, forms, and feedback

02Responsive design implementation using MUI-specific breakpoints

03Advanced sx prop styling patterns with full TypeScript support

04347 GitHub stars

05Comprehensive MUI v7 migration and breaking change guidance

06Deep theme integration and custom utility hook implementation

Use Cases

01Migrating an existing React application from MUI v6 to MUI v7

02Rapidly prototyping responsive dashboards using MUI layout components

03Implementing a consistent, theme-driven design system across a frontend project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add softaworks/agent-toolkit mui

For use in Claude.ai and ChatGPT

Download Skill