material-3-expressive — Claude Code skill: Android UI design
A skill for designing and reviewing Android UI with Material 3 Expressive: picks component tokens, sets hierarchy, motion, color and shape.
npx skills add Albermonte/android-skills --skill material-3-expressive -a claude-codeWhat material-3-expressive does
The skill makes the agent take design decisions in Material 3 Expressive instead of just writing code. It prioritises component-token requests: dialogs, sheets, modals, toolbars, buttons. By default it returns guidance plus token references.
Inside is a step-by-step flow: first it confirms device class, window size class, brand constraints and dynamic color, primary actions and hero moments. Then it loads the token index and output template, component specs, and foundation tokens when theming is needed. A common-mistakes table covers removed labels, too many hero moments, broken navigation and hardcoded token values.
The skill is Android-only. Non-Android platforms, non-UI tasks and implementation-only requests without design decisions are out of scope. The review checklist asks for 4.5:1 text contrast and 3:1 non-text contrast, touch targets of at least 48dp, and a reduced-motion alternative. If system animation scale is 0, the skill expects instant transitions rather than shape morphing.
What it helps with
- pick tokens for dialogs, sheets and toolbars
- set type and color hierarchy for M3 Expressive
- review an Android screen against the accessibility checklist
- choose an expressive intensity level for a screen
- add a reduced-motion fallback for animations
Example prompts for the agent
- Pick Material 3 Expressive tokens for a bottom sheet on a phone
- Review this Android screen against M3 Expressive guidance
- Set the hero moment and intensity level for the onboarding screen
How to install material-3-expressive
1Skills CLI (Vercel)
npx skills add Albermonte/android-skills --skill material-3-expressive -a claude-code2Manually: put the files in place
~/.claude/skills/material-3-expressive/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/material-3-expressive/
1Skills CLI (Vercel)
npx skills add Albermonte/android-skills --skill material-3-expressive -a codex2Manually: put the files in place
.agents/skills/material-3-expressive/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Albermonte/android-skills --skill material-3-expressive -a cursor2Manually: put the files in place
.cursor/skills/material-3-expressive/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Albermonte/android-skills material-3-expressive2Manually: put the files in place
.github/skills/material-3-expressive/SKILL.md1Skills CLI (Vercel)
npx skills add Albermonte/android-skills --skill material-3-expressive -a gemini-cli2Platform CLI
gemini skills install https://github.com/Albermonte/android-skills --path skills/material-3-expressiveManually: put the files in place
.devin/skills/material-3-expressive/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Albermonte/android-skills --skill material-3-expressive -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about material-3-expressive
How do I install material-3-expressive in Claude?
Run npx skills add Albermonte/android-skills --skill material-3-expressive -a claude-code. The skill lands in ~/.claude/skills/material-3-expressive/SKILL.md.
What does material-3-expressive do?
It helps the agent design and review Android UI with Material 3 Expressive: component tokens, hierarchy, motion, color, shape and typography.
Which platforms does the skill support?
Android only. It is not meant for non-Android platforms or tasks without design decisions.
