{"id":"4f2c950d-9c87-477a-9a97-fa7889deeaa2","shortId":"3F9TMv","kind":"skill","title":"design-system","tagline":"27 Android skills for AI agents (Claude Code, Codex, Cursor). Fixes Supabase auth, Hilt errors, design inconsistency, kapt→ksp, missing UiState states. Reduced my token bills 5×. FitGenZ AI shipped in 18 days.","description":"# Design System — Global Level (M3 Expressive)\r\n\r\nMaterial 3 Expressive is Google's most advanced design language — physics-based motion,\r\nHCT color science, shape morphing, and a full token architecture. These rules make\r\nAI-built apps feel professional, personal, and visually unified across every screen.\r\n\r\n## Token architecture — single source of truth\r\n\r\n```kotlin\r\n// ui/theme/tokens/DesignTokens.kt — define once, reference everywhere\r\n\r\nobject Spacing {\r\n    val none  = 0.dp\r\n    val xs    = 4.dp    // micro: badges, icon gaps\r\n    val sm    = 8.dp    // tight: list item gaps\r\n    val md    = 16.dp   // standard: screen padding, card padding\r\n    val lg    = 24.dp   // section: gaps between content groups\r\n    val xl    = 32.dp   // large: hero padding\r\n    val xxl   = 48.dp   // extra: section breaks\r\n    val xxxl  = 64.dp   // massive: onboarding, splash\r\n}\r\n\r\nobject Elevation {\r\n    val none   = 0.dp   // flat — standard cards\r\n    val level1 = 1.dp   // slightly raised\r\n    val level2 = 3.dp   // FAB, raised cards\r\n    val level3 = 6.dp   // dialogs\r\n    val level4 = 8.dp   // navigation drawers\r\n    val level5 = 12.dp  // tooltips\r\n}\r\n\r\n// M3 Expressive motion duration tokens (replaces ALL hardcoded ms)\r\nobject Duration {\r\n    const val short1      = 50    // micro: icon swap\r\n    const val short2      = 100   // fast: color shift\r\n    const val short3      = 150   // quick: appear short distance\r\n    const val short4      = 200   // standard fade\r\n    const val medium1     = 250   // expand/collapse\r\n    const val medium2     = 300   // default transition\r\n    const val medium3     = 350   // complex motion\r\n    const val medium4     = 400   // enter from edge\r\n    const val long1       = 450   // large surface\r\n    const val long2       = 500   // full-screen takeover\r\n    const val extraLong1  = 700   // emphasis / delight\r\n}\r\n\r\n// M3 Expressive easing curves (physics-based)\r\nobject AppEasing {\r\n    val Standard        = CubicBezierEasing(0.2f, 0f, 0f, 1f)\r\n    val EmphasizedDecel = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)  // new content entering\r\n    val EmphasizedAccel = CubicBezierEasing(0.3f, 0f, 0.8f, 0.15f)  // content leaving\r\n    val Linear          = LinearEasing\r\n}\r\n```\r\n\r\n## Theme setup — dynamic color + MotionScheme\r\n\r\n```kotlin\r\n// ui/theme/AppTheme.kt\r\n@Composable\r\nfun AppTheme(\r\n    darkTheme: Boolean = isSystemInDarkTheme(),\r\n    dynamicColor: Boolean = true,\r\n    content: @Composable () -> Unit\r\n) {\r\n    val colorScheme = when {\r\n        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {\r\n            val context = LocalContext.current\r\n            if (darkTheme) dynamicDarkColorScheme(context)\r\n            else dynamicLightColorScheme(context)\r\n        }\r\n        darkTheme -> AppDarkColorScheme\r\n        else      -> AppLightColorScheme\r\n    }\r\n\r\n    val view = LocalView.current\r\n    if (!view.isInEditMode) {\r\n        SideEffect {\r\n            val window = (view.context as Activity).window\r\n            WindowCompat.getInsetsController(window, view).apply {\r\n                isAppearanceLightStatusBars = !darkTheme\r\n                isAppearanceLightNavigationBars = !darkTheme\r\n            }\r\n        }\r\n    }\r\n\r\n    MaterialTheme(\r\n        colorScheme = colorScheme,\r\n        typography = AppTypography,\r\n        shapes = AppShapes,\r\n        content = content\r\n    )\r\n}\r\n```\r\n\r\n## Color system — HCT-generated M3 palette\r\n\r\n```kotlin\r\n// ui/theme/AppColorScheme.kt\r\n// Generate yours at: material-foundation.com/tools/theme-builder\r\n// M3 uses HCT (Hue/Chroma/Tone) — perceptually uniform, WCAG contrast by construction\r\n\r\nprivate val AppLightColorScheme = lightColorScheme(\r\n    primary               = Color(0xFF1A73E8),\r\n    onPrimary             = Color(0xFFFFFFFF),\r\n    primaryContainer      = Color(0xFFD3E3FD),\r\n    onPrimaryContainer    = Color(0xFF041E49),\r\n    secondary             = Color(0xFF5F6368),\r\n    onSecondary           = Color(0xFFFFFFFF),\r\n    secondaryContainer    = Color(0xFFE8EAED),\r\n    onSecondaryContainer  = Color(0xFF202124),\r\n    tertiary              = Color(0xFF006E56),\r\n    onTertiary            = Color(0xFFFFFFFF),\r\n    tertiaryContainer     = Color(0xFF7AF8D3),\r\n    onTertiaryContainer   = Color(0xFF002117),\r\n    error                 = Color(0xFFB3261E),\r\n    onError               = Color(0xFFFFFFFF),\r\n    errorContainer        = Color(0xFFF9DEDC),\r\n    onErrorContainer      = Color(0xFF410E0B),\r\n    background            = Color(0xFFFEFBFF),\r\n    onBackground          = Color(0xFF1C1B1F),\r\n    surface               = Color(0xFFFEFBFF),\r\n    onSurface             = Color(0xFF1C1B1F),\r\n    surfaceVariant        = Color(0xFFE7E0EC),\r\n    onSurfaceVariant      = Color(0xFF49454F),\r\n    outline               = Color(0xFF79747E),\r\n    outlineVariant        = Color(0xFFCAC4D0),\r\n    // Surface container hierarchy — tonal elevation without shadows\r\n    surfaceContainerLowest  = Color(0xFFFFFFFF),\r\n    surfaceContainerLow     = Color(0xFFF7F2FA),\r\n    surfaceContainer        = Color(0xFFF3EDF7),\r\n    surfaceContainerHigh    = Color(0xFFECE6F0),\r\n    surfaceContainerHighest = Color(0xFFE6E0E9),\r\n)\r\n\r\nprivate val AppDarkColorScheme = darkColorScheme(\r\n    primary               = Color(0xFFAECBFA),\r\n    onPrimary             = Color(0xFF0A3775),\r\n    primaryContainer      = Color(0xFF2860C4),\r\n    onPrimaryContainer    = Color(0xFFD3E3FD),\r\n    secondary             = Color(0xFFBCC7DC),\r\n    onSecondary           = Color(0xFF263141),\r\n    surface               = Color(0xFF141218),\r\n    onSurface             = Color(0xFFE6E1E5),\r\n    surfaceVariant        = Color(0xFF49454F),\r\n    onSurfaceVariant      = Color(0xFFCAC4D0),\r\n    surfaceContainerLowest  = Color(0xFF0F0D13),\r\n    surfaceContainerLow     = Color(0xFF1D1B20),\r\n    surfaceContainer        = Color(0xFF211F26),\r\n    surfaceContainerHigh    = Color(0xFF2B2930),\r\n    surfaceContainerHighest = Color(0xFF36343B),\r\n    error                 = Color(0xFFF2B8B5),\r\n    errorContainer        = Color(0xFF8C1D18),\r\n    outline               = Color(0xFF938F99),\r\n    outlineVariant        = Color(0xFF49454F),\r\n)\r\n```\r\n\r\n## Typography — M3 Expressive 15-style scale\r\n\r\n```kotlin\r\n// ui/theme/AppTypography.kt\r\nprivate val BrandFont = FontFamily(\r\n    Font(R.font.brand_regular,  FontWeight.Normal),\r\n    Font(R.font.brand_medium,   FontWeight.Medium),\r\n    Font(R.font.brand_semibold, FontWeight.SemiBold),\r\n    Font(R.font.brand_bold,     FontWeight.Bold),\r\n)\r\n\r\nval AppTypography = Typography(\r\n    displayLarge  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Normal,  fontSize = 57.sp, lineHeight = 64.sp,  letterSpacing = (-0.25).sp),\r\n    displayMedium = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Normal,  fontSize = 45.sp, lineHeight = 52.sp),\r\n    displaySmall  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Normal,  fontSize = 36.sp, lineHeight = 44.sp),\r\n    headlineLarge  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.SemiBold, fontSize = 32.sp, lineHeight = 40.sp),\r\n    headlineMedium = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.SemiBold, fontSize = 28.sp, lineHeight = 36.sp),\r\n    headlineSmall  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.SemiBold, fontSize = 24.sp, lineHeight = 32.sp),\r\n    titleLarge  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Medium, fontSize = 22.sp, lineHeight = 28.sp),\r\n    titleMedium = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Medium, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp),\r\n    titleSmall  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 20.sp, letterSpacing = 0.1.sp),\r\n    bodyLarge  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.5.sp),\r\n    bodyMedium = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 20.sp, letterSpacing = 0.25.sp),\r\n    bodySmall  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Normal, fontSize = 12.sp, lineHeight = 16.sp, letterSpacing = 0.4.sp),\r\n    labelLarge  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 20.sp, letterSpacing = 0.1.sp),\r\n    labelMedium = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Medium, fontSize = 12.sp, lineHeight = 16.sp, letterSpacing = 0.5.sp),\r\n    labelSmall  = TextStyle(fontFamily = BrandFont, fontWeight = FontWeight.Medium, fontSize = 11.sp, lineHeight = 16.sp, letterSpacing = 0.5.sp),\r\n)\r\n\r\n// ✅ Always use theme styles — never hardcode font size\r\nText(\"Screen title\", style = MaterialTheme.typography.titleLarge)\r\nText(\"Body text\", style = MaterialTheme.typography.bodyMedium)\r\nText(\"Button label\", style = MaterialTheme.typography.labelLarge)\r\n\r\n// ❌ Never hardcode\r\nText(\"Wrong\", fontSize = 18.sp, fontWeight = FontWeight.Bold)\r\n```\r\n\r\n## Shape system — M3 10-step scale + asymmetric shapes\r\n\r\n```kotlin\r\n// ui/theme/AppShapes.kt\r\nval AppShapes = Shapes(\r\n    extraSmall = RoundedCornerShape(4.dp),    // chips, small tags\r\n    small      = RoundedCornerShape(8.dp),    // text fields, tooltips\r\n    medium     = RoundedCornerShape(12.dp),   // cards, menus\r\n    large      = RoundedCornerShape(16.dp),   // bottom sheets\r\n    extraLarge = RoundedCornerShape(28.dp),   // nav drawer, large dialogs\r\n)\r\n\r\n// M3 Expressive asymmetric shapes — personality and directional emphasis\r\nobject AsymmetricShapes {\r\n    val topRounded    = RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp, bottomStart = 4.dp, bottomEnd = 4.dp)\r\n    val bottomRounded = RoundedCornerShape(topStart = 4.dp, topEnd = 4.dp, bottomStart = 28.dp, bottomEnd = 28.dp)\r\n    val startRounded  = RoundedCornerShape(topStart = 28.dp, bottomStart = 28.dp, topEnd = 4.dp, bottomEnd = 4.dp)\r\n    val full          = RoundedCornerShape(50)  // pills, FABs, avatars\r\n}\r\n```\r\n\r\n## Component library — standard across every screen\r\n\r\n```kotlin\r\n// ✅ AppButton — 5 variants, consistent 48dp height, loading state\r\nenum class AppButtonVariant { Filled, Tonal, Outlined, Ghost, Destructive }\r\n\r\n@Composable\r\nfun AppButton(\r\n    text: String, onClick: () -> Unit,\r\n    modifier: Modifier = Modifier,\r\n    variant: AppButtonVariant = AppButtonVariant.Filled,\r\n    leadingIcon: ImageVector? = null,\r\n    isLoading: Boolean = false,\r\n    enabled: Boolean = true,\r\n) {\r\n    val enabled2 = enabled && !isLoading\r\n    val shape = MaterialTheme.shapes.small\r\n    val content: @Composable RowScope.() -> Unit = {\r\n        AnimatedContent(isLoading, label = \"btnContent\") { loading ->\r\n            if (loading) CircularProgressIndicator(Modifier.size(20.dp), strokeWidth = 2.dp, color = LocalContentColor.current)\r\n            else Row(verticalAlignment = Alignment.CenterVertically) {\r\n                if (leadingIcon != null) { Icon(leadingIcon, null, Modifier.size(18.dp)); Spacer(Modifier.width(Spacing.xs)) }\r\n                Text(text, style = MaterialTheme.typography.labelLarge)\r\n            }\r\n        }\r\n    }\r\n    val mod = modifier.height(48.dp)\r\n    when (variant) {\r\n        AppButtonVariant.Filled      -> Button(onClick, mod, enabled = enabled2, shape = shape, content = content)\r\n        AppButtonVariant.Tonal       -> FilledTonalButton(onClick, mod, enabled = enabled2, shape = shape, content = content)\r\n        AppButtonVariant.Outlined    -> OutlinedButton(onClick, mod, enabled = enabled2, shape = shape, content = content)\r\n        AppButtonVariant.Ghost       -> TextButton(onClick, mod, enabled = enabled2, content = content)\r\n        AppButtonVariant.Destructive -> Button(onClick, mod, enabled = enabled2, shape = shape,\r\n            colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.errorContainer,\r\n                contentColor = MaterialTheme.colorScheme.onErrorContainer), content = content)\r\n    }\r\n}\r\n\r\n// ✅ AppCard — 3 variants\r\nenum class CardVariant { Filled, Elevated, Outlined }\r\n\r\n@Composable\r\nfun AppCard(modifier: Modifier = Modifier, onClick: (() -> Unit)? = null, variant: CardVariant = CardVariant.Filled, content: @Composable ColumnScope.() -> Unit) {\r\n    val inner: @Composable () -> Unit = { Column(Modifier.padding(Spacing.md), content = content) }\r\n    val shape = MaterialTheme.shapes.medium\r\n    if (onClick != null) when (variant) {\r\n        CardVariant.Elevated -> ElevatedCard(onClick, modifier, shape = shape) { inner() }\r\n        CardVariant.Outlined -> OutlinedCard(onClick, modifier, shape = shape) { inner() }\r\n        else -> Card(onClick, modifier, shape = shape, elevation = CardDefaults.cardElevation(0.dp),\r\n            colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh)) { inner() }\r\n    } else Card(modifier = modifier, shape = shape, elevation = CardDefaults.cardElevation(0.dp),\r\n        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh)) { inner() }\r\n}\r\n\r\n// ✅ AppTextField — error state, support text, icons\r\n@Composable\r\nfun AppTextField(\r\n    value: String, onValueChange: (String) -> Unit, label: String,\r\n    modifier: Modifier = Modifier,\r\n    supportingText: String? = null, isError: Boolean = false, errorText: String? = null,\r\n    leadingIcon: ImageVector? = null, trailingIcon: (@Composable () -> Unit)? = null,\r\n    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,\r\n    singleLine: Boolean = true,\r\n    visualTransformation: VisualTransformation = VisualTransformation.None,\r\n) {\r\n    OutlinedTextField(\r\n        value = value, onValueChange = onValueChange, label = { Text(label) },\r\n        isError = isError, singleLine = singleLine,\r\n        visualTransformation = visualTransformation,\r\n        leadingIcon = leadingIcon?.let { { Icon(it, null) } },\r\n        trailingIcon = trailingIcon,\r\n        supportingText = when {\r\n            isError && errorText != null -> { { Text(errorText, color = MaterialTheme.colorScheme.error) } }\r\n            supportingText != null -> { { Text(supportingText) } }\r\n            else -> null\r\n        },\r\n        keyboardOptions = keyboardOptions,\r\n        shape = MaterialTheme.shapes.small,\r\n        modifier = modifier.fillMaxWidth()\r\n    )\r\n}\r\n```\r\n\r\n## Motion tokens — physics-based, M3 Expressive\r\n\r\n```kotlin\r\n// ui/theme/tokens/MotionTokens.kt\r\nobject MotionTokens {\r\n    // Spatial — elements that move or scale (use spring for naturalness)\r\n    fun spatialEnter() = spring<Float>(dampingRatio = Spring.DampingRatioLowBouncy, stiffness = Spring.StiffnessMediumLow)\r\n    fun spatialExit()  = tween<Float>(Duration.short4, easing = AppEasing.EmphasizedAccel)\r\n\r\n    // Effects — color, opacity, elevation (use tween)\r\n    fun effectsStandard(duration: Int = Duration.medium2) = tween<Float>(duration, easing = AppEasing.Standard)\r\n    fun effectsDecel(duration: Int = Duration.medium4)    = tween<Float>(duration, easing = AppEasing.EmphasizedDecel)\r\n\r\n    // Container — screen-level transitions\r\n    fun containerEnter() = tween<IntOffset>(Duration.medium4, easing = AppEasing.EmphasizedDecel)\r\n    fun containerExit()  = tween<IntOffset>(Duration.short4,  easing = AppEasing.EmphasizedAccel)\r\n}\r\n\r\n// ✅ Usage — always MotionTokens, never tween(300)\r\nval alpha by animateFloatAsState(\r\n    targetValue = if (isVisible) 1f else 0f,\r\n    animationSpec = MotionTokens.effectsStandard(),\r\n    label = \"alpha\"\r\n)\r\n```\r\n\r\n## Screen states — global, use on every screen\r\n\r\n```kotlin\r\n@Composable\r\nfun AppLoadingScreen(modifier: Modifier = Modifier) =\r\n    Box(modifier.fillMaxSize(), Alignment.Center) { CircularProgressIndicator() }\r\n\r\n@Composable\r\nfun AppEmptyScreen(title: String, body: String, modifier: Modifier = Modifier,\r\n    illustration: (@Composable () -> Unit)? = null, action: Pair<String, () -> Unit>? = null) {\r\n    Column(modifier.fillMaxSize().padding(Spacing.xl), Alignment.CenterHorizontally, Arrangement.Center) {\r\n        illustration?.invoke()\r\n        Spacer(Modifier.height(Spacing.lg))\r\n        Text(title, style = MaterialTheme.typography.headlineSmall, textAlign = TextAlign.Center)\r\n        Spacer(Modifier.height(Spacing.sm))\r\n        Text(body, style = MaterialTheme.typography.bodyMedium, textAlign = TextAlign.Center,\r\n            color = MaterialTheme.colorScheme.onSurfaceVariant)\r\n        if (action != null) { Spacer(Modifier.height(Spacing.lg)); AppButton(action.first, action.second) }\r\n    }\r\n}\r\n\r\n@Composable\r\nfun AppErrorScreen(message: String, onRetry: (() -> Unit)? = null, modifier: Modifier = Modifier) {\r\n    Column(modifier.fillMaxSize().padding(Spacing.xl), Alignment.CenterHorizontally, Arrangement.Center) {\r\n        Icon(Icons.Rounded.ErrorOutline, null, Modifier.size(64.dp), tint = MaterialTheme.colorScheme.error)\r\n        Spacer(Modifier.height(Spacing.md))\r\n        Text(\"Something went wrong\", style = MaterialTheme.typography.titleLarge)\r\n        Spacer(Modifier.height(Spacing.sm))\r\n        Text(message, style = MaterialTheme.typography.bodyMedium, textAlign = TextAlign.Center,\r\n            color = MaterialTheme.colorScheme.onSurfaceVariant)\r\n        if (onRetry != null) { Spacer(Modifier.height(Spacing.lg)); AppButton(\"Try again\", onRetry, variant = AppButtonVariant.Tonal) }\r\n    }\r\n}\r\n```\r\n\r\n## Common Mistakes\r\n\r\n❌ Spacing not on 4dp grid — `padding(13.dp)` use Spacing.sm or Spacing.md\r\n❌ `fontSize = 20.sp` hardcoded — `MaterialTheme.typography.titleLarge`\r\n❌ `Color(0xFF333333)` hardcoded — `MaterialTheme.colorScheme.onSurface`\r\n❌ `cornerRadius = 12.dp` inline — `MaterialTheme.shapes.medium`\r\n❌ `tween(300)` hardcoded — `MotionTokens.effectsStandard()`\r\n❌ Different button heights per screen — always 48.dp\r\n❌ No dark mode testing — check every component with `darkTheme = true`\r\n❌ Dynamic color disabled — enable for Android 12+, fallback palette for older\r\n❌ `Color.White` in dark mode — `MaterialTheme.colorScheme.surface`\r\n❌ `Card(elevation = 4.dp)` — use tonal containers, not shadows: `surfaceContainerHigh`","tags":["design","system","android","agent","skills","piyushverma0","agent-skills","ai-agent","antigravity","claude-code","codex","cursor"],"capabilities":["skill","source-piyushverma0","skill-design-system","topic-agent-skills","topic-ai-agent","topic-android","topic-antigravity","topic-claude-code","topic-codex","topic-cursor","topic-gemini-cli","topic-hilt","topic-jetpack-compose","topic-kotlin","topic-material3"],"categories":["android-agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/piyushverma0/android-agent-skills/design-system","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add piyushverma0/android-agent-skills","source_repo":"https://github.com/piyushverma0/android-agent-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (18,024 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:09:09.566Z","embedding":null,"createdAt":"2026-05-18T13:14:49.150Z","updatedAt":"2026-05-18T19:09:09.566Z","lastSeenAt":"2026-05-18T19:09:09.566Z","tsv":"'-0.25':604 '/tools/theme-builder':392 '0.05':283 '0.1':287 '0.1.sp':689,737 '0.15':301 '0.15.sp':677 '0.2':275 '0.25.sp':713 '0.3':296 '0.4.sp':725 '0.5.sp':701,749,761 '0.7':285 '0.8':299 '0.dp':99,152,1099,1113 '0f':277,278,298,1296 '0xff002117':442 '0xff006e56':433 '0xff041e49':418 '0xff0a3775':510 '0xff0f0d13':537 '0xff141218':525 '0xff1a73e8':409 '0xff1c1b1f':460,466 '0xff1d1b20':540 '0xff202124':430 '0xff211f26':543 '0xff263141':522 '0xff2860c4':513 '0xff2b2930':546 '0xff333333':1449 '0xff36343b':549 '0xff410e0b':454 '0xff49454f':472,531,561 '0xff5f6368':421 '0xff79747e':475 '0xff7af8d3':439 '0xff8c1d18':555 '0xff938f99':558 '0xffaecbfa':507 '0xffb3261e':445 '0xffbcc7dc':519 '0xffcac4d0':478,534 '0xffd3e3fd':415,516 '0xffe6e0e9':500 '0xffe6e1e5':528 '0xffe7e0ec':469 '0xffe8eaed':427 '0xffece6f0':497 '0xfff2b8b5':552 '0xfff3edf7':494 '0xfff7f2fa':491 '0xfff9dedc':451 '0xfffefbff':457,463 '0xffffffff':412,424,436,448,488 '1.dp':158 '10':796 '100':201 '11.sp':757 '12':1483 '12.dp':178,820,1453 '12.sp':721,745 '13.dp':1439 '14.sp':685,709,733 '15':565 '150':208 '16.dp':116,825 '16.sp':673,697,723,747,759 '18':35 '18.dp':967 '18.sp':790 '1f':279,289,1294 '2.dp':953 '20.dp':951 '20.sp':687,711,735,1445 '200':216 '22.sp':663 '24.dp':124 '24.sp':653,675,699 '250':222 '27':4 '28.dp':830,849,851,864,866,871,873 '28.sp':643,665 '3':44,1036 '3.dp':163 '300':227,1286,1457 '32.dp':132 '32.sp':633,655 '350':233 '36.sp':623,645 '4.dp':102,808,853,855,860,862,875,877,1495 '40.sp':635 '400':239 '44.sp':625 '45.sp':613 '450':246 '48.dp':138,978,1466 '48dp':896 '4dp':1436 '5':30,893 '50':194,881 '500':252 '52.sp':615 '57.sp':600 '6.dp':169 '64.dp':144,1396 '64.sp':602 '700':260 '8.dp':109,173,814 'across':80,888 'action':1333,1367 'action.first':1373 'action.second':1374 'activ':359 'advanc':50 'agent':9 'ai':8,32,71 'ai-built':70 'alignment.center':1317 'alignment.centerhorizontally':1342,1390 'alignment.centervertically':959 'alpha':1288,1300 'alway':762,1282,1465 'android':5,1482 'animatedcont':942 'animatefloatasst':1290 'animationspec':1297 'app':73 'appbutton':892,910,1372,1425 'appbuttonvari':902,919 'appbuttonvariant.destructive':1019 'appbuttonvariant.filled':920,981 'appbuttonvariant.ghost':1011 'appbuttonvariant.outlined':1001 'appbuttonvariant.tonal':991,1430 'appcard':1035,1046 'appdarkcolorschem':346,503 'appear':210 'appeas':271 'appeasing.emphasizedaccel':1239,1280 'appeasing.emphasizeddecel':1263,1274 'appeasing.standard':1254 'appemptyscreen':1321 'apperrorscreen':1377 'appli':364 'applightcolorschem':348,405 'apploadingscreen':1311 'appshap':375,804 'apptextfield':1119,1127 'appthem':317 'apptypographi':373,591 'architectur':66,84 'arrangement.center':1343,1391 'asymmetr':799,837 'asymmetricshap':844 'auth':16 'avatar':884 'background':455 'badg':104 'base':55,269,1210 'bill':29 'bodi':776,1324,1359 'bodylarg':690 'bodymedium':702 'bodysmal':714 'bold':588 'boolean':319,322,925,928,1142,1158 'bottom':826 'bottomend':854,865,876 'bottomround':857 'bottomstart':852,863,872 'box':1315 'brandfont':572,596,609,619,629,639,649,659,669,681,693,705,717,729,741,753 'break':141 'btncontent':945 'build.version':333 'build.version.sdk':331 'built':72 'button':781,982,1020,1461 'buttondefaults.buttoncolors':1028 'card':120,155,166,821,1092,1106,1493 'carddefaults.cardcolors':1101,1115 'carddefaults.cardelevation':1098,1112 'cardvari':1040,1054 'cardvariant.elevated':1077 'cardvariant.filled':1055 'cardvariant.outlined':1084 'check':1471 'chip':809 'circularprogressind':949,1318 'class':901,1039 'claud':10 'code':11 'codes.s':334 'codex':12 'color':58,203,311,378,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,487,490,493,496,499,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,954,1027,1100,1114,1192,1241,1364,1417,1448,1478 'color.white':1488 'colorschem':328,370,371 'column':1064,1338,1386 'columnscop':1058 'common':1431 'complex':234 'compon':885,1473 'compos':315,325,908,939,1044,1057,1062,1125,1151,1309,1319,1330,1375 'consist':895 'const':191,198,205,213,219,224,230,236,243,249,257 'construct':402 'contain':480,1264,1498 'containercolor':1029,1102,1116 'containerent':1270 'containerexit':1276 'content':128,291,303,324,376,377,938,989,990,999,1000,1009,1010,1017,1018,1033,1034,1056,1067,1068 'contentcolor':1031 'context':336,341,344 'contrast':400 'cornerradius':1452 'cubicbeziereas':274,282,295 'cursor':13 'curv':266 'dampingratio':1230 'dark':1468,1490 'darkcolorschem':504 'darkthem':318,339,345,366,368,1475 'day':36 'default':228 'defin':91 'delight':262 'design':2,19,37,51 'design-system':1 'destruct':907 'dialog':170,834 'differ':1460 'direct':841 'disabl':1479 'displaylarg':593 'displaymedium':606 'displaysmal':616 'distanc':212 'drawer':175,832 'durat':183,190,1248,1252,1257,1261 'duration.medium2':1250 'duration.medium4':1259,1272 'duration.short4':1237,1278 'dynam':310,1477 'dynamiccolor':321,330 'dynamicdarkcolorschem':340 'dynamiclightcolorschem':343 'eas':265,1238,1253,1262,1273,1279 'edg':242 'effect':1240 'effectsdecel':1256 'effectsstandard':1247 'element':1218 'elev':149,483,1042,1097,1111,1243,1494 'elevatedcard':1078 'els':342,347,956,1091,1105,1198,1295 'emphasi':261,842 'emphasizedaccel':294 'emphasizeddecel':281 'enabl':927,932,985,995,1005,1015,1023,1480 'enabled2':931,986,996,1006,1016,1024 'enter':240,292 'enum':900,1038 'error':18,443,550,1120 'errorcontain':449,553 'errortext':1144,1188,1191 'everi':81,889,1306,1472 'everywher':94 'expand/collapse':223 'express':42,45,181,264,564,836,1212 'extra':139 'extralarg':828 'extralong1':259 'extrasmal':806 'f':276,284,286,288,297,300,302 'fab':164,883 'fade':218 'fallback':1484 'fals':926,1143 'fast':202 'feel':74 'field':816 'fill':903,1041 'filledtonalbutton':992 'fitgenz':31 'fix':14 'flat':153 'font':574,578,582,586,768 'fontfamili':573,595,608,618,628,638,648,658,668,680,692,704,716,728,740,752 'fontsiz':599,612,622,632,642,652,662,672,684,696,708,720,732,744,756,789,1444 'fontweight':597,610,620,630,640,650,660,670,682,694,706,718,730,742,754,791 'fontweight.bold':589,792 'fontweight.medium':581,661,671,683,731,743,755 'fontweight.normal':577,598,611,621,695,707,719 'fontweight.semibold':585,631,641,651 'full':64,254,879 'full-screen':253 'fun':316,909,1045,1126,1227,1234,1246,1255,1269,1275,1310,1320,1376 'gap':106,113,126 'generat':382,387 'ghost':906 'global':39,1303 'googl':47 'grid':1437 'group':129 'hardcod':187,767,786,1446,1450,1458 'hct':57,381,395 'hct-gener':380 'headlinelarg':626 'headlinemedium':636 'headlinesmal':646 'height':897,1462 'hero':134 'hierarchi':481 'hilt':17 'hue/chroma/tone':396 'icon':105,196,963,1124,1180,1392 'icons.rounded.erroroutline':1393 'illustr':1329,1344 'imagevector':922,1148 'inconsist':20 'inlin':1454 'inner':1061,1083,1090,1104,1118 'int':332,1249,1258 'invok':1345 'isappearancelightnavigationbar':367 'isappearancelightstatusbar':365 'iserror':1141,1171,1172,1187 'isload':924,933,943 'issystemindarkthem':320 'isvis':1293 'item':112 'kapt':21 'keyboardopt':1154,1155,1200,1201 'keyboardoptions.default':1156 'kotlin':89,313,385,568,801,891,1213,1308 'ksp':22 'label':782,944,1133,1168,1170,1299 'labellarg':726 'labelmedium':738 'labelsmal':750 'languag':52 'larg':133,247,823,833 'leadingicon':921,961,964,1147,1177,1178 'leav':304 'let':1179 'letterspac':603,676,688,700,712,724,736,748,760 'level':40,1267 'level1':157 'level2':162 'level3':168 'level4':172 'level5':177 'lg':123 'librari':886 'lightcolorschem':406 'linear':306 'lineareas':307 'lineheight':601,614,624,634,644,654,664,674,686,698,710,722,734,746,758 'list':111 'load':898,946,948 'localcontentcolor.current':955 'localcontext.current':337 'localview.current':351 'long1':245 'long2':251 'm3':41,180,263,383,393,563,795,835,1211 'make':69 'massiv':145 'materi':43 'material-foundation.com':391 'material-foundation.com/tools/theme-builder':390 'materialthem':369 'materialtheme.colorscheme.error':1193,1398 'materialtheme.colorscheme.errorcontainer':1030 'materialtheme.colorscheme.onerrorcontainer':1032 'materialtheme.colorscheme.onsurface':1451 'materialtheme.colorscheme.onsurfacevariant':1365,1418 'materialtheme.colorscheme.surface':1492 'materialtheme.colorscheme.surfacecontainerhigh':1103,1117 'materialtheme.shapes.medium':1071,1455 'materialtheme.shapes.small':936,1203 'materialtheme.typography.bodymedium':779,1361,1414 'materialtheme.typography.headlinesmall':1352 'materialtheme.typography.labellarge':784,974 'materialtheme.typography.titlelarge':774,1407,1447 'md':115 'medium':580,818 'medium1':221 'medium2':226 'medium3':232 'medium4':238 'menus':822 'messag':1378,1412 'micro':103,195 'miss':23 'mistak':1432 'mod':976,984,994,1004,1014,1022 'mode':1469,1491 'modifi':915,916,917,1047,1048,1049,1080,1087,1094,1107,1108,1135,1136,1137,1204,1312,1313,1314,1326,1327,1328,1383,1384,1385 'modifier.fillmaxsize':1316,1339,1387 'modifier.fillmaxwidth':1205 'modifier.height':977,1347,1356,1370,1400,1409,1423 'modifier.padding':1065 'modifier.size':950,966,1395 'modifier.width':969 'morph':61 'motion':56,182,235,1206 'motionschem':312 'motiontoken':1216,1283 'motiontokens.effectsstandard':1298,1459 'move':1220 'ms':188 'natur':1226 'nav':831 'navig':174 'never':766,785,1284 'new':290 'none':98,151 'null':923,962,965,1052,1074,1140,1146,1149,1153,1182,1189,1195,1199,1332,1337,1368,1382,1394,1421 'object':95,148,189,270,843,1215 'older':1487 'onbackground':458 'onboard':146 'onclick':913,983,993,1003,1013,1021,1050,1073,1079,1086,1093 'onerror':446 'onerrorcontain':452 'onprimari':410,508 'onprimarycontain':416,514 'onretri':1380,1420,1428 'onsecondari':422,520 'onsecondarycontain':428 'onsurfac':464,526 'onsurfacevari':470,532 'ontertiari':434 'ontertiarycontain':440 'onvaluechang':1130,1166,1167 'opac':1242 'outlin':473,556,905,1043 'outlinedbutton':1002 'outlinedcard':1085 'outlinedtextfield':1163 'outlinevari':476,559 'pad':119,121,135,1340,1388,1438 'pair':1334 'palett':384,1485 'per':1463 'perceptu':397 'person':76,839 'physic':54,268,1209 'physics-bas':53,267,1208 'pill':882 'primari':407,505 'primarycontain':413,511 'privat':403,501,570 'profession':75 'quick':209 'r.font.brand':575,579,583,587 'rais':160,165 'reduc':26 'refer':93 'regular':576 'replac':185 'roundedcornershap':807,813,819,824,829,847,858,869,880 'row':957 'rowscop':940 'rule':68 'scale':567,798,1222 'scienc':59 'screen':82,118,255,771,890,1266,1301,1307,1464 'screen-level':1265 'secondari':419,517 'secondarycontain':425 'section':125,140 'semibold':584 'setup':309 'shadow':485,1500 'shape':60,374,793,800,805,838,935,987,988,997,998,1007,1008,1025,1026,1070,1081,1082,1088,1089,1095,1096,1109,1110,1202 'sheet':827 'shift':204 'ship':33 'short':211 'short1':193 'short2':200 'short3':207 'short4':215 'sideeffect':354 'singl':85 'singlelin':1157,1173,1174 'size':769 'skill':6 'skill-design-system' 'slight':159 'sm':108 'small':810,812 'someth':1403 'sourc':86 'source-piyushverma0' 'sp':605 'space':96,1433 'spacer':968,1346,1355,1369,1399,1408,1422 'spacing.lg':1348,1371,1424 'spacing.md':1066,1401,1443 'spacing.sm':1357,1410,1441 'spacing.xl':1341,1389 'spacing.xs':970 'spatial':1217 'spatialent':1228 'spatialexit':1235 'splash':147 'spring':1224,1229 'spring.dampingratiolowbouncy':1231 'spring.stiffnessmediumlow':1233 'standard':117,154,217,273,887 'startround':868 'state':25,899,1121,1302 'step':797 'stiff':1232 'string':912,1129,1131,1134,1139,1145,1323,1325,1335,1379 'strokewidth':952 'style':566,765,773,778,783,973,1351,1360,1406,1413 'supabas':15 'support':1122 'supportingtext':1138,1185,1194,1197 'surfac':248,461,479,523 'surfacecontain':492,541 'surfacecontainerhigh':495,544,1501 'surfacecontainerhighest':498,547 'surfacecontainerlow':489,538 'surfacecontainerlowest':486,535 'surfacevari':467,529 'swap':197 'system':3,38,379,794 'tag':811 'takeov':256 'targetvalu':1291 'tertiari':431 'tertiarycontain':437 'test':1470 'text':770,775,777,780,787,815,911,971,972,1123,1169,1190,1196,1349,1358,1402,1411 'textalign':1353,1362,1415 'textalign.center':1354,1363,1416 'textbutton':1012 'textstyl':594,607,617,627,637,647,657,667,679,691,703,715,727,739,751 'theme':308,764 'tight':110 'tint':1397 'titl':772,1322,1350 'titlelarg':656 'titlemedium':666 'titlesmal':678 'token':28,65,83,184,1207 'tonal':482,904,1497 'tooltip':179,817 'topend':850,861,874 'topic-agent-skills' 'topic-ai-agent' 'topic-android' 'topic-antigravity' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-gemini-cli' 'topic-hilt' 'topic-jetpack-compose' 'topic-kotlin' 'topic-material3' 'topround':846 'topstart':848,859,870 'trailingicon':1150,1183,1184 'transit':229,1268 'tri':1426 'true':323,929,1159,1476 'truth':88 'tween':1236,1245,1251,1260,1271,1277,1285,1456 'typographi':372,562,592 'ui/theme/appcolorscheme.kt':386 'ui/theme/appshapes.kt':802 'ui/theme/apptheme.kt':314 'ui/theme/apptypography.kt':569 'ui/theme/tokens/designtokens.kt':90 'ui/theme/tokens/motiontokens.kt':1214 'uistat':24 'unifi':79 'uniform':398 'unit':326,914,941,1051,1059,1063,1132,1152,1331,1336,1381 'usag':1281 'use':394,763,1223,1244,1304,1440,1496 'val':97,100,107,114,122,130,136,142,150,156,161,167,171,176,192,199,206,214,220,225,231,237,244,250,258,272,280,293,305,327,335,349,355,404,502,571,590,803,845,856,867,878,930,934,937,975,1060,1069,1287 'valu':1128,1164,1165 'variant':894,918,980,1037,1053,1076,1429 'verticalalign':958 'view':350,363 'view.context':357 'view.isineditmode':353 'visual':78 'visualtransform':1160,1161,1175,1176 'visualtransformation.none':1162 'wcag':399 'went':1404 'window':356,360,362 'windowcompat.getinsetscontroller':361 'without':484 'wrong':788,1405 'xl':131 'xs':101 'xxl':137 'xxxl':143","prices":[{"id":"d016b125-552f-4911-9025-a63761479cba","listingId":"4f2c950d-9c87-477a-9a97-fa7889deeaa2","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"piyushverma0","category":"android-agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:49.150Z"}],"sources":[{"listingId":"4f2c950d-9c87-477a-9a97-fa7889deeaa2","source":"github","sourceId":"piyushverma0/android-agent-skills/design-system","sourceUrl":"https://github.com/piyushverma0/android-agent-skills/tree/main/skills/design-system","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:49.150Z","lastSeenAt":"2026-05-18T19:09:09.566Z"}],"details":{"listingId":"4f2c950d-9c87-477a-9a97-fa7889deeaa2","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"piyushverma0","slug":"design-system","github":{"repo":"piyushverma0/android-agent-skills","stars":8,"topics":["agent-skills","ai-agent","android","antigravity","claude-code","codex","cursor","gemini-cli","hilt","jetpack-compose","kotlin","material3","open-source","skills","supabase"],"license":"mit","html_url":"https://github.com/piyushverma0/android-agent-skills","pushed_at":"2026-04-27T09:15:31Z","description":"27 Android skills for AI agents (Claude Code, Codex, Cursor). Fixes Supabase auth, Hilt errors, design inconsistency, kapt→ksp, missing UiState states. Reduced my token bills 5×. FitGenZ AI shipped in 18 days.","skill_md_sha":"15d53cc75f6ac76563e0fb79cf62585300a359e3","skill_md_path":"skills/design-system/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/piyushverma0/android-agent-skills/tree/main/skills/design-system"},"layout":"multi","source":"github","category":"android-agent-skills","frontmatter":{},"skills_sh_url":"https://skills.sh/piyushverma0/android-agent-skills/design-system"},"updatedAt":"2026-05-18T19:09:09.566Z"}}