> android-design-system
Enforce Material Design 3 and design token usage in Jetpack Compose apps. Use when implementing M3 components, color schemes, or design tokens in Android. (triggers: **/*Screen.kt, **/ui/theme/**, **/compose/**, MaterialTheme, Color, Typography, Modifier, Composable)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/android-design-system?format=md"Android Design System (Jetpack Compose)
Priority: P2 (OPTIONAL)
Enforce Material Design 3 tokens in Jetpack Compose. Use MaterialTheme for consistency.
Token Structure
// ui/theme/Color.kt
val Primary = Color(0xFF2196F3)
val Secondary = Color(0xFF9C27B0)
val Background = Color(0xFFFFFFFF)
// ui/theme/Theme.kt
private val LightColorScheme = lightColorScheme(
primary = Primary,
secondary = Secondary,
background = Background
)
// ui/theme/Type.kt
val Typography = Typography(
headlineLarge = TextStyle(fontSize = 32.sp, fontWeight = FontWeight.Bold),
bodyMedium = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Normal)
)
Usage
// ❌ FORBIDDEN
Box(modifier = Modifier.background(Color(0xFF2196F3)))
Text("Title", fontSize = 32.sp, color = Color.Black)
// ✅ ENFORCED
Box(modifier = Modifier.background(MaterialTheme.colorScheme.primary))
Text("Title", style = MaterialTheme.typography.headlineLarge)
Spacer(modifier = Modifier.height(16.dp)) // Use dp units
Anti-Patterns
- No Hardcoded Colors: Use
Color(0xFF...)→ Error. UseMaterialTheme.colorScheme.*. - No Inline Typography: Define
fontSize = 32.sp→ Error. UseMaterialTheme.typography.*. - No Magic Spacing: Use
padding = 16.dpinline → Acceptable, but consider tokens.
Related Topics
mobile-ux-core | android/compose
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)