skills.rest
niltsiar
niltsiarCOMMUNITY
Explore all skills by this author →
Website𝕏@niltsiarGitHub

kmp-design-systems

Define a Kotlin Multiplatform design system with two-layer CompositionLocal tokens and Material Symbols icons.

1|Updated Nov 26, 2025
Search Tags:#components#tokens#design-system#design-tokens#kmp#material#unstyled
Ready to run
npx skills add https://github.com/niltsiar/kotlin_multiplatform_pokedex --skill kmp-design-systems
💬 Prompt for ChatGPT / Claude Chat▼
Please help me install this Agent Skill.
Skill: kmp-design-systems
Source: https://github.com/niltsiar/kotlin_multiplatform_pokedex/tree/main/.agents/kmp-design-systems
Command: npx skills add https://github.com/niltsiar/kotlin_multiplatform_pokedex --skill kmp-design-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design tokens, components, and icon strategy for a dual-theme Kotlin Multiplatform UI, enabling consistent visuals across Material 3 Expressive and Compose Unstyled themes.

Core Features & Use Cases

  • Token architecture with two-layer CompositionLocal tokens for design tokens and component tokens.
  • Shared component library with token-driven components like PokemonCard, TypeBadge, AnimatedStatBar.
  • Material Icons strategy using Vector Drawable XML (Material Symbols) with tinting rules and WCAG-compliant colors.
  • Guidance on token access patterns, LaunchedEffect token capture pattern, and guardrails to ensure consistency.

Quick Start

Create or enable your PokemonTheme, then start using MaterialTheme.tokens and MaterialTheme.componentTokens to style screens with dual-theme support.

Frequently Asked Questions about kmp-design-systems

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage design tokens for Kotlin Multiplatform apps across Android, iOS, and Desktop?▼

Design tokens for Kotlin Multiplatform apps are managed via a two-layer CompositionLocal architecture, separating core design tokens from component tokens to ensure consistent visuals across Android, iOS, and Desktop.

Can I support dual themes like Material 3 Expressive and Compose Unstyled in a shared UI?▼

Dual themes like Material 3 Expressive and Compose Unstyled are supported by defining unified design tokens and component token interfaces that adapt styles dynamically across different Kotlin Multiplatform UI layers.

What is the best way to apply component tokens in Kotlin Multiplatform without hardcoding styles?▼

The best way to apply component tokens is using the LaunchedEffect token capture pattern, which reads token interfaces dynamically at runtime to maintain consistent styling without hardcoding values in feature UIs.

How do I handle Material Symbols icons consistently in a Kotlin Multiplatform project?▼

Material Symbols icons are handled using Vector Drawable XMLs with defined tinting rules and WCAG-compliant colors, ensuring consistent icon strategy and accessibility across all platform targets.

Does this design system approach require specific dependencies to work with Compose?▼

This design system approach requires no external dependencies, relying entirely on native Kotlin Multiplatform CompositionLocal mechanisms and MaterialTheme structures to deliver token-driven components.

Why use a two-layer token architecture instead of a flat design token structure?▼

A two-layer token architecture separates global design tokens from specific component tokens, preventing style bleeding and ensuring strict visual consistency when applying tokens to complex feature UIs.

Related Skills

Explore More Design & Creative Skills→
ClankerGuruClankerGuru

kotlin-multiplatform

Evaluate Kotlin Multiplatform adoption and module strategy across JVM, Android, iOS, and JS targets.

Community
Intermediate
dylantarredylantarre
38

framer

Export design tokens as CSS variables for Framer prototypes.

Community
Advanced
devanfer02devanfer02

android-accessibility

Identifies Android Jetpack Compose accessibility issues including content descriptions, touch targets, color contrast, focus management, and semantic structuring.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate