// Use when implementing a new Kuvio component for the Alkaa Design System after design spec and structure decisions are finalized
| name | write-design-system-component |
| description | Use when implementing a new Kuvio component for the Alkaa Design System after design spec and structure decisions are finalized |
Kuvio is the Alkaa Design System's component library. This skill guides implementation of theme-aware, multiplatform Compose Multiplatform components following strict naming, structure, and styling conventions.
Prerequisite: Design spec must be finalized (variants, layout, interactive states) before using this skill. If not, use superpowers:brainstorming first.
references/IMPLEMENTATION_GUIDE.mdreferences/IMPLEMENTATION_GUIDE.mdreferences/IMPLEMENTATION_GUIDE.mdreferences/IMPLEMENTATION_GUIDE.mdlocalization skill for all user-visible stringsreferences/IMPLEMENTATION_GUIDE.mdscripts/verify_quality.shreferences/IMPLEMENTATION_GUIDE.md| Rule | Correct | Wrong |
|---|---|---|
| Naming | KuvioTaskChip | TaskChip, TASK_CHIP |
| Strings | stringResource(Res.string.kuvio_component_label) | "Add task" |
| Colors | MaterialTheme.colorScheme.primary | Color(0xFF123456) |
| Text | KuvioBodyMediumText() | Text(fontSize=14.sp, ...) |
| Size | ~60 lines, max 3 nesting levels | 200+ lines, deeply nested |
| Slots | icon: (@Composable () -> Unit)? | iconColor: Color, iconSize: Dp, ... |
| Constants | private const val AddTaskPlaceholder | private const val ADD_TASK_PLACEHOLDER |
Before Implementation:
superpowers:brainstorming first.During Implementation:
MaterialTheme.colorScheme.*Text() instead of Kuvio text primitive → Use KuvioBodyMediumText() etc.resources/strings.xmlAfter Writing Code:
scripts/verify_quality.sh| Mistake | Fix |
|---|---|
| Hardcoding colors | Breaks dark mode — use MaterialTheme.colorScheme.* |
Raw Text() instead of Kuvio text | Inconsistent typography — use KuvioBodyMediumText() etc. |
| Strings in code | Not localizable — move to resources/strings.xml |
| Function > 60 lines | Hard to read — extract private sub-composables |
| Deep nesting (4+ levels) | Extract logical chunks to private composables |
| Configuration objects | Hard to extend — use composable (@Composable () -> Unit)? slots |
| Skipping previews | Can't verify visually — add light/dark pair for each variant |
Canvas for shapes | Hard to theme — use Box, clip, background modifiers |
libraries/designsystem/ — Kuvio components, theme, tokensresources/ — Strings, colors, spacing/assets/designsystem/alkaa-ds.htmlUse when writing or modifying end-to-end tests in the Alkaa project — triggers on tasks like "add an E2E test", "write a flow test", "test this feature end-to-end", "add a test to shared module", or "cover this user journey with a test".
Use when writing or modifying UI/Compose instrumented tests in the Alkaa project — triggers on tasks like "add a UI test", "test this composable", "add instrumented test", "test this screen behavior".
Use when the user asks to commit changes, stage and commit, or says "commit my changes" — stages all uncommitted changes and creates a structured commit message with emoji, title, and summary
Use when adding, editing, or reviewing user-facing strings in the Alkaa project — UI labels, button text, content descriptions, empty states, error messages, plurals, or any text visible to the user.
Use when adding a new screen or modifying navigation in the Alkaa project — triggers on tasks like "add a new screen", "navigate to X", "add destination", "wire up navigation", or "create a navigation event". Also triggers when connecting UI actions to routes in NavGraph.
Use when creating a new Composable or modifying an existing one in the Alkaa project — screen structure, state handling, adaptive layouts, Kuvio usage, or previews.