npx claudepluginhub vinnie357/claude-skills --plugin coreThis skill uses the workspace's default tool permissions.
Apply Google's Material Design 3 principles when designing and developing user interfaces with emphasis on personalization, accessibility, and cross-platform consistency.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
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.md