Material 3 Designer

Material 3 Designer scaffolds a complete, Compose-native Material 3 (Material You) design system into your Android project: a dynamic-color-aware ColorScheme, the full type scale, shape and motion tokens, and component defaults that already pass contrast and touch-target checks. It's built for Android developers and product designers who want a coherent M3 foundation in androidx.compose.material3 without hand-assembling every token.

When to use it

• You're starting a new Compose app and want a real theme, not the empty MaterialTheme stub from the project wizard.
• You're migrating from Material 2 (androidx.compose.material) and need the M3 equivalents for Colors → ColorScheme, Typography, and Shapes.
• You want dynamic color from the user's wallpaper on Android 12+ (dynamicLightColorScheme/dynamicDarkColorScheme) with a sensible static fallback.
• You need accessible defaults: 4.5:1 text contrast, 48dp touch targets, and content descriptions wired into component slots.

How it works

The skill generates a Theme.kt exposing your @Composable AppTheme(...) wrapper around MaterialTheme(colorScheme, typography, shapes, content). Color schemes are produced for light and dark with all M3 roles (primary, onPrimary, primaryContainer, surface, surfaceVariant, outline, etc.), and on supported API levels it branches to dynamicLightColorScheme(context). Typography fills the 15-style M3 scale (displayLarge through labelSmall) via TextStyle. Shapes map to Shapes(extraSmall, small, medium, large, extraLarge). Motion is expressed as duration/easing tokens aligned to M3's emphasized and standard easing curves for use with tween/AnimatedContent. Components (Button, Card, NavigationBar, TopAppBar) get themed defaults through their respective *Defaults objects.

Usage

curl -fsSL --create-dirs -o ~/.claude/skills/android-material3-designer/SKILL.md https://claudeskil.com/skills/android-material3-designer/SKILL.md

@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 -> DarkColors
        else -> LightColors
    }
    MaterialTheme(colorScheme, AppTypography, AppShapes, content)
}

Tips & gotchas

• Dynamic color overrides your brand palette on Android 12+. Pass dynamicColor = false where brand fidelity matters (e.g., onboarding, marketing surfaces).
• Edge-to-edge is expected in M3. Call enableEdgeToEdge() in your Activity and handle insets, or TopAppBar and NavigationBar will collide with system bars.
• Use MaterialTheme.colorScheme.surfaceColorAtElevation(...) rather than hardcoding elevated surface colors — M3 tints surfaces with primary, it doesn't just shadow them.
• Don't mix material and material3 imports; the two MaterialTheme symbols clash and silently fall back to defaults.

FAQ

Does this require Material 2 to be removed? No, but you should drop the androidx.compose.material dependency once migrated to avoid import ambiguity. Keep material-icons-extended if you use it.

Can I customize the generated palette? Yes. Edit the lightColorScheme(...)/darkColorScheme(...) role values; the skill keeps them in one file so contrast pairs (primary/onPrimary) stay together.

What's the minimum setup? Compose BOM with androidx.compose.material3 and minSdk 21+; dynamic color simply no-ops below API 31 and uses your static scheme.