Material UI と Next.js
Next.js + Material UI の連携（SSR/ストリーミング、キャッシュプロバイダー、フォント、レイヤー、Link、App Router URL 状態）のためのエージェントスキル。SKILL.md がエントリーポイントであり、AGENTS.md が完全なガイドです。
適用タイミング
- App Router または Pages Router を使用した新しいアプリで
@mui/materialを使用する場合 - スタイルが欠落している、順序が間違っている、または
headではなくbodyに挿入される場合 next/font+ThemeProvider/createThemeを使用する場合- Tailwind または CSS Modules + MUI（
enableCssLayer）を使用する場合 Button+component={Link}を使用する、または Next.js v16 のクライアントバウンダリエラーが発生する場合useSearchParams/ URL 駆動の MUI ビューと Suspense 境界を使用する場合
AGENTS.md のセクション
| エリア | トピック |
|---|---|
| App Router | AppRouterCacheProvider、@emotion/cache、options、useSearchParams + <Suspense> |
| Pages Router | _document、_app、DocumentHeadTags、AppCacheProvider |
| フォント | 'use client' テーマ、next/font、html 上の CSS 変数 |
| CSS 変数 | cssVariables、SSR フリッカーに関するドキュメント |
| CSS レイヤー | enableCssLayer、Tailwind / その他の CSS |
| Link | クライアントラッパー、ルーティングガイド、サンプルリポジトリ |
完全ガイド
完全な手順とドキュメントリンクについては、AGENTS.md を参照してください。
reference.md にはインポートパスとプロバイダーの形状が記載されています。