material-ui

Overview

Material UI (MUI) is a comprehensive React component library implementing Google's Material Design. Includes components, icons, date pickers, data grid, and a powerful theming system with styled-engine.

Capabilities

• 100+ production-ready Material Design components
• Theming with createTheme (colors, typography, spacing, breakpoints)
• sx prop for inline styling with theme access
• MUI X: DataGrid, DatePicker, TreeView, Charts
• 2000+ Material Design icons
• CSS-in-JS with Emotion or styled-components

When to Use

Trigger phrases:

• "material ui"

• "Material UI (MUI) React components — theming, styled engine, data grid, date pic"

• Building enterprise React applications with Material Design

• Need advanced data tables with sorting, filtering, pagination

• Want a mature, well-documented component ecosystem

• Building admin panels, dashboards, data-heavy apps

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The material-ui workflow follows a standard pipeline pattern.

Core flow:

# material-ui primary flow
input = prepare(raw_data)
result = process(input, config={components, data, date, engine, grid})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# material-ui primary flow
input = prepare(raw_data)
result = process(input, config={components, data, date, engine, grid})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Installation

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
# Optional: DataGrid, DatePicker
npm install @mui/x-data-grid @mui/x-date-pickers