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

material-ui-theming — skill for Claude Code: themes and design tokens

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.

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

What material-ui-theming does

The skill guides you through createTheme, ThemeProvider, and useTheme. It covers setup (where to place the provider), token composition (palette, typography, spacing, breakpoints), and how to structure multiple color schemes for light and dark modes using colorSchemes and useColorScheme. You'll learn to enable CSS variables with cssVariables: true, work with theme.vars to avoid flicker during hydration, and apply mode-specific styles.

It includes sections on composing themes in multiple steps with deepmerge, nesting providers, and extending the Theme and ThemeOptions types for custom design tokens. TypeScript snippets are in a separate reference file.

Requires Node.js and Material UI already installed in your project. The skill is ready to use immediately after installation.

What it helps with

  • set up a Material UI theme with custom palette and typography
  • toggle between light and dark modes with persistent storage
  • use CSS variables instead of theme objects
  • extend standard design tokens for your own system
  • prevent theme flicker on client-side hydration

Example prompts for the agent

  • Help me create a Material UI theme with a custom palette and typography.
  • How do I add a light/dark toggle that saves to localStorage?
  • Set up cssVariables for Material UI and show how to use theme.vars in components.

How to install material-ui-theming

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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-styling mui 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. Claude Code CX Codex Cursor +1 685installs 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

impeccable-design-polish nexu-io Polishes existing HTML pages by removing generic AI styling cues, fixing mobile layout bugs, and tightening accessibility. Claude Code CX Codex Cursor +1 2,500installs threejs-shaders CloudAI-X Guides the agent through writing GLSL shaders, custom materials, and TSL nodes for Three.js r186 across WebGL and WebGPU. Claude Code CX Codex Cursor +1 15,400installs create-adaptable-composable github.com/vuejs-ai Skill for writing reusable Vue composables that accept values, refs, or getters and work the same way in all cases. Use it when you need a library-grade composable that adapts to different input types. Claude Code CX Codex Cursor +1 13,700installs vue-testing-best-practices github.com/vuejs-ai Skill offering Vue 3 testing patterns and best practices. It helps configure Vitest and write blackbox component tests without brittle assertions. Claude Code CX Codex Cursor +1 13,600installs zoom-apps-sdk official anthropics Reference skill for the Zoom Apps SDK. Gives your agent the API surface for web apps running inside Zoom meetings, webinars, the main client, and Zoom Phone. Claude Code CX Codex Cursor +1 2,000installs antislop-ui miqdadbadjuber A UI and visual skill for reviewing color, layout, components, and motion. Use it when building or editing a website, web app, or other interface. Claude Code CX Codex Cursor +1 6,300installs 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-theming

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

Run npx skills add mui/material-ui --skill material-ui-theming -a claude-code. The skill will be available at ~/.claude/skills/material-ui-theming/SKILL.md.

What does this skill do?

It provides instructions for building Material UI themes: how createTheme and ThemeProvider work, setting up palettes, configuring multiple color schemes, enabling CSS variables, and extending types for custom tokens.

Do I need Material UI installed to use this skill?

Yes, Material UI must already be in your project. The skill is a guide for working with its theming API, not a standalone package.

Source text

SKILL.md · MIT 
---
name: material-ui-theming
description: Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes, cssVariables, theme.vars, dark mode, TypeScript augmentation). Use when building or extending a theme, toggling light/dark, or aligning tokens across an app.
license: MIT
metadata:
  author: mui
  version: '1.0.0'
---

# Material UI theming and design tokens

Agent skill for theme creation, design tokens, light/dark, and CSS theme variables. SKILL.md is the entry; AGENTS.md is the full guide.

## When to apply

- `createTheme`, `ThemeProvider`, `useTheme`, `CssBaseline`
- `colorSchemes`, `useColorScheme`, storage / SSR behavior
- `cssVariables: true`, `theme.vars`, `applyStyles('dark', …)`
- Custom theme keys and TypeScript module augmentation

## Sections in AGENTS.md

| Area          | Topics                                                          |
| :------------ | :-------------------------------------------------------------- |
| Core setup    | Imports, provider placement, `useTheme`                         |
| Token map     | palette, typography, spacing, shape, breakpoints, components, … |
| Palette       | `main` / derived colors, `@mui/material/colors`, `mode`         |
| Color schemes | vs palette-only, hydration, `ThemeProvider` props               |
| CSS variables | `cssVariables`, reserved `vars`, flicker avoidance              |
| Composition   | Multi-step `createTheme`, `deepmerge`, nesting providers        |
| Custom tokens | Augmenting `Theme` / `ThemeOptions`                             |

## Full guide

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

TypeScript snippets: [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