How does it handle component customization?

It prioritizes the modern slots and slotProps API over deprecated componentsProps, ensuring your UI code follows the latest MUI standards.

How does it improve application performance?

The skill enforces the use of path imports instead of barrel imports, which can make development builds up to 6x faster in large MUI projects.

Can I use this with Next.js App Router?

Absolutely. It includes specific patterns for App Router integration, including the necessary CacheProvider and ThemeProvider setup for server-side rendering.

Does it handle dark mode implementation?

Yes, it provides patterns for native CSS variable integration and use of the applyStyles API to prevent theme flickering during SSR.

Does this skill support the latest MUI version?

Yes, it is specifically updated for MUI v7.x (March 2025), including support for CSS variables and the promoted Grid v2 component.

Material UI React Patterns

Name: Material UI React Patterns
Author: agents-inc

byagents-inc

•

设计工具

Accelerates React UI development using Material Design components, v7 patterns, and theme-driven styling standards.

This skill equips Claude with specialized knowledge for implementing Material UI (MUI) v7 in React applications, focusing on best practices for centralized theme configuration, responsive layout components, and deep customization using the modern slots and slotProps API. It ensures high-performance code output by enforcing path imports, type-safe theme augmentation, and flicker-free dark mode implementations using native CSS variables, making it an essential tool for building production-grade enterprise dashboards, forms, and complex CRUD interfaces.

主要功能

01Flicker-free dark mode implementation using theme.applyStyles

02TypeScript theme augmentation for type-safe custom design tokens

03Comprehensive MUI v7 implementation patterns including Grid v2 and CSS layers

04Standardized slots and slotProps guidance for deep component customization

05Optimized path import enforcement to prevent slow development builds

065 GitHub stars

使用场景

01Developing themeable design systems with consistent palette and typography

02Building enterprise-grade admin dashboards and complex CRUD interfaces

03Migrating and upgrading legacy MUI projects to version 7 standards

主要功能

01Flicker-free dark mode implementation using theme.applyStyles

02TypeScript theme augmentation for type-safe custom design tokens

03Comprehensive MUI v7 implementation patterns including Grid v2 and CSS layers

04Standardized slots and slotProps guidance for deep component customization

05Optimized path import enforcement to prevent slow development builds

065 GitHub stars

使用场景

01Developing themeable design systems with consistent palette and typography

02Building enterprise-grade admin dashboards and complex CRUD interfaces

03Migrating and upgrading legacy MUI projects to version 7 standards