materialui

Material UI React component library. Use for React UI.

7 stars

byG1Joshi

View on GitHub Installation ↓

Best use case

materialui is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Material UI React component library. Use for React UI.

Teams using materialui should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/materialui/SKILL.md --create-dirs "https://raw.githubusercontent.com/G1Joshi/Agent-Skills/main/skills/frameworks/materialui/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/materialui/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How materialui Compares

Feature / Agent	materialui	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Material UI React component library. Use for React UI.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Material UI (MUI)

MUI Core (v6) is the gold standard for React UI. v6 introduces **Pigment CSS** (Zero-runtime CSS-in-JS) for compatibility with React Server Components (Next.js App Router).

## When to Use

- **Enterprise**: Consistent, rigorous design system.
- **Complex Data**: `MUI X` (DataGrid) is the most powerful table library for React.
- **Accessibility**: First-class a11y support.

## Core Concepts

### The `sx` prop

Superset of CSS. `sx={{ mt: 2, color: 'primary.main' }}`.

### Theme Provider

Global design tokens (`palette`, `typography`, `breakpoints`).

### Slots / SlotProps

Deep customization of internal sub-components.

## Best Practices (2025)

**Do**:

- **Use Pigment CSS**: For RSC compatibility.
- **Use `Box`**: Instead of `div` for layout.
- **Use `MUI X`**: For Data Grids and Date Pickers.

**Don't**:

- **Don't use `makeStyles`**: It is deprecated. Use `styled()` or `sx`.

## References

- [Material UI Documentation](https://mui.com/)