material-3

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's new
• 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

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: