materialui
A guide for using Material UI v6 for consistent and accessible React UI development.
Install
mkdir -p .claude/skills/materialui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17051" && unzip -o skill.zip -d .claude/skills/materialui && rm skill.zipInstalls to .claude/skills/materialui
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Material UI React component library. Use for React UI.Key capabilities
- →Build enterprise-grade React UIs
- →Utilize Pigment CSS for RSC compatibility
- →Implement complex data grids with MUI X
- →Apply global design tokens with Theme Provider
- →Customize components using Slots/SlotProps
- →Ensure accessibility in React applications
How it works
This skill guides the use of Material UI (MUI) for React development, emphasizing Pigment CSS for React Server Components compatibility, the `sx` prop for styling, and `MUI X` for data components. It also covers Theme Provider for global design tokens and Slots/SlotProps for customization.
Inputs & outputs
When to use materialui
- →Build enterprise UI components
- →Implement MUI data grids
- →Configure UI theme provider
- →Design accessible React forms
About this skill
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 ofdivfor layout. - Use
MUI X: For Data Grids and Date Pickers.
Don't:
- Don't use
makeStyles: It is deprecated. Usestyled()orsx.
References
When not to use it
- →When `makeStyles` is preferred for styling
Limitations
- →The skill does not cover `makeStyles` as it is deprecated.
How it compares
This workflow focuses on modern MUI v6 practices, including Pigment CSS and `MUI X`, providing a structured approach to building enterprise-level React UIs with accessibility and performance considerations, unlike using older MUI versions o
Compared to similar skills
materialui side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| materialui (this skill) | 0 | 6mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| ui-styling | 12 | 9mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by G1Joshi
View all by G1Joshi →You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.