Material Design 3 Skill
Version 1.1.0 · released 2026-05-20 — Adds Google I/O 2026 Material guidance for expressive layout, spacing, Compose-first Android, and updated expressive components.
A comprehensive skill for AI coding assistants that can load SKILL.md files, covering Google's Material Design 3 (Material You) UI system.
What's new
1.1.0 — 2026-05-20
Updated — Google I/O 2026 Material guidance.
- Added notes from What’s new at Google I/O 2026: Expressive layout/scaffold, the 8dp spacing system, watch/XR form factors, expressive lists and menus, Compose-first Material Android, and expressive search/search app bar.
Read the full release notes: v1.1.0.
1.0.0 — 2026-05-20
Added — portable skill packaging.
- Claude Code one-command install: install directly with
claude plugin install github:hamen/material-3-skill.
- Portable skill layout: the skill now lives at
skills/material-3/SKILL.md, with references under skills/material-3/references/.
- Plugin manifest:
.claude-plugin/plugin.json declares the material-3 plugin metadata for Claude Code while keeping the skill content usable by other skill-aware assistants.
Read the full release notes: v1.0.0.
Table of contents
What it does
- Guides AI coding assistants 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
skills/material-3/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 plus the Google I/O 2026 layout/component updates — see SKILL.md, layout-and-responsive.md, and typography-and-shape.md
Platform support
| Platform | Role in this skill | Notes |
|---|
| Jetpack Compose | Primary | Best match for current Material 3 implementation APIs, Expressive motion where available, adaptive navigation |
| Flutter | Secondary | ThemeData(useMaterial3: true), ColorScheme.fromSeed, community packages for dynamic color |
| Web | Limited | @material/web + CSS custom properties; maintenance mode; no full Expressive parity |
How this skill was built
This skill was created collaboratively between a human and an AI 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.
Sources
Design token values, component specs, layout breakpoints, color roles, typography scales, and implementation patterns were gathered from:
