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

material-ui-nextjs — Next.js skill: MUI, SSR, and router setup

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.

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

What material-ui-nextjs does

The skill covers the places where Material UI and Next.js disagree: styles landing in body instead of head, CSS order problems, next/font clashing with ThemeProvider, Button with component={Link} hitting the Next.js v16 client boundary. SKILL.md is the entry point, AGENTS.md holds the full guide.

For App Router it walks through AppRouterCacheProvider with @emotion/cache and options, plus useSearchParams wrapped in <Suspense>. Pages Router gets _document, _app, DocumentHeadTags, and AppCacheProvider. Theme CSS variables and their SSR behaviour are documented too.

There is a dedicated section for enableCssLayer when MUI shares a page with Tailwind or CSS Modules. A reference.md lists import paths and the provider shape. If your own styles keep losing to MUI, start there.

What it helps with

  • Fix MUI styles injected into body instead of head
  • Set up Emotion cache for App Router
  • Make next/font work with ThemeProvider
  • Resolve the Next.js v16 client boundary error with Button and Link
  • Wrap useSearchParams in Suspense for URL-driven MUI views

Example prompts for the agent

  • Set up Material UI in my Next.js App Router project
  • MUI styles are in body instead of head, how do I fix that?
  • Enable CSS layers so MUI stops fighting Tailwind

How to install material-ui-nextjs

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

From the same set4

The whole set →
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-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

vue-pinia-best-practices github.com/vuejs-ai A skill covering Pinia best practices: avoid common store setup errors, preserve reactivity, and organize state management patterns in Vue projects. Claude Code CX Codex Cursor +1 16,800installs frontend-skill nexu-io This skill helps agents create visually strong landing pages, websites, and app UIs with restrained composition. Use it for frontend and interface work. Claude Code CX Codex Cursor +1 3,000installs opentui msmps Guides coding agents through building OpenTUI terminal interfaces, from choosing Core, React, or Solid to handling input, animations, and tests. Claude Code CX Codex Cursor +1 64,400installs expo-router expo Skill for file-based routing, stacks, modals and tabs in Expo Router. Use it when building navigation in a React Native mobile app. Claude Code CX Codex Cursor +1 27,700installs expo-brownfield expo Embeds React Native and Expo into existing native iOS and Android apps. Useful when adding cross-platform screens to SwiftUI, UIKit, or Kotlin hosts. Claude Code CX Codex Cursor +1 27,700installs 3d-web-experience sickn33 Helps build and debug web 3D scenes, product configurators, and portfolios. Covers stack choice, model loading, scroll interaction, and performance checks. Claude Code CX Codex Cursor +1 5,200installs 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-nextjs

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

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

What does material-ui-nextjs do?

It sets up Material UI in Next.js: Emotion cache for SSR, providers for App and Pages Router, next/font, CSS layers with Tailwind, the Link component pattern, and Suspense around useSearchParams.

Why would I need enableCssLayer?

When MUI sits next to Tailwind or CSS Modules, layer order decides which styles win. The skill explains how to turn on CSS layers so MUI does not override your layout and does not disappear itself.

Source text

SKILL.md · MIT 
---
name: material-ui-nextjs
description: Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.
license: MIT
metadata:
  author: mui
  version: '1.0.0'
---

# Material UI and Next.js

Agent skill for Next.js + Material UI wiring (SSR/streaming, cache providers, fonts, layers, Link, App Router URL state). SKILL.md is the entry; AGENTS.md is the full guide.

## When to apply

- New App Router or Pages Router app using `@mui/material`
- Styles missing, wrong order, or in `body` instead of `head`
- `next/font` + `ThemeProvider` / `createTheme`
- Tailwind or CSS Modules + MUI (`enableCssLayer`)
- `Button` + `component={Link}` or Next.js v16 client boundary errors
- `useSearchParams` / URL-driven MUI views and Suspense boundaries

## Sections in AGENTS.md

| Area          | Topics                                                                                  |
| :------------ | :-------------------------------------------------------------------------------------- |
| App Router    | `AppRouterCacheProvider`, `@emotion/cache`, `options`, `useSearchParams` + `<Suspense>` |
| Pages Router  | `_document`, `_app`, `DocumentHeadTags`, `AppCacheProvider`                             |
| Fonts         | `'use client'` theme, `next/font`, CSS variables on `html`                              |
| CSS variables | `cssVariables`, SSR flicker docs                                                        |
| CSS layers    | `enableCssLayer`, Tailwind / other CSS                                                  |
| Link          | Client wrapper, routing guide, examples repo                                            |

## Full guide

Read [AGENTS.md](./AGENTS.md) for complete steps and doc links.

[reference.md](./reference.md) lists import paths and provider shape.

© 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