skills.rest
juburr
juburrCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/juburr/mad-skills --skill react-mui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
garochee33garochee33
3

ci-cd-architect

Design automated CI/CD pipelines with GitHub Actions, Docker, and Terraform.

Community
Advanced
Wahidul123Wahidul123

forms

Validate and manage React form inputs with react-hook-form and TypeScript.

Community
Intermediate
johnnyelwailerjohnnyelwailer

chakra-ui

Build accessible React interfaces with Chakra UI components and theming tokens.

Community
Intermediate