SkillsAdd

mui/material-ui-docs · Archived

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.

First seen Jul 26, 2026

Installation

$ npx skills add mui/material-ui-docs --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.

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

material-ui-theming Same source · more installs
mui/material-ui-docs

Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes…

2 installs
material-ui-styling Same source · more installs
mui/material-ui-docs

Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from o…

2 installs
material-ui-tailwind Same source
mui/material-ui-docs

Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order)…

1 installs
recipe-share-event-materials Similar · more installs
googleworkspace/cli

Share Google Drive files with all attendees of a Google Calendar event.

26.7K installs

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

npx skills add mui/material-ui-docs
material-ui-theming 2 material-ui-styling 2 material-ui-tailwind 1

Browse all from mui/material-ui-docs

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 338
License LICENSE
Default branch latest
Status Archived

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 README.md 572 B
  • docs SUMMARY.md 344 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1 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.