SkillsAdd

mui/material-ui

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.

Trending #7831 First seen Apr 29, 2026

Installation

$ npx skills add mui/material-ui --skill material-ui-nextjs
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-diagnostics Shared topics
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs
azure-validate Shared topics
microsoft/azure-skills

Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure…

567.7K installs
supabase-postgres-best-practices Shared topics
supabase/agent-skills

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill …

391.6K installs
supabase Shared topics
supabase/agent-skills

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge F…

263K installs

Also in this package

Other skills from mui/material-ui.

npx skills add mui/material-ui
material-ui-styling 440 material-ui-theming 379 material-ui-tailwind 318 material-ui-review 21

Browse all from mui/material-ui

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 99.0K
License LICENSE
Default branch master
Open issues 1,368
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0.0
LicenseMIT
More metadata
author
mui
version
1.0.0

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,046 B
  • docs AGENTS.md 9,513 B
  • docs SUMMARY.md 344 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 506 installs

SKILL.md

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.