A comprehensive Claude Code skill for implementing Google's Material Design 3 (Material You) UI system.

• What it does
• Platform support
• How this skill was built
  • Sources
  • Process
  • What this means for accuracy
• Installation
• Usage
  • Build MD3 components
  • Generate a theme
  • Scaffold an app
  • Audit MD3 compliance
• What's included
• Contributing
• License

• Guides Claude in generating MD3-compliant UI with correct design tokens, components, theming, layout, and accessibility
• Primary focus: Jetpack Compose — MaterialTheme, Material 3 composables, adaptive layouts, edge-to-edge/insets, and current Compose Material3 patterns
• Also covers Flutter (useMaterial3, ColorScheme.fromSeed, etc.) at a secondary level
• Web (@material/web) is documented as a limited path: Material Web is in maintenance mode and M3 Expressive is not implemented on Web; use tokens and components knowing the ecosystem is not receiving active feature work
• Covers 30+ components with Compose-oriented mappings plus web element names where applicable, attributes, and examples in references/component-catalog.md
• Includes an MD3 compliance audit mode that scores apps across 10 categories (works for Compose/Kotlin, Flutter/Dart, and web/CSS)
• Covers M3 Expressive (May 2025) with an explicit per-platform matrix — see SKILL.md and references/typography-and-shape.md

This skill was created collaboratively between a human and Claude Code (Anthropic's coding agent). The information in the skill files is distilled from publicly available sources — it is not original design system documentation, but a curated reference assembled from official docs, library references, and training data.

Design token values, component specs, layout breakpoints, color roles, typography scales, and implementation patterns were gathered from:

• m3.material.io — Google's official Material Design 3 documentation
• Android Developers — Material Design 3 in Compose and AndroidX Compose Material3 API references
• Claude's training data — publicly available Material Design documentation, Flutter and Jetpack Compose documentation, @material/web references, and community guides
• @material/web — used to verify web component element names, attributes, and import paths where web guidance is included

1. Planning phase — Main SKILL.md plus focused reference files under references/.

2. Live site research — m3.material.io is often a JavaScript-rendered SPA; browser automation helps verify current token values, component lists, and Expressive updates.

3. Cross-referencing — Official Compose and Flutter docs fill in copy-paste APIs; web sections stay secondary.

4. Distillation — Token tables, component templates, and layout examples normalized for consistency.

5. Audit system — 10-category MD3 compliance audit adaptable to Compose, Flutter, or web source trees.

The skill is a best-effort distillation and may drift as Google updates the spec.

• Compose guidance is prioritized for currency; prefer official Android docs for exact API signatures and BOM versions.
• Web: Material Web is in maintenance mode; M3 Expressive is not on Web. Examples may lag; verify against the material-web repo.
• M3 Expressive (motion, emphasized type, shape morphing, new radii) varies by platform — see the Expressive sections in SKILL.md.
• Contributions and corrections are welcome.

Copy the skill into your Claude Code skills directory:

# Clone the repo
git clone https://github.com/hamen/material-3-skill.git

# Copy to Claude Code skills directory
cp -r material-3-skill ~/.claude/skills/material-3

Or symlink for easy updates:

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

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

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

/material-3 scaffold Create a responsive app shell with navigation

/material-3 audit [URL or file path]

The audit scores your app across 10 categories (color tokens, typography, shape, elevation, components, layout, navigation, motion, accessibility, theming) and produces a detailed report with specific fixes. Targets may be Compose/Kotlin, Flutter, or web — see SKILL.md for per-stack checks.

See CONTRIBUTING.md for platform hierarchy (Compose-first), Expressive rules, and a PR checklist so documentation stays consistent.

MIT