material-ui-nextjs

Name: material-ui-nextjs
Author: mui

github.com/muiDevelopment99.3k738 installsUpdated today

About material-ui-nextjs

An agent skill for wiring Material UI into Next.js apps, covering App Router and Pages Router setup, rendering, styles, fonts, links, and URL-driven views. It is intended for developers resolving integration issues or setting up these combinations.

Key features

01App Router and Pages Router setup
02SSR and streaming cache configuration
03Font and theme setup
04CSS layer integration
05Next.js Link usage
06URL state and Suspense guidance

Use cases

01Starting a Next.js app with Material UI
02Fixing styles rendered in the wrong location or order
03Combining next/font with a Material UI theme
04Building URL-driven views with useSearchParams

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mui/material-ui --skill material-ui-nextjs

After installing, type/material-ui-nextjsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

README.md

AGENTS.md

metadata.json

reference.md

Details

From the project README

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.

Comments

Markdown supported

Details

Author: mui
Repository: mui/material-ui
Category: Development
Installs: 738
GitHub stars: 99,283

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.