mcpField
M
material-ui-nextjs

material-ui-nextjs

github.com/mui開発99.3k738 回インストール今日更新
リポジトリ

material-ui-nextjs について

Next.js アプリに Material UI を組み込むためのエージェントスキルです。App Router／Pages Router の設定から、描画、スタイル、フォント、リンク、URL 連動ビューまで扱います。

主な機能

  1. 01App Router／Pages Router の設定
  2. 02SSR とストリーミングのキャッシュ設定
  3. 03フォントとテーマの設定
  4. 04CSS レイヤー連携
  5. 05Next.js Link の使用方法
  6. 06URL 状態と Suspense のガイド

活用シーン

  1. 01Material UI を使う Next.js アプリの開始
  2. 02スタイルの配置や順序の問題の修正
  3. 03next/font と Material UI テーマの併用
  4. 04useSearchParams による URL 連動ビューの構築

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/material-ui-nextjsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
AGENTS.md
metadata.json
reference.md

詳細

Material UI と Next.js

Next.js と Material UI の連携（SSR／ストリーミング、キャッシュプロバイダー、フォント、レイヤー、Link、App Router の URL 状態）に関するエージェントスキルです。エントリーポイントは SKILL.md、完全なガイドは AGENTS.md です。

適用するケース

  • @mui/material を使用する新しい App Router または Pages Router アプリ
  • スタイルが適用されない、順序が正しくない、または head ではなく body に配置されている
  • next/font と ThemeProvider ／ createTheme
  • Tailwind または CSS Modules と MUI（enableCssLayer）
  • Button と component={Link} の組み合わせ、または Next.js v16 のクライアント境界エラー
  • useSearchParams ／ URL に連動する MUI ビューと Suspense 境界

AGENTS.md のセクション

領域トピック
App RouterAppRouterCacheProvider、@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 には、インポートパスとプロバイダーの構成が記載されています。

コメント

Markdown 対応