How do I install the Material UI Nextjs skill?

Run npx skillmds@latest add mui/material-ui-nextjs in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Material UI Nextjs safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Material UI Nextjs?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Material UI Nextjs free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Material UI Nextjs?

mui (@mui) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Material UI Nextjs by mui — Agent Skill

Material UI Nextjs

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.

mui 311a54b 5 files · 13.6 KB Updated Sep 9, 2026

File contents

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 for complete steps and doc links.

reference.md lists import paths and provider shape.

---name: material-ui-nextjsdescription: 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--- # 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.

Frequently asked questions