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
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The skill consists only of instructions and design-system references
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/material-design-3-skillDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add hamen/material-3-skill --skill material-3 -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 14385f2
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .claude/skills
cp -R "$tmp/skills/material-3" .claude/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add hamen/material-3-skill --skill material-3 -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 14385f2
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add hamen/material-3-skill --skill material-3 -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 14385f2
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .github/skills
cp -R "$tmp/skills/material-3" .github/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add hamen/material-3-skill --skill material-3 -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 14385f2
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add hamen/material-3-skill --skill material-3 -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 14385f2
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .devin/skills
cp -R "$tmp/skills/material-3" .devin/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add hamen/material-3-skill --skill material-3 -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 14385f2
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .cline/skills
cp -R "$tmp/skills/material-3" .cline/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add hamen/material-3-skill --skill material-3 -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 14385f2
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .roo/skills
cp -R "$tmp/skills/material-3" .roo/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add hamen/material-3-skill --skill material-3 -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 14385f2
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3Commands for macOS and Linux, on Windows run them in Git Bash.
Install the skill: npx --yes skills add hamen/material-3-skill --skill material-3 -y. In Claude Code you can use the plugin flow: /plugin marketplace add hamen/material-3-skill, then /plugin install material-3@material-3-skill. Invoke with /material-3 component ...
Other ways from the author
npx --yes skills add hamen/material-3-skill --skill material-3 -yThe recommended path for Codex, Claude Code, Cursor and multi-agent setups. Needs npx and Node.js.
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.
Security check
- The skill consists only of instructions and design-system references
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.
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.
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.
Related
An MCP server and CLI from Sentry for building, running and testing Xcode iOS and macOS projects from an AI agent
Paul Hudson's skill for reviewing and writing SwiftUI for iOS 26: deprecated APIs, data flow, navigation, accessibility, performance
Expo's official agent skills: building, deploying, updating and debugging Expo and EAS apps
An open phone agent model and framework: it reads the screen and taps through Android, HarmonyOS and iOS apps from a text command