create-compose-component

Create reusable Jetpack Compose components with Material3 and AppTheme previews.

343|68|Updated Jun 14, 2017
One-click install
npx skills add https://github.com/MartinStyk/AndroidApkAnalyzer --skill create-compose-component
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-compose-component
Source: https://github.com/MartinStyk/AndroidApkAnalyzer/tree/main/.claude/skills/create-compose-component
Command: npx skills add https://github.com/MartinStyk/AndroidApkAnalyzer --skill create-compose-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill ensures consistency and maintainability in the AndroidApkAnalyzer codebase by providing a standardized template and set of rules for creating new reusable Jetpack Compose UI components.

Core Features & Use Cases

  • Standardized Architecture: Enforces the use of the core:ui-library module for all shared components.
  • Theme Integration: Mandates the use of AppTheme for colors, typography, and shapes to ensure visual consistency.
  • Preview Requirements: Ensures every component includes light and dark mode previews for rapid UI development.
  • Use Case: When adding a new custom button or card to the app, this skill guides the developer to implement it with the correct modifiers, state parameters, and immutable data structures.

Quick Start

Use the create-compose-component skill to generate a new reusable card component named UserProfileCard in the ui-library.

Frequently Asked Questions about create-compose-component

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

FAQPage Schema
How do I create reusable Jetpack Compose UI components with Material3?

To create reusable Jetpack Compose UI components with Material3, you standardize them in a core ui-library module using AppTheme for colors, typography, and shapes. This approach mandates immutable data classes and proper modifier usage to ensure scalable Android development.

Why do my Jetpack Compose components lack visual consistency across light and dark modes?

Your Jetpack Compose components lack visual consistency if they bypass centralized theming and lack mandatory preview functions. Enforcing AppTheme integration and requiring light and dark mode previews ensures theme-aware styling and visual uniformity across your Android app.

What is the best way to standardize Android UI component architecture in Kotlin?

The best way to standardize Android UI component architecture in Kotlin is enforcing immutable data structures, state parameters, and modifier usage within a shared core module. This architectural constraint prevents state mutation and ensures scalable Jetpack Compose development.

Does this approach require using a specific ui-library module for Jetpack Compose widgets?

Yes, this approach requires using a dedicated core ui-library module for all shared Jetpack Compose widgets. Enforcing this specific module isolates reusable Material3-based components, ensuring consistent implementation and architectural boundaries across your Android application.

Can I use mutable state objects when building Jetpack Compose cards and buttons?

No, you should not use mutable state objects when building Jetpack Compose cards and buttons. The standardized architecture enforces immutable data classes for state parameters to maintain predictable rendering and ensure scalable Android UI development.