skills.rest
eygraber
eygraberCOMMUNITY
Explore all skills by this author →
GitHub

ui-component

Create reusable Kotlin Compose UI components with previews and tests in ui/ modules.

1|Updated Feb 5, 2026
Search Tags:#testing#kotlin#compose#ui-components#component-patterns#previews#modular-design
One-click install
npx skills add https://github.com/eygraber/jellyfin-kmp --skill ui-component-eygraber
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-component
Source: https://github.com/eygraber/jellyfin-kmp/tree/main/.claude/skills/ui-component
Command: npx skills add https://github.com/eygraber/jellyfin-kmp --skill ui-component-eygraber

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create reusable UI components in the ui/ modules to ensure consistency across screens and accelerate UI development by providing patterns, previews, and tests.

Core Features & Use Cases

  • Create and share UI components in ui/ across screen modules.
  • Follow component patterns with previews and testing scaffolding to ensure design system compliance.
  • Use cases include building common elements like LoadingButton and UserAvatar that appear in multiple screens.

Quick Start

Create a new UI component named LoadingButton in the ui/ module.

Frequently Asked Questions about ui-component

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

FAQPage Schema
How do I create reusable Kotlin Compose UI components to share across screen modules?▼

Create reusable UI components in dedicated ui/ modules to promote consistency and reduce duplication. This approach enforces Kotlin Compose patterns and provides a clear module structure, allowing features to share common elements.

What is the best way to structure previews for shared Compose UI components?▼

Building previews for Compose UI components involves following pattern-driven scaffolding within the ui/ modules. This ensures design system compliance and provides documented patterns for testing workflows across multiple screen modules.

Does this approach support adding tests for common UI elements like LoadingButton across different features?▼

Yes, adding tests for common UI elements like LoadingButton is supported through testing scaffolding within the ui/ modules. This ensures shared components maintain design system compliance and documented patterns across features.

Can I use this component pattern workflow to build UserAvatar elements for multiple screens?▼

Yes, you can build and share common elements like UserAvatar across multiple screens. Defining these components in ui/ modules accelerates UI development and ensures consistency by providing reusable patterns.

Why should I isolate shared UI blocks into separate modules instead of duplicating them?▼

Isolating reusable UI components into separate ui/ modules reduces duplication and enforces Kotlin Compose patterns. This modular design accelerates UI development by providing shared previews, tests, and documented patterns across features.

Related Skills

Explore More Software Engineering Skills→
krutikJainkrutikJain
14

android-compose-foundations

Create Android UI layouts and themes using Jetpack Compose components.

Community
Intermediate
Itinerant18Itinerant18

agentation-self-driving

Navigates web pages and injects feedback annotations via the Agentation toolbar.

Community
Advanced
Tea-4-LifeTea-4-Life

normalize

Normalize frontend UI features by replacing hard-coded values with design tokens.

Official
Intermediate
sandeshbagmaresandeshbagmare

mobile-android-design

Design Android app interfaces with Material Design 3 and Jetpack Compose.

Community
Intermediate