メニュー
Guide for implementing Material Design 3 (Material You). Use when designing Android apps, implementing dynamic theming, or following Material component patterns.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Guide for creating Agent Skills with progressive disclosure and best practices. Use when creating new skills, understanding skill structure, or implementing progressive disclosure.
Guide for using mise to manage development tools and runtime versions. Use when configuring project tooling, managing environment variables, or defining project tasks.
Guide for using Nushell for structured data pipelines and scripting. Use when writing shell scripts, processing structured data, or working with cross-platform automation.
Guide for 12-Factor cloud-native applications. Use when designing microservices, configuring containers, deploying to Kubernetes, or following cloud-native patterns.
Guide for creating custom slash commands for Claude Code. Use when adding a new slash command, writing $ARGUMENTS or $N argument substitutions, setting argument-hint or arguments in command frontmatter, choosing command frontmatter fields, injecting shell output into a command, or migrating .claude/commands/ files to skills.
Guide for implementing web accessibility (WCAG). Use when designing UI components, reviewing interfaces for accessibility, or ensuring compliance with W3C WAI standards.
| name | material-design |
| description | Guide for implementing Material Design 3 (Material You). Use when designing Android apps, implementing dynamic theming, or following Material component patterns. |
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:
Type scale with 5 display sizes and 9 text sizes:
Quick example:
Responsive breakpoints and grid system:
Material Design 3 provides specifications for:
Full specifications for every component live at m3.material.io (linked under Resources).
// 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") }
)
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
)
Use Material Web Components (linked under Resources) for web implementation.
Material Design 3 motion principles:
Material Design 3 prioritizes accessibility:
Load /core:accessibility for WCAG implementation guidance.