Material Design 3 Skill
A Material Design 3 skill for coding agents: tokens, more than 30 components, theming, adaptive layout and a compliance audit, Jetpack Compose first
- 1,571 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill consists only of instructions and design-system references
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/material-design-3-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists only of instructions and design-system references
This is third-party code. Review the repository files before installing.
What it does
The skill gives the agent a reference for Google's Material Design 3 system so it can generate interfaces with correct tokens, components, theming, layout and accessibility. The primary focus is Jetpack Compose, Flutter is covered secondarily, and web via the @material/web package is marked as limited because it is in maintenance mode and lacks some expressive features. The catalog holds more than 30 components with Compose and web element mappings. An audit mode scores an interface across ten categories, from color tokens and typography to navigation, motion and accessibility, and returns a report with specific fixes. The material covers M3 Expressive and the Google I/O 2026 updates. The author notes it is a distillation of public sources, not official documentation.
Who it is for. For developers and designers on Jetpack Compose, Flutter or web who need a Material Design 3 interface.
Good fit when
- You need to build a Material Design 3 component or screen with correct tokens
- You need to generate a theme from a seed color or scaffold an app shell
- You need to audit an existing interface for Material Design 3 compliance
Not a fit when
- The project does not use Material Design
- You need exact API signatures and library versions, which are better taken from the official Android docs
Example request
Build a Material Design 3 login form with email and password fields in Jetpack ComposeLimitations
It is a distillation of public sources, not official documentation, so content may lag behind spec updates. The web path is limited: the @material/web package is in maintenance mode and M3 Expressive is not implemented for web. Exact API signatures and versions for Compose are best checked against the Android docs. It needs an agent that can load SKILL.md files.
How to disable. Remove the material-3 skill via /plugin if you installed it as a plugin, or delete or unlink the skills/material-3 folder from your agent's skills directory.
FAQ
Which platform is primary?
Jetpack Compose. Flutter is covered secondarily, and web via @material/web is marked as limited since it is in maintenance mode and lacks M3 Expressive.
Can I trust the token values?
It is a distillation of public sources, useful as a quick reference. Check exact API signatures and library versions against the official Android docs.
Discussion
No questions or reviews yet.
Related
SkillsAn Android skill covering modular architecture, Compose, Material 3, accessibility and Kotlin migrations.
Official set of 30 skills from the Android team: Jetpack Compose, AGP 9 upgrade, R8, Perfetto profiling, Navigation 3, CameraX, Google Play policies
Forty Flutter skills for AI agents: architecture, Riverpod 3, tests, persistence, i18n, accessibility and store shipping.
Awesome Android Agent Skills
awesome-android-agent-skills
Skills for modern Android development for Copilot, Claude, Gemini and Cursor: Kotlin, Jetpack Compose, architecture, Hilt, Room
A skill for Jetpack Compose and Compose Multiplatform: the agent writes UI from references and checks it against androidx source
21 skills for Android and KMP in Claude Code, Codex and Copilot CLI: Compose, coroutines, Flow, networking, storage, Gradle
README in short
The README describes a Material Design 3 skill for agents that load SKILL.md files, focused on Jetpack Compose, with Flutter secondary and web via @material/web limited. It ships the main SKILL.md and references for color, components, theming, typography, navigation and adaptive layout, a catalog of more than 30 components and a ten-category audit mode. M3 Expressive and the Google I/O 2026 updates are included. It installs via npx skills or as a Claude Code plugin from the marketplace.json manifest, and for Codex and other agents by symlinking the skills/material-3 folder. The material is assembled from public sources, MIT licensed.
README badge
Original SKILL.md
--- name: material-3 description: > 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". user-invokable: true argument-hint: "[component|theme|layout|scaffold|audit] [description or URL]" --- # Material Design 3 This 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. ## Philosophy MD3 is built on three principles: - Personal: Dynamic color adapts UI to the user's wallpaper or content. Theming is individual, not one-size-fits-all. - Adaptive: Layouts transform across 5 window size classes. Components resize, reposition, and change form factor responsively. - Expressive: Shape morphing, spring physics, and emphasized typography create moments of delight without sacrificing usability.