Install the M3 Expressive skill

The skill is a folder with a SKILL.md and seven reference files. Your agent reads the short SKILL.md on every Compose UI task, and opens a reference file only when it needs it.

1. Install it

Claude Code

Inside a Claude Code session

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

Or from your shell

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

Codex · Cursor · Copilot

skills CLI (works with most agents)

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

Copy the folder

Project-level skill (or copy into ~/.claude/skills/)

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

Check that it loaded. In Claude Code, /m3-expressive-compose should appear when you type /m3.

2. Point your project at material3 1.5.0

Expressive needs material3 1.5.0. In 1.4.0 most of it is internal. The skill checks your version first and tells you if it is too old, but you can set it up now:

gradle/libs.versions.toml

[versions]
material3 = "1.5.0-beta02"

[libraries]
androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }

A Compose BOM won’t move material3 to a beta, so pin it explicitly as above.

3. Switch the theme

ui/theme/Theme.kt

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit,
) {
    val context = LocalContext.current
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S ->
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        darkTheme -> darkColorScheme()
        else -> expressiveLightColorScheme()
    }
    MaterialExpressiveTheme(
        colorScheme = colorScheme,
        motionScheme = MotionScheme.expressive(),
        content = content,
    )
}

4. Ask for something

Build a settings screen with segmented list items, a large flexible top app bar,
and a floating toolbar with a FAB.

/m3-expressive-compose review app/src/main/java/com/example/HomeScreen.kt

What you should see the agent do:

• Read material3 from your version catalog before writing code.
• Use SegmentedListItem with ListItemDefaults.segmentedShapes(index, count), not cards of ListItems.
• Add @OptIn(ExperimentalMaterial3ExpressiveApi::class) only where it uses LoadingIndicator or MaterialShapes.
• Animate with MaterialTheme.motionScheme springs, not tween(300).

What to read next

• Expressive design rules: what the skill changes when you say “make it expressive”.
• API status by version: stable, opt-in, internal and deprecated.
• Components: code and live demos for every Expressive component.