Does it include support for responsive design?

Yes, it covers mobile-first responsive values within the sx prop and implementation of the MUI Grid and Stack systems.

How does it handle MUI v7 breaking changes?

The skill includes patterns for the new slots/slotProps API and guidance on replacing deprecated properties like onBackdropClick with the standardized onClose handler.

What version of Material-UI does this skill support?

This skill specifically supports MUI v7, including guidance for transitioning from v6 and utilizing the latest package export structures.

How does this skill help with styling consistency?

It provides best practices for using the sx prop with theme tokens and TypeScript, ensuring that spacing, colors, and typography remain consistent across the app.

Can I use this with Tailwind CSS?

Yes, it includes information on MUI v7's CSS layers support, which is specifically designed to work with Tailwind v4 and other CSS-in-JS solutions.

Material-UI v7 Design Patterns

Name: Material-UI v7 Design Patterns
Author: Microck

byMicrock

•

デザインツール

Accelerates frontend development using Material-UI v7 with standardized styling patterns, responsive layouts, and theme-aware components.

This skill provides comprehensive guidance for implementing Material-UI v7 in modern React applications, focusing on production-grade patterns and the latest API standards. It covers essential techniques for the sx prop, deep theme integration, and responsive design using MUI's mobile-first breakpoint system. By utilizing this skill, developers can ensure their codebase adheres to the latest MUI v7 requirements, including the standardized slots and slotProps pattern and CSS layer support, while avoiding deprecated practices like deep imports and legacy event handlers. It is an essential resource for building consistent, accessible, and high-performance user interfaces.

主な機能

012 GitHub stars

02Advanced sx prop styling with TypeScript safety and theme tokens

03Responsive design utilities using MUI breakpoints and layout components

04Standardized slots and slotProps usage for complex component customization

05Material-UI v7 component implementation and migration patterns

06Integration patterns for theme-driven development and MUI-specific hooks

ユースケース

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

02Building a production-grade, responsive dashboard with Material-UI components

03Creating a custom design system based on Material-UI theme tokens and customization

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck mui

For use in Claude.ai and ChatGPT