# material-3-expressive

A skill for designing and reviewing Android UI with Material 3 Expressive: picks component tokens, sets hierarchy, motion, color and shape.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 502 installs · ★ 11
- Author: Albermonte
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Albermonte/android-skills/tree/HEAD/skills/material-3-expressive/SKILL.md
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/skills/material-3-expressive

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Albermonte/android-skills --skill material-3-expressive -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/material-3-expressive/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/material-3-expressive/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Albermonte/android-skills --skill material-3-expressive -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/material-3-expressive/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Albermonte/android-skills --skill material-3-expressive -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/material-3-expressive/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Albermonte/android-skills material-3-expressive
```

2. **Manually: put the files in place**
- File: `.github/skills/material-3-expressive/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Albermonte/android-skills --skill material-3-expressive -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Albermonte/android-skills --path skills/material-3-expressive
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/material-3-expressive/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Albermonte/android-skills --skill material-3-expressive -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Albermonte/android-skills/tree/HEAD/skills/material-3-expressive/SKILL.md

## When to use it
- 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
- 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

## Similar
- [mobile-android-design](https://affpapa.org/en/nevibecode/skills/mobile-android-design.md) — skill · 24847 installs
- [expressive](https://affpapa.org/en/nevibecode/skills/expressive.md) — skill · 2300 installs
- [material-3](https://affpapa.org/en/nevibecode/skills/material-3.md) — skill · 3300 installs
- [android-design-guidelines](https://affpapa.org/en/nevibecode/skills/android-design-guidelines.md) — skill · 1700 installs
- [ui-mobile](https://affpapa.org/en/nevibecode/skills/ui-mobile.md) — skill · 1200 installs
- [platform-conventions](https://affpapa.org/en/nevibecode/skills/platform-conventions.md) — skill · 1100 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md