mcpField
M
material-ui-styling

material-ui-styling

github.com/muiデザイン・UI99.3k704 回インストール今日更新
リポジトリ

material-ui-styling について

Material UI のスタイル手法を選び、適用するためのエージェントスキルです。局所的な `sx` からグローバル CSS までの適用範囲や、コンポーネントのスロット、状態、`styled()` との違いを解説します。

主な機能

  1. 01スタイルレイヤーの選択
  2. 02局所的な `sx` スタイル
  3. 03再利用可能な `styled()` ラッパー
  4. 04テーマ全体へのコンポーネント上書き
  5. 05グローバルスタイルとベースライン
  6. 06`sx` と `styled()` の使い分け

活用シーン

  1. 01変更に適したスタイル手法の選択
  2. 02コンポーネントのスロットや状態の上書き
  3. 03再利用可能なスタイルラッパーの作成
  4. 04`sx` と `styled()` のよくある問題の回避

インストール

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

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

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

同梱ファイル

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

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

詳細

Material UI のスタイリング

Material UI で適切なスタイリング層を選ぶためのエージェントスキルです（最も狭いスコープから始めます）。SKILL.md はエントリーポイント兼インデックスで、AGENTS.md は完全なガイドです。

適用するタイミング

  • 変更に sx、styled()、テーマの components、グローバル CSS のどれを使うか選ぶとき
  • コンポーネントのスロットや状態を安全にオーバーライドするとき
  • sx と styled() の動作の違い（スペーシング、テーマのショートカット）を比較するとき

AGENTS.md のセクション（優先順位順）

順序トピックスコープ
1すばやい判断sx → styled → テーマ → グローバルを選択
2sx プロパティ単発／ローカル
3styled()再利用可能なラッパー
4createTheme({ components })すべてのインスタンス
5GlobalStyles / CssBaselineHTML のベースライン／グローバル
6sx と styled() の比較表落とし穴の防止

完全なガイド

完全な手順、例、ドキュメントへのリンクについては、AGENTS.md をお読みください。

補足表：reference.md。

コメント

Markdown 対応