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

compose-screen

Implement cross-platform Compose UI screens for Android and Desktop with dual-theme support.

1|Updated Nov 26, 2025
Search Tags:#preview#compose#screens#kotlin-multiplatform#dual-theme#ui-material#ui-unstyled
One-click install
npx skills add https://github.com/niltsiar/kotlin_multiplatform_pokedex --skill compose-screen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-screen
Source: https://github.com/niltsiar/kotlin_multiplatform_pokedex/tree/main/.agents/compose-screen
Command: npx skills add https://github.com/niltsiar/kotlin_multiplatform_pokedex --skill compose-screen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamline cross-platform UI development by implementing consistent Compose screens for Android and Desktop with dual-theme support, reducing duplication and ensuring unified behavior.

Core Features & Use Cases

  • Dual-theme support for Material Design 3 and Compose Unstyled UIs
  • Shared UI screen structures across :features:<feature>:ui-material and :ui-unstyled modules
  • Mandatory @Preview coverage for all composables and reusable previews

Quick Start

Create a new feature screen by implementing both Material and Unstyled variants under features/<feature>/ui-material and ui-unstyled, then add @Preview previews.

Frequently Asked Questions about compose-screen

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

FAQPage Schema
How do I build Compose screens that support dual themes across Android and Desktop?▼

Implement dual-theme Compose screens by creating UI variants in :features:<feature>:ui-material and :ui-unstyled modules, ensuring responsive layouts and consistent behavior across Android and Desktop platforms.

Why do my Kotlin Multiplatform Compose previews fail to cover all custom composables?▼

Compose previews fail coverage because this approach enforces mandatory @Preview annotations for all composables and reusable previews, requiring you to add @Preview to every UI element in both ui-material and ui-unstyled modules.

What is the best way to structure shared Compose UI features for Material and unstyled layouts?▼

Structure shared Compose UI features by separating implementations into :features:<feature>:ui-material and :ui-unstyled modules, using design tokens for material spacing and elevation to maintain consistency across platforms.

Does this approach require separate ui-material and ui-unstyled modules for each feature?▼

Yes, it requires separate ui-material and ui-unstyled modules under features for each screen, applying Material Design 3 tokens for spacing and elevation while maintaining unified dual-theme behavior across Android and Desktop.

Can I use design tokens for spacing and elevation in Compose Multiplatform screens?▼

Yes, you can use design tokens with material tokens for spacing and elevation in Compose Multiplatform screens, ensuring responsive layouts and consistent design application across both ui-material and ui-unstyled variants.

Related Skills

Explore More Software Engineering Skills→
shaharKeisarAppsshaharKeisarApps

compose-expert

Implement cross-platform UI components with Compose Multiplatform for Android, Desktop, and iOS.

Community
Advanced
liangmiQwQliangmiQwQ

designing-ui

Consolidate UI design principles into a reusable Markdown blueprint.

Community
Basic
leogallegoleogallego
1

compose-state-hoisting

Guide Android developers to hoist Compose UI state to the correct scope.

Community
Intermediate
niltsiarniltsiar
1

kmp-compose-unstyled

Implement headless UI patterns for platform-native theming and accessibility in Kotlin Multiplatform Compose projects.

Community
Intermediate