skills.rest
igorescodro
igorescodroCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

write-composable

Creates Compose Multiplatform screens following Alkaa's Screen-Loader-Content pattern with Kuvio components.

1.6k|163|Updated Jan 10, 2018
Search Tags:#Kotlin#UI Development#composable#compose multiplatform#kuvio#screen architecture#Adaptive layout
One-click install
npx skills add https://github.com/igorescodro/alkaa --skill write-composable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: write-composable
Source: https://github.com/igorescodro/alkaa/tree/main/.claude/skills/write-composable
Command: npx skills add https://github.com/igorescodro/alkaa --skill write-composable

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Writing UI screens in the Alkaa project requires strict adherence to architectural conventions: a three-layer Screen/Loader/Content structure, exclusive use of Kuvio design system components, adaptive two-pane layouts for tablets and desktop, and dark/light previews. This Skill encodes all those rules so generated composables pass review on the first attempt.

Core Features & Use Cases

  • Three-layer screen scaffolding: Enforces the public <Feature>Screen → internal <Feature>Loader (ViewModel injection, state collection) → internal stateless <Feature>Content pattern.
  • Adaptive layout guidance: Provides the isSinglePane flow from NavGraph entry through Loader branching into ListDetailPaneScaffold for list-detail screens on wide windows.
  • Design system enforcement: Mandates Kuvio components over raw Material widgets, multiples-of-4 padding, Snackbar over Toast, and dual dark/light previews.
  • Use Case: When adding a new settings screen to Alkaa, the Skill produces a stateless Content composable, a Loader that collects ViewModel state via koinViewModel(), and correct previews, while flagging mistakes like injecting a ViewModel outside the Loader.

Quick Start

Ask the AI to create a new composable screen for an Alkaa feature following the write-composable conventions, for example a task detail screen with adaptive two-pane layout.

Frequently Asked Questions about write-composable

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

FAQPage Schema
How do I structure a Compose screen in the Alkaa project?▼

Every screen uses three layers: a public stateless FeatureScreen called from NavGraph, an internal FeatureLoader that injects the ViewModel via koinViewModel() and collects state, and an internal stateless FeatureContent that renders the UI and is the target of Compose Testing.

How to implement adaptive two-pane layouts in Compose Multiplatform?▼

Compute isSinglePane at the NavGraph entry using currentWindowAdaptiveInfo().windowSizeClass.isSinglePane(), then branch in the Loader between a standard Scaffold and a ListDetailPaneScaffold with ThreePaneScaffoldNavigator. The detail pane always receives isSinglePane = false.

Can I use Material Text and Icon components in Alkaa composables?▼

No, raw Text, Icon, and Material components are prohibited. All UI must use Kuvio design system components such as KuvioText and KuvioIcon. If a needed Kuvio component does not exist, create it first with the write-design-system-component skill.

Why should ViewModel injection not happen inside a Content composable?▼

Content composables must stay stateless so they can be tested with Compose Testing and previewed easily. All koinViewModel() or koinInject() calls belong in the Loader layer, which collects state and passes plain data down to Content.

When should a screen not use ListDetailPaneScaffold?▼

Only screens with a canonical list-to-detail drill-down, such as Task and Search, need two-pane layouts. Screens without a detail view, like category edit dialogs or preference sub-screens, use a standard Scaffold and remain single-pane.

Related Skills

Explore More Software Engineering Skills→
Asymmetric-alAsymmetric-al
1

building-components

Build composable, accessible UI components with design tokens and documentation.

Official
Advanced
flutterflutter
2.8k

flutter-add-widget-test

Write Flutter widget tests using the WidgetTester API to verify UI rendering and interactions.

Official
Intermediate
wildbitcawildbitca
1

flutter-i18n

Localize Flutter app strings using ARB files and flutter gen-l10n.

Official
Intermediate
igorescodroigorescodro
1.6k

kuvio

Implement Kuvio components for the Alkaa Design System using Compose Multiplatform.

Community
Advanced