/ Каталог / Песочница / jetpack-compose-skills
← Все серверы ↗ GitHub
● Сообщество anhvt52 ⚡ Сразу

jetpack-compose-skills

автор anhvt52 · anhvt52/jetpack-compose-skills

Make Claude an Android Compose dev — idiomatic @Composable, state hoisting, Material 3, proper previews.

jetpack-compose-skills encodes modern Android development patterns for Jetpack Compose: state hoisting, @Composable scoping, Modifier order rules, Material 3 theming, ViewModel + StateFlow wiring, navigation-compose, and Compose-compliant testing. Good for both greenfield Compose projects and migrating Views-based screens.

▶ Смотреть демо 📦 Установить 💡 Сценарии

Зачем использовать

Ключевые функции

Живое демо

Как выглядит на практике

jetpack-compose-skill.replay ▶ готово
0/0

Установка

Репозиторий автора · Официальная документация Claude Skills

Сценарии использования

Реальные сценарии: jetpack-compose-skills

How to build a new Compose screen with state hoisting

👤 Android developers writing Compose UI ⏱ ~30 min intermediate

Когда использовать: New screen in a Compose app — get it right the first time rather than refactoring later.

Поток
  1. Describe the screen
    Build a Profile screen: avatar, name, bio, follow button. State comes from a ProfileViewModel.✓ Скопировано
    → Stateless composable + stateful wrapper + preview
  2. Wire the ViewModel
    Hook up the ViewModel using collectAsStateWithLifecycle.✓ Скопировано
    → Lifecycle-aware state collection
  3. Add a preview
    Add @Preview variants for empty, loaded, and error states.✓ Скопировано
    → Three previews rendering without a live ViewModel

Итог: A clean Compose screen with previews and a testable structure.

Подводные камни
  • Stateful composables you can't preview — Keep the composable stateless; hoist state to a wrapper
  • Wrong Modifier order — Skill prompts the order rule — padding before background for a padded background, etc.
Сочетать с: filesystem

Migrate a Views-based screen to Compose

👤 Teams converting legacy Android screens ⏱ ~90 min advanced

Когда использовать: You want to convert one screen at a time without rewriting the whole app.

Поток
  1. Map the XML
    Here's fragment_profile.xml. Map each widget to a Compose equivalent with notes on behaviors to preserve.✓ Скопировано
    → XML → Compose mapping with behavior notes
  2. Rewrite
    Produce the Compose screen. Keep state + actions identical to the Fragment.✓ Скопировано
    → Composable file + ViewModel untouched
  3. Keep the navigation hybrid if needed
    Swap only this screen, leave the rest on Fragments using ComposeView.✓ Скопировано
    → Hybrid navigation continues to work

Итог: One screen cleanly ported without destabilizing the rest.

Подводные камни
  • Observer leaks when mixing with Fragment lifecycle — Use viewLifecycleOwner with ComposeView; release on destroy
Сочетать с: android

Комбинации

Сочетайте с другими MCP — эффект x10

jetpack-compose-skill + android

Run the resulting screen in an emulator and iterate

Build the app, launch in the emulator, and show me the Profile screen.✓ Скопировано
jetpack-compose-skill + filesystem

Work across modules in a Compose project

Read feature/profile/ and add a Profile screen in ui/.✓ Скопировано

Инструменты

Что предоставляет этот MCP

ИнструментВходные данныеКогда вызыватьСтоимость
compose-authoring screen intent + state Any new Compose UI 0
state-hoisting-review existing composable When a composable is hard to preview 0
view-to-compose-migration XML + behaviors Screen-by-screen migrations 0

Стоимость и лимиты

Во что обходится

Квота API
none
Токенов на вызов
3–15k per screen
Деньги
free
Совет
Scope to one screen + its ViewModel at a time

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: none at skill level
Исходящий трафик: none

Устранение неполадок

Частые ошибки и исправления

Preview fails to render

Make composables stateless; drop the ViewModel from the preview path.

StateFlow not collecting on background

Use collectAsStateWithLifecycle, not collectAsState, on screens that may be backgrounded.

Альтернативы

jetpack-compose-skills в сравнении

АльтернативаКогда использоватьКомпромисс
apple-hig-designer-skillYou're on iOS SwiftUI instead of Android ComposeDifferent platform
claude-android-skillYou need broader Android help beyond UILess Compose-specific

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills