Skill for Claude Code: Material Design 3 UI

Claude Code's Material Design 3 Expert: Skill for UI Generation and Auditing

The material-3-skill for Claude Code streamlines UI component creation, theming, and code audits to match MD3 specs. Install it in ~/.claude/skills/ and activate with /material-3. It prioritizes Jetpack Compose, with partial Flutter support and limited web compatibility.

Four core modes:

• Generate components from descriptions.
• Create ColorScheme from a seed color.
• Build adaptive Scaffolds.
• Audit app source code.

Example login form generation:

/material-3 component Create a login form with email and password fields

Result: Compose code with MaterialTheme, OutlinedTextField, FilledButton, proper spacing, and MD3 elevation.

Theme and Scaffold Generation

Theme command generates a full ColorScheme:

/material-3 theme Generate theme from seed color #1A73E8

Output: primary, secondary, tertiary, surface, error with onPrimary, primaryContainer variants, etc., including dark mode via Material You tonal palettes.

For app skeletons:

/material-3 scaffold Create responsive shell with navigation

Generates adaptive layouts: bottom nav on mobile, navigation rail on tablets, navigation drawer on desktop using MD3 breakpoints.

Reference File Structure

The skill includes distilled data from m3.material.io and AndroidX Compose Material3:

material-3-skill/
├── SKILL.md
├── references/
│   ├── color-system.md
│   ├── component-catalog.md
│   ├── theming-and-dynamic-color.md
│   ├── typography-and-shape.md
│   ├── navigation-patterns.md
│   └── layout-and-responsive.md
├── CONTRIBUTING.md
└── LICENSE (MIT)

Files cover token tables, 30+ component templates mapped to Compose, breakpoints, and standard layouts.

Code Auditing: 10 Check Categories

Audit scans directories like ./app/src/main and evaluates code against:

• Color tokens — use MaterialTheme.colorScheme.primary over hardcoding.
• Typography — styles from MaterialTheme.typography.
• Shape — small, medium, large, extraLarge tokens.
• Elevation — component-specific shadow levels.
• Components — standard over custom.
• Layout — responsiveness and standard patterns.
• Navigation — type by screen size.
• Motion — expressive transitions.
• Accessibility — contrast, touch targets, content descriptions.
• Theming — dynamic colors, dark mode.

Report includes scores, issues, and line-specific fixes.

Platform Support and M3 Expressive

| Platform | Support Level |

|-----------------|------------------------------|

| Jetpack Compose | Full, including Expressive |

| Flutter | ThemeData(useMaterial3: true), ColorScheme.fromSeed |

| Web | Limited, no Expressive |

M3 Expressive (from May 2025) adds typography emphasis, shape morphing, and motion. The skill provides a support matrix: full in Compose, partial in Flutter, none on web.

Installation and Limitations

Clone and copy:

git clone https://github.com/hamen/material-3-skill.git
cp -r material-3-skill ~/.claude/skills/material-3

Or symlink for updates:

ln -s /path/to/material-3-skill ~/.claude/skills/material-3

Limitations:

• Compose priority, Flutter/web secondary.
• Spec distillation may lag Google updates.
• Doesn't replace design decisions (seed color choice, FAB placement).

Key Takeaways

• Generates code strictly by MD3 tokens, saving manual spec checks.
• Audits 10 categories with targeted fixes.
• M3 Expressive support matrix for mid/senior devs.
• Reference files as quick spec lookup.
• Honest web support assessment — no hype.

— Editorial Team