material-ui-theming

Material UI のテーマ設定とデザイントークン

テーマの作成、デザイントークン、ライト／ダークモード、CSS テーマ変数に関するエージェントスキルです。エントリーポイントは SKILL.md、完全なガイドは AGENTS.md です。

適用する場合

• createTheme、ThemeProvider、useTheme、CssBaseline
• colorSchemes、useColorScheme、ストレージ／SSR の動作
• cssVariables: true、theme.vars、applyStyles('dark', …)
• カスタムテーマキーと TypeScript のモジュール拡張

AGENTS.md のセクション

領域	トピック
基本設定	インポート、プロバイダーの配置、useTheme
トークン一覧	パレット、タイポグラフィ、スペーシング、シェイプ、ブレークポイント、コンポーネントなど
パレット	main／派生色、@mui/material/colors、mode
カラースキーム	パレットのみの場合との違い、ハイドレーション、ThemeProvider の props
CSS 変数	cssVariables、予約済みの vars、ちらつきの回避
合成	複数ステップの createTheme、deepmerge、プロバイダーのネスト
カスタムトークン	Theme／ThemeOptions の拡張

完全なガイド

完全な手順とリンクについては、AGENTS.md をご覧ください。

TypeScript のコード例：reference.md。