skills.rest
Vierco
ViercoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

theming-compose-kmp

Applies design system tokens to Compose Multiplatform UI components across Android, iOS, and Desktop.

Updated Sep 12, 2026
Search Tags:#theming#design system#ui components#dark mode#kotlin#material3#compose multiplatform
One-click install
npx skills add https://github.com/Vierco/citoVisionApp --skill theming-compose-kmp-vierco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theming-compose-kmp
Source: https://github.com/Vierco/citoVisionApp/tree/main/.claude/skills/theming-compose-kmp
Command: npx skills add https://github.com/Vierco/citoVisionApp --skill theming-compose-kmp-vierco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent UI in Compose Multiplatform is hard when colors, spacing, and typography are invented ad-hoc per screen, dark mode is forgotten, and reusable components get duplicated. This Skill enforces a single design system (defined in DESIGN.md) across Android, iOS, and Desktop so every screen uses the same tokens in both light and dark themes. ## Core Features & Use Cases - Token-based theming: Reads colors from MaterialTheme.colorScheme and an extended palette (LocalAppColors) with mandatory light and dark variants, plus a Dongle typography scale limited to seven defined slots. - Reusable component guidance: Defines where shared components live (presentation/components) and requires checking for existing ones before creating new buttons, cards, badges, or dialogs. - Accessibility and platform rules: Enforces WCAG AA contrast in both palettes, 48dp touch targets, iOS Safe Areas, Android edge-to-edge, and modal overlay handling for the native iOS tab bar. - Use Case: When adding a new priority badge to a screen, the Skill directs you to reuse PriorityBadge with semantic colors (error/warning/secondaryDark) instead of hardcoding a Color(0x...) value that breaks in dark mode. ## Quick Start Ask the assistant to create a new reusable card component for a screen following the project design system, and it will apply the correct theme tokens, spacing values, and dark-mode variants.

Frequently Asked Questions about theming-compose-kmp

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

FAQPage Schema
How do I add a new color token in Compose Multiplatform with dark mode support?▼

Add the color to DESIGN.md first with both light and dark values, then define it in Color.kt as a normal and dark-prefixed val, and register both in AppExtendedColors via LightExtendedColors and DarkExtendedColors in Theme.kt. A token without a dark variant is treated as a visible bug.

How do I create a reusable UI component in Compose Multiplatform?▼

Check presentation/components first for an existing equivalent, then build a stateless composable with state as parameters, actions as callbacks, and a Modifier parameter. Read colors from MaterialTheme.colorScheme or LocalAppColors and verify it in both light and dark themes.

Why does my Compose text show the system font instead of the custom font?▼

Only seven typography slots are defined with the Dongle font in Typography.kt, such as displayLarge, headlineLarge, titleLarge, and bodyLarge. Slots like titleMedium or bodySmall fall back to the Material3 default system font, so a new slot must be proposed in DESIGN.md instead.

Can I read MaterialTheme colors inside drawBehind or Canvas in Compose?▼

No, drawing lambdas cannot read MaterialTheme. Capture the color in the composition first, then pass it into the drawBehind or Canvas lambda, as done in the ShimmerBox component.

When should I not use a theming skill for Compose UI work?▼

Do not use it for navigation design, ViewModel or UiState structure, or resource management like fonts and strings, which belong to separate navigation, MVVM, and resources skills. It also does not modify design values themselves, which require human confirmation in DESIGN.md.

Related Skills

Explore More Software Engineering Skills→
systempromptiosystempromptio
2

visual-design-system

Enforce branded visual design consistency using OKLCH tokens and fluid typography.

Official
Advanced
Mithrandir21Mithrandir21

compose-ui-builder

Build Jetpack Compose screens from specs, mockups, or Figma descriptions with state hoisting and previews.

Community
Intermediate
botassemblybotassembly

theme-factory

Apply preset color and typography themes to decks and documents after user confirmation.

Official
Basic
PostalocityPostalocity
1

theme-factory

Apply ready-made design themes with color palettes and typography to slides, documents, and web assets.

Official
Intermediate