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

write-design-system-component

Implements theme-aware Kuvio Compose Multiplatform components for the Alkaa design system.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Implementing new design system components in Compose Multiplatform often leads to inconsistent naming, hardcoded colors, missing dark-mode previews, and non-localizable strings. This Skill enforces the Alkaa Kuvio design system conventions so every new component is theme-aware, localizable, and consistent with existing primitives.

Core Features & Use Cases

  • Guided Implementation Workflow: Eight structured steps covering design spec extraction, studying reference components, directory placement, implementation, string externalization, previews, and quality verification.
  • Convention Enforcement: Strict rules for Kuvio naming prefixes, MaterialTheme color tokens, composable slot patterns, ~60-line function limits, and PascalCase constants.
  • Automated Quality Verification: A shell script runs Gradle compilation and detekt/ktlint static analysis on the designsystem module.
  • Use Case: After finalizing a design spec for a new task chip, use this Skill to scaffold KuvioTaskChip with proper slots, light/dark previews, externalized strings, and passing lint checks.

Quick Start

Implement a new Kuvio badge component for the Alkaa design system following the finalized design spec, with light and dark previews and verified code quality.

Frequently Asked Questions about write-design-system-component

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

FAQPage Schema
How do I create a new Compose Multiplatform design system component?▼

Extract the design spec, study at least two existing reference components, place the file in the correct category folder under libraries/designsystem, implement it with Kuvio naming and theme tokens, then add light and dark previews and run the quality verification script.

How do I make Compose components support dark mode?▼

Use MaterialTheme.colorScheme tokens instead of hardcoded colors so the component adapts automatically. Add paired light and dark previews using AlkaaThemePreview with isDarkTheme set to true to visually verify both themes.

Where should new Kuvio components be placed in the project?▼

Place them under libraries/designsystem/src/commonMain/kotlin/com/escodro/designsystem/components/kuvio/ in a category folder such as text, icon, card, badge, item, or dialog. Create a new lowercase folder if no existing category matches.

Why should composable slots be preferred over configuration parameters?▼

Slots typed as (@Composable () -> Unit)? are easier to extend than configuration objects with many color and size parameters. They let callers inject arbitrary content without changing the component's API surface.

When should I not use this component implementation workflow?▼

Do not start implementation when the design spec is missing or incomplete, or when variants, slots, and interactive states are undecided. Finalize the design first, for example with a brainstorming skill, before writing component code.

Related Skills

Explore More Software Engineering Skills→
Tea-4-LifeTea-4-Life

polish

Correct visual details and consistency in frontend UI before shipping.

Official
Advanced
passionseedpassionseed
2

ui-worker

Implement React Native UI screens and navigation wiring in Expo Router projects.

Official
Intermediate
HallinnaHallinna

i18n-management

Audit React translation keys for completeness across en, de, fr locales.

Community
Intermediate
cycling02cycling02

ios-compose-ui-master

Create iOS-style Jetpack Compose UI components for Android apps.

Community
Intermediate