awesome-mobile-design-system-agent-skills

Android adaptive icons and iOS app icon light/dark/tinted modes. Use this when creating or revising app launcher icons.

Cross-platform icon pipeline — SVG source, Android VectorDrawable, SF Symbols, Flutter/RN delivery, sizing, and parity. Use this when adding or refactoring the icon set.

Scalable, theme-aware illustrations for mobile — pipeline, tokenization, and platform delivery. Use this when authoring or shipping illustrations.

Structuring a cross-platform component library into primitives, patterns, and compositions with predictable folder layout and public API. Use this when starting or reorganizing a component library.

Slots, compound components, and headless primitives for flexible mobile component APIs. Use this when a component needs to serve many callers without becoming a grab-bag of props.

Modeling component variants as a closed matrix of size × intent × state, with explicit enums and slot APIs. Use this when designing or refactoring a component's public API.

Docs-as-code for design systems — Zeroheight, Storybook, DocC/DokkaHtml/dartdoc, and API reference. Use this when establishing or revising the documentation site.

Building a Style Dictionary v4+ pipeline with platform transforms and CI publishing. Use this when setting up or evolving the token build.

Visual regression testing for mobile design systems using Chromatic, Loki, Percy, Paparazzi, Roborazzi, swift-snapshot-testing, and flutter golden tests. Use this when setting up or auditing visual tests.

Building a mobile color system with HSL/HCT base, Material 3 tonal palettes, semantic aliases, and verified contrast. Use this when defining or refining color tokens.

DTCG token schema, naming conventions, and reference/system/component layering. Use this when introducing or auditing a token set.

Spacing scales, 4/8pt base grids, layout tokens, and density. Use this when defining spacing, sizing, or layout tokens for a mobile design system.

Type scale, line height, letter spacing, dynamic type, and font loading for a cross-platform mobile design system. Use this when defining or revising the typography layer.

Contribution model, review lanes, and release cadence for mobile design systems. Use this when establishing or revising how changes enter the system.

Semantic versioning for design tokens — deprecation, breaking changes, and migration. Use this when releasing token changes or planning a major bump.

Purposeful motion for mobile UIs — easing, duration scales, and reduced-motion. Use this when designing or reviewing animations.

Encoding duration, easing, and stagger as DTCG tokens and delivering them to Compose, SwiftUI, Flutter, and React Native. Use this when introducing or refactoring motion tokens.

Delivering a single token set to Jetpack Compose, SwiftUI, Flutter, and React Native with type safety and no runtime cost. Use this when wiring the build output into consumer apps.

Blending platform idiom (Material 3 on Android, Human Interface Guidelines on iOS) with brand identity. Use this when deciding what to converge vs diverge across platforms.

Multi-brand token sets and white-label pipelines for mobile design systems. Use this when adding a new brand or building a themeable product.

Light and dark theming via system integration, per-surface semantics, and elevation overlays. Use this when wiring color themes to the platform or adding a new surface.

In-app theme switching with persistence and high performance. Use this when users must change theme (light/dark/brand/density) without restarting the app.