Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

material-ui-styling — Claude Code skill for choosing MUI styling

Helps the agent pick the right Material UI styling layer: sx, styled(), theme components, or global CSS. Use it when edits pile up and you need to avoid extra wrapper nesting.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add mui/material-ui --skill material-ui-styling -a claude-code
Open on GitHub

What material-ui-styling does

The skill pushes the agent to choose styling from narrow to wide: sx for one-off local changes, then styled() for reusable wrappers, then createTheme({ components }) overrides, and global styles last.

Two files do the work: SKILL.md is the entry point and index, AGENTS.md holds the full guide with examples and links to MUI docs. A separate table in reference.md compares sx vs styled() semantics — theme shortcuts, spacing behavior, and common foot-guns.

Install with npx skills add mui/material-ui --skill material-ui-styling -a claude-code. Other platforms use the same command with a different -a flag. MIT license, maintained by the MUI team, so it tracks the official docs closely.

What it helps with

  • pick between sx, styled(), and theme overrides without reading all MUI docs
  • override a component slot without breaking its state
  • understand sx vs styled() spacing semantics
  • style all instances of a component through the theme
  • add global styles via GlobalStyles or CssBaseline

Example prompts for the agent

  • apply the material-ui-styling skill and tell me which layer fits this `TextField`
  • how do I override the `root` slot of `Button` without affecting hover state
  • compare `sx` and `styled()` for a reusable `Card` using MUI guidance

How to install material-ui-styling

1Skills CLI (Vercel)

npx skills add mui/material-ui --skill material-ui-styling -a claude-code

2Manually: put the files in place

~/.claude/skills/material-ui-styling/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/material-ui-styling/

From the same set4

The whole set →
material-ui-nextjs mui A skill for wiring Material UI into Next.js: SSR, Emotion cache, next/font, CSS layers, Link, and useSearchParams. Use it when setting up or debugging MUI in a Next.js app. Claude Code CX Codex Cursor +1 725installs material-ui-theming mui Skill for building and managing Material UI themes: palettes, color schemes, CSS variables, light/dark switching, and TypeScript augmentation. Use it when designing your app's visual system or implementing theme customization. Claude Code CX Codex Cursor +1 604installs material-ui-tailwind mui This skill explains how to combine Material UI with Tailwind CSS, handle CSS layer order, pass utility classes to components, and work with Tailwind v3. Claude Code CX Codex Cursor +1 364installs

Similar

react-native-best-practices callstackincubator Provides React Native performance guidelines based on Callstack practices. It helps agents diagnose FPS drops, memory leaks, and large bundles. Claude Code CX Codex Cursor +1 30,100installs mcp vercel-labs This skill helps build MCP servers that render interactive json-render UIs in Claude, ChatGPT, Cursor, and VS Code. Claude Code CX Codex Cursor +1 5,800installs antislop miqdadbadjuber A rule-based filter for generic AI output in interfaces and code. Use it when an agent needs explicit checks for UI, copy, accessibility, or mobile layout. Claude Code CX Codex Cursor +1 7,300installs screen-reader-testing Seth Hobson This skill guides screen reader testing for web apps with VoiceOver, NVDA, and JAWS. Use it to debug ARIA, forms, navigation, and dynamic announcements. Claude Code CX Codex Cursor 10,700installs threejs-fundamentals CloudAI-X Sets up Three.js r186 scenes, cameras, renderers, and animation loops for WebGL or WebGPU with TSL. Claude Code CX Codex Cursor +1 17,100installs wpds nexu-io Applies official WordPress Design System tokens, typography, and component patterns to themes and sites. Claude Code CX Codex Cursor +1 2,700installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about material-ui-styling

How do I install material-ui-styling in Claude Code?

Run npx skills add mui/material-ui --skill material-ui-styling -a claude-code. The skill lands in ~/.claude/skills/material-ui-styling/SKILL.md.

What does material-ui-styling do?

It guides the agent to the right MUI styling layer: sx for one-off changes, styled() for wrappers, createTheme({ components }) for all instances, GlobalStyles and CssBaseline for globals.

How does sx differ from styled() in this skill?

sx fits local edits, styled() makes reusable wrappers. The skill ships a comparison table covering theme shortcuts, spacing behavior, and common foot-guns.

Source text

SKILL.md · MIT 
---
name: material-ui-styling
description: Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui/material components, customizing themes, overriding slots, or comparing sx vs styled.
license: MIT
metadata:
  author: mui
  version: '1.0.0'
---

# Material UI styling

Agent skill for picking the correct styling layer in Material UI (narrowest scope first). SKILL.md is the entry and index; AGENTS.md is the full guide.

## When to apply

- Choosing among `sx`, `styled()`, theme `components`, or global CSS for a change
- Overriding component slots or state safely
- Comparing `sx` vs `styled()` semantics (spacing, theme shortcuts)

## Sections in AGENTS.md (by priority)

| Order | Topic                          | Scope                                 |
| :---- | :----------------------------- | :------------------------------------ |
| 1     | Quick decision                 | Pick `sx` → `styled` → theme → global |
| 2     | `sx` prop                      | One-off / local                       |
| 3     | `styled()`                     | Reusable wrapper                      |
| 4     | `createTheme({ components })`  | All instances                         |
| 5     | `GlobalStyles` / `CssBaseline` | HTML baseline / globals               |
| 6     | `sx` vs `styled()` table       | Foot-gun prevention                   |

## Full guide

Read [AGENTS.md](./AGENTS.md) for the complete instructions, examples, and doc links.

Supplementary tables: [reference.md](./reference.md).

© mui · MIT · mui/material-ui

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor