Guide for implementing Material Design 3 (Material You). Use when designing Android apps, implementing dynamic theming, or following Material component patterns.
Applies Material Design 3 principles for dynamic theming and component implementation.
npx claudepluginhub vinnie357/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Apply Google's Material Design 3 principles when designing and developing user interfaces with emphasis on personalization, accessibility, and cross-platform consistency.
Use this skill when:
Material Design 3 (Material You) represents Google's latest design system with:
| Aspect | MD2 | MD3 |
|---|---|---|
| Colors | Fixed brand palettes | Dynamic, user-generated schemes |
| Customization | Limited theming | Highly personalized |
| Components | Flat, rigid shapes | Rounded, expressive |
| Accessibility | Basic support | Priority built-in |
Material Design 3 uses HCT (Hue, Chroma, Tone) color space for perceptually accurate color generation.
Key concepts:
For detailed color system implementation, see references/color-system.md.
Type scale with 5 display sizes and 9 text sizes:
Quick example:
For complete typography system and responsive scaling, see references/typography.md.
Responsive breakpoints and grid system:
For layout guidelines and examples, see references/layout.md.
Material Design 3 provides specifications for:
For detailed component specifications, consult references/components.md.
// Jetpack Compose
Button(onClick = { }) {
Text("Filled Button")
}
OutlinedButton(onClick = { }) {
Text("Outlined Button")
}
Card(
modifier = Modifier.fillMaxWidth(),
elevation = CardDefaults.cardElevation(defaultElevation = 6.dp)
) {
Column(modifier = Modifier.padding(16.dp)) {
Text("Card Title", style = MaterialTheme.typography.headlineSmall)
Text("Card content", style = MaterialTheme.typography.bodyMedium)
}
}
OutlinedTextField(
value = text,
onValueChange = { text = it },
label = { Text("Label") },
supportingText = { Text("Helper text") }
)
For more component examples and patterns, see references/components.md.
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colorScheme = when {
dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
darkTheme -> darkColorScheme()
else -> lightColorScheme()
}
MaterialTheme(
colorScheme = colorScheme,
typography = Typography,
content = content
)
For web implementation with Material Web Components, see references/web-implementation.md.
Material Design 3 motion principles:
For motion specifications, see references/motion.md.
Material Design 3 prioritizes accessibility:
For accessibility implementation details, see references/accessibility.md.
references/color-system.mdreferences/typography.mdreferences/layout.mdreferences/components.mdreferences/web-implementation.mdreferences/motion.mdreferences/accessibility.mdActivates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
This skill should be used when the user wants to "create a skill", "add a skill to plugin", "write a new skill", "improve skill description", "organize skill content", or needs guidance on skill structure, progressive disclosure, or skill development best practices for Claude Code plugins.