Tooluck logoTooluck
SKILL.md

material-3

Agent skill fromhamen/material-3-skill

Implement Google's Material Design 3 (Material You) UI system. Primary: Jetpack Compose Material3 (MaterialTheme, components, adaptive layout). Also Flutter and limited web (@material/web, maintenance mode). Covers tokens, 30+ components, layout, theming, M3 Expressive (platform matrix), and accessibility. Use when: "material design", "MD3", "material you", "Jetpack Compose", "MaterialTheme", "material component", "md3 button".

How to install material-3

install material-3
# install the material-3-skill pack with the skills CLI
npx skills add hamen/material-3-skill

# or add only this skill to Claude Code: copy the folder

skills/material-3/

# into

~/.claude/skills/material-3/ (all projects)

.claude/skills/material-3/ (one project)

skills/material-3/SKILL.md

MITFull file
1# Material Design 3
2
3This skill guides implementation of Google's Material Design 3 (MD3) — a personal, adaptive, expressive design system. MD3 uses dynamic color, tonal surfaces, rounded shapes, and spring-based motion to create UIs that feel alive and personal.
4
5## Philosophy
6
7MD3 is built on three principles:
8- **Personal**: Dynamic color adapts UI to the user's wallpaper or content. Theming is individual, not one-size-fits-all.
9- **Adaptive**: Layouts transform across 5 window size classes. Components resize, reposition, and change form factor responsively.
10- **Expressive**: Shape morphing, spring physics, and emphasized typography create moments of delight without sacrificing usability.
11
12## Current Updates: Google I/O 2026
13
14Material's [Google I/O 2026 update](https://m3.material.io/blog/whats-new-at-io26) reinforces a **Compose-first** Android path and expands expressive/adaptive guidance:
15
16- **Material Android is Compose-first**: For new Android work, prefer Jetpack Compose Material3 for the latest components, expressive APIs, adaptive scaffolds, and Styles API integration. Android Views may remain necessary in existing apps, but they should not be treated as the default path for new Material 3 implementations.
17- **Expressive layout system**: Use an expressive layout scaffold to adapt screens across mobile, desktop, foldables, watches, XR, and other spatial form factors. Start from adaptive scaffolds/window size classes instead of fixed phone-first layouts.
18…

Excerpt shown under the repository's MIT license.

Keep exploring

Similar skill repositories

thedotmack /

claude-mem
116k

Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More

CCCXGHGM+135 skills

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates