Which material3 version does the skill target?

androidx.compose.material3 1.5.0-beta02. Every Kotlin sample in the skill is compiled against it in CI, and the API status page also covers 1.4.0 and the 1.5.0 alphas.

Do I still need @OptIn(ExperimentalMaterial3ExpressiveApi::class)?

Only for a few APIs. In 1.5.0-beta02, LoadingIndicator, ContainedLoadingIndicator, MaterialShapes with its toShape and toPath helpers, and a few small helpers still need it. ButtonGroup, ToggleButton, the FAB menu, floating toolbars and MaterialExpressiveTheme are stable.

Which agents does it work with?

Claude Code as a plugin, and Codex, Cursor, GitHub Copilot and other SKILL.md-aware agents through the skills CLI or by copying the folder.

Yes. The skill is MIT licensed, so you can use it in commercial projects.

Agent skill · material3 1.5.0-beta02

Material 3 Expressive Compose code your agent gets right

A skill for Claude Code, Codex, Cursor and Copilot. It knows which Expressive APIs are stable, which still need an opt-in, and what changed since 1.4.0. Every Kotlin sample it reads is compiled in CI.

Get started View on GitHub

The skill in 78 seconds. Download the MP4

Why agents get M3 Expressive wrong

Material 3 Expressive in Compose spans many material3 versions. API names changed between 1.5.0 alphas, most of Expressive was internal in 1.4.0, and almost all of it became stable in the 1.5.0 betas. An agent working from memory mixes these versions up. This skill gives it the facts for the version you actually use.

Invented APIsAgents guess names like ExpressiveButton or a shape parameter that doesn’t exist. The skill lists the real composables and their parameters, taken from the beta02 sources.

Wrong opt-insAgents add @OptIn to everything, or forget it on LoadingIndicator. The skill marks each API stable, opt-in or internal, for each version.

Deprecated codeListItem(headlineContent = …), the old SearchBar, TopSearchBar: deprecated in beta02. The skill gives the replacement for each.

Code that compilesAll 28 Kotlin samples live in a Gradle module that CI builds against material3 1.5.0-beta02. What the agent reads is code that built.

API status at a glance

API	1.4.0	1.5.0-beta02
`MaterialExpressiveTheme · MotionScheme.expressive()`	Internal	Stable
`Typography.*Emphasized · Shapes.largeIncreased`	Internal	Stable
`ButtonGroup · ToggleButton · SplitButtonLayout`	Not there	Stable
`FloatingActionButtonMenu · MediumFloatingActionButton`	Not there	Stable
`HorizontalFloatingToolbar · LargeFlexibleTopAppBar`	Not there	Stable
`ShortNavigationBar · WideNavigationRail`	Stable	Stable
`SegmentedListItem · LinearWavyProgressIndicator`	Not there	Stable
`LoadingIndicator · ContainedLoadingIndicator`	Not there	Opt-in
`MaterialShapes · RoundedPolygon.toShape()`	Not there	Opt-in

The full table, every deprecation, and how it was made: API status by version.

Make one screen expressive, not every pixel

Google’s research behind M3 Expressive found that people spotted key UI elements up to four times faster on expressive screens. So the skill treats expressive design as a way to guide attention, not as decoration. Pick the one primary action, give it a contrasting shape and the strongest color, and save the big moments for one or two places in the product. Read the design rules.

Selection changes shape as well as color: tonal rounded squares, and a primary pill for the selected one. Try it.

@Composable
fun PeriodPicker(options: List<String>) {
    var selected by rememberSaveable { mutableIntStateOf(0) }
    // Connected button group = single-select segmented control with expressive shapes.
    // Replaces SingleChoiceSegmentedButtonRow when you want the M3 Expressive look.
    FlowRow(horizontalArrangement = Arrangement.spacedBy(ButtonGroupDefaults.ConnectedSpaceBetween)) {
        options.forEachIndexed { index, label ->
            ToggleButton(
                checked = selected == index,
                onCheckedChange = { selected = index },
                shapes = when (index) {
                    0 -> ButtonGroupDefaults.connectedLeadingButtonShapes()
                    options.lastIndex -> ButtonGroupDefaults.connectedTrailingButtonShapes()
                    else -> ButtonGroupDefaults.connectedMiddleButtonShapes()
                },
                modifier = Modifier.weight(1f).semantics { role = Role.RadioButton },
            ) { Text(label) }
        }
    }
}

The 35 Material shapes

The skill also covers MaterialShapes. The shapes below are drawn from material3’s own polygon definitions, run through androidx.graphics.shapes. Click a shape to copy its Compose call.

Shapes and morphing in Compose →

Springs, not durations

MotionScheme.expressive() replaces fixed durations with springs. Spatial springs (size, position, corners) may overshoot. Effects springs (color, alpha) never do. Press play to compare them; the damping and stiffness values come straight from the material3 tokens.

Expressive · fast spatialdamping 0.6 · stiffness 800

Expressive · default spatialdamping 0.8 · stiffness 380

Standard · default spatialdamping 0.9 · stiffness 700

Effects · default (color, alpha)damping 1 · stiffness 1600

MotionScheme in depth →

Every Expressive component

ButtonsPress-morphing shapes and five sizes, from 32 to 136dp.Toggle buttonsOn/off buttons that change shape and color when checked.Button groupsConnected single-select groups and standard groups with overflow.Split buttonA main action plus a menu of related actions.Icon buttonsShape morph on press and toggle, five container sizes.FAB and FAB menuMedium FAB and the menu that replaces the speed dial.Floating toolbarThe bottom-bar replacement that hides on scroll.Flexible top app barMedium and large app bars with a subtitle slot.Navigation bar and railShortNavigationBar for phones, WideNavigationRail for tablets.Segmented listGrouped, rounded list items for settings screens.Progress and loadingWavy progress indicators and the shape-morphing LoadingIndicator.SearchThe state-based SearchBar that replaces the deprecated one.

Wavy progress and the loading indicator

Install

/plugin marketplace add sanikantv/m3-expressive-skill
/plugin install m3-expressive-compose@m3-expressive-skill

claude plugin marketplace add sanikantv/m3-expressive-skill
claude plugin install m3-expressive-compose@m3-expressive-skill

npx --yes skills add sanikantv/m3-expressive-skill --skill m3-expressive-compose -y

git clone https://github.com/sanikantv/m3-expressive-skill.git
cp -r m3-expressive-skill/skills/m3-expressive-compose .claude/skills/

Then ask your agent for UI work as usual, or call the skill directly:

/m3-expressive-compose build a settings screen with segmented list items and a floating toolbar
/m3-expressive-compose review app/src/main/java/com/example/HomeScreen.kt against M3 Expressive

Full setup guide →

Questions

Which APIs still need an opt-in?In 1.5.0-beta02: LoadingIndicator, MaterialShapes and a few helpers. The rest is stable.How do I add M3 Expressive to my app?Pin material3 1.5.0-beta02 and switch to MaterialExpressiveTheme.How is it different from other skills?It covers less design spec and more checked API facts, with compiled code.More questionsVersions, agents, Compose Multiplatform, license.

Built by Sanikant. Set in Google Sans Flex (SIL Open Font License), icons from Material Symbols (Apache 2.0). Material Design is a Google trademark; this project is not affiliated with Google.