react-mui

Guide React UI development with Material UI theming, styling, and migrations.

1|Updated Feb 19, 2026

Search Tags:#theming #react #migration #responsive #mui #material-ui #sx

Ready to run

npx skills add https://github.com/juburr/mad-skills --skill react-mui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-mui
Source: https://github.com/juburr/mad-skills/tree/main/react-mui
Command: npx skills add https://github.com/juburr/mad-skills --skill react-mui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides developers on building robust React user interfaces with Material UI (MUI), covering component APIs, theming, styling with the sx prop, dark mode, responsive layouts, and version migration (v3–v9 alpha).

Core Features & Use Cases

Comprehensive guidance for writing, reviewing, and migrating React code that uses @mui/material or @material-ui.
Theming and styling with createTheme, color schemes, and the sx prop for responsive design.
Migration aids including codemods references and version-specific changes.
Next.js integration and advanced patterns for production-ready apps.

Quick Start

Install dependencies, set up ThemeProvider with createTheme, and start building a MUI-powered React UI using the included examples.

Frequently Asked Questions about react-mui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up dark mode switching in a Material UI React app?▼

Dark mode switching in Material UI is achieved by configuring color schemes within createTheme and passing them to ThemeProvider, enabling dynamic theme toggling for your React app's responsive layouts.

What's the best way to style responsive layouts using the MUI sx prop?▼

The sx prop allows you to write responsive styles directly on MUI components by passing breakpoint values, avoiding the need for separate styled components while building your React user interface.

Can I use Material UI with Next.js for production-ready applications?▼

Yes, Material UI integrates with Next.js. Guidance covers advanced patterns and setup instructions for building production-ready React applications using @mui/material within the Next.js framework.

How do I migrate my React app from @material-ui to @mui/material?▼

Migration from @material-ui to @mui/material involves using codemods to automate version-specific changes across v3 through v9 alpha, updating imports, and adjusting theming API references.

Does Material UI support creating custom themes for React components?▼

Yes, custom theming is supported through createTheme. You define color schemes, typography, and spacing rules, then apply them globally via ThemeProvider to style your React components.