К основному содержанию
скилл CX Codex

compose-state-and-effects — скилл для Claude Code: обзор

Скилл помогает проектировать и проверять владение состоянием в Jetpack Compose. Он распределяет стейт по уровням и подбирает эффекты под их жизненный цикл.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add chrisbanes/skills --skill compose-state-and-effects -a claude-code
Открыть на GitHub

Что делает compose-state-and-effects

Скилл задаёт чёткую процедуру ревью и написания кода на Jetpack Compose. Он разделяет изменяемое состояние интерфейса, логику приложения и потоки событий. Каждому состоянию нужен один владелец. Любой стейт направляется к самому низкому ответственному уровню: от локального remember до отдельного ViewModel или StateHolder. Для экранов скилл требует выделять чистую функцию разметки с неизменяемым состоянием и колбэками, отделяя её от рантайма Compose.

Для сайд-эффектов скилл сопоставляет нужный API (LaunchedEffect, DisposableEffect, SideEffect) со временем жизни владельца. Перезапуск или очистка эффекта строго привязываются к семантическим ключам. Задачи по кадровой производительности и контракты @ReadOnlyComposable перенаправляются в профильное руководство по производительности.

Скилл запрещает менять файлы сборки или добавлять библиотеки без явного разрешения. Если в модуле нет зависимостей для @Preview, агент просто сообщает о пробеле в настройке проекта.

Какие задачи решает

  • распределить стейт по уровням владения в Jetpack Compose
  • подобрать подходящий эффект под жизненный цикл операции
  • изолировать экранную разметку для безопасного тестирования
  • настроить сборку событий и Flow без утечек

Примеры запросов агенту

  • Проверь владение состоянием и сайд-эффекты в HomeScreen.kt
  • Вынеси состояние из этого Composable-компонента и подбери ключи для LaunchedEffect
  • Раздели логику экрана и разметку для предварительного просмотра

Как установить compose-state-and-effects

1Через Skills CLI (Vercel)

npx skills add chrisbanes/skills --skill compose-state-and-effects -a claude-code

2Вручную: положить файлы

~/.claude/skills/compose-state-and-effects/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/compose-state-and-effects/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора17

compose-animations Помогает выбирать и ревьюить анимации в Jetpack Compose под разные сценарии движения. Пригодится при настройке переходов видимости, смене контента и связывании нескольких свойств. CX Codex +1 1 800установок shepherd Отслеживает открытые pull request и merge request, разбирает замечания ревьюеров и падения CI, а также готовит правки к пушу. CX Codex +1 1 200установок kotlin-concurrency-and-flow Скилл для ревью и написания Kotlin-кода с корутинами: разбирает владение scope, отмену, StateFlow, SharedFlow и Channel. CX Codex +1 1 100установок compose-performance Скилл для расследования стоимости рекомпозиции в Jetpack Compose: помогает найти фазу, из-за которой пересчитывается UI, и починить её точечно. CX Codex +1 1 100установок using-chrisbanes-skills Разбирает задачу по Kotlin или Jetpack Compose и подключает нужный скилл из набора chrisbanes. Полезен, когда в одном изменении пересекаются несколько тем. CX Codex +1 1 100установок kotlin-control-flow Скилл для ИИ-агента, который пишет и правит ветвления Kotlin: when, guard-условия, исчерпывающие проверки sealed-типов, smart casts. CX Codex +1 1 100установок compose-component-design Скилл для проектирования и ревью переиспользуемых компонентов Jetpack Compose: слоты, модификаторы, размещение корневого layout. CX Codex +1 1 000установок kotlin-api-design Помогает решить, кому принадлежит функция, где ставить extension, а где хватит value class. Пригодится при проектировании публичного API на Kotlin и в KMP. CX Codex +1 949установок

Похожие

compose-expert vitorpamplona Скилл с правилами разработки общего UI на Jetpack Compose в проекте Amethyst: навигация, адаптивная вёрстка и ревью компонентов. CX Codex +1 1 400установок compose-multiplatform-patterns affaan-m Скилл подсказывает паттерны Compose Multiplatform и Jetpack Compose для KMP-проектов: состояние, навигация, темы и UI под разные платформы. CX Codex +1 4 600установок android-jetpack-compose TheBushidoCollective Помогает агенту писать Android-интерфейсы на Jetpack Compose и выбирать паттерны состояния. Пригодится при работе с composable-функциями и ViewModel. CX Codex +1 2 200установок compose-motion AThevon Скилл по анимациям Jetpack Compose: подсказывает, какой API взять под задачу, и даёт готовые спеки пружин. Для Android и Compose Multiplatform. CX Codex +1 943установок compose-graphics AThevon Скилл для продвинутой графики в Jetpack Compose: пружинная физика Material 3 Expressive, AGSL-шейдеры, Canvas и эффекты graphicsLayer. CX Codex +1 937установок android-jetpack-compose-cursorrules-prompt-file PatrickJS Правило для Cursor, которое задаёт агенту ориентиры по Android-разработке на Jetpack Compose: архитектура, состояние, тесты. ★ 41 011звёзд репо

Рядом в теме «Мобильная разработка»

Всё по теме «Мобильная разработка» →

Вопросы о compose-state-and-effects

Как установить compose-state-and-effects в Claude Code?

Выполните команду npx skills add chrisbanes/skills --skill compose-state-and-effects -a claude-code.

Для чего нужен этот скилл?

Он направляет модель при проектировании состояния в Jetpack Compose, помогая избежать лишних рекомпозиций и некорректных запусков эффектов.

Добавит ли скилл аннотацию @Preview в код?

Только если в модуле уже подключены инструменты для превью. Скилл запрещает менять сборочные файлы проекта без прямого указания.

Исходный текст

SKILL.md · Apache-2.0
---
name: compose-state-and-effects
description: Use when writing or reviewing Jetpack Compose state ownership, remember state, state hoisting, screen state holders, LaunchedEffect, DisposableEffect, SideEffect, Flow collection, navigation, snackbar, analytics, or focus requests.
---

# Compose state and effects

## Core principle

Give every piece of UI state one lowest responsible owner, then run imperative
work through the effect whose lifecycle follows that owner. Composition renders;
state and effects make rendering change safely.

A screen-ownership review is incomplete until it names the plain, previewable
content composable that receives immutable state and event callbacks separately
from app wiring and composition-owned runtime objects.

## Procedure

1. Establish the requested scope and visible behavioral requirements. Treat an
   ownership change as a finding only when code or task evidence shows a
   lifecycle, testability, business, or coordination need. In a focused
   contract or correctness review, a missing provider, owner, or writer that
   the code never needs is at most a noted risk; do not recommend ownership,
   default-value, or API-surface changes for it, even as optional.
2. Inventory mutable UI state, app state, event streams, app dependencies, and
   imperative work in the affected screen or component.
3. Place each state value at its lowest necessary owner: local UI state,
   hoisted state, a plain UI state holder, or a screen state holder.
4. For a screen boundary, keep durable data and intents in the wiring owner,
   Compose runtime objects in composition or a plain UI state holder, and
   rendering in a previewable content composable that takes immutable state
   and callbacks. Read [State hoisting](references/state-hoisting.md) for the
   implementation shape; naming only state and intents is not that boundary.
   Keep this content callable with sample state and callbacks; an `@Preview`
   wrapper is optional and is not required for the state-driven boundary.
   Before adding it, confirm the module declares its tooling; do not assume
   Compose runtime or UI dependencies provide it. Respect the task's file
   scope: do not add tooling or change build files unless authorized. If
   Preview tooling is needed but unavailable within scope, omit the wrapper
   and report the setup gap.
5. Choose an effect API whose lifecycle matches the work, and key it by the
   semantic input that should restart or dispose it.
6. Load the focused reference for every material concern below. Do not use a
   reference merely because its topic is adjacent.
7. Route frame-rate reads, cross-phase back-writing, and
   `@ReadOnlyComposable` contracts to [Compose performance](../compose-performance/SKILL.md).
   For that contract, distinguish a read of snapshot `State.value` from an
   operation that changes the composer; the state read alone is not a violation.
8. Before responding to a screen-ownership review, verify all three screen
   seams in step 4 when visible code needs them.
9. Finish when every state value has one owner, every effect has a justified
   lifecycle and key, and the UI can be previewed and tested without app
   dependencies. For review-only work, report no change when no evidence-backed
   issue remains; do not invent product requirements.

## Topic router

| Signal | Read |
|---|---|
| Bare local `var`, `remember { mutableStateOf(...) }`, state lists/maps, or reset state | [Local state](references/local-state.md) |
| State shared by siblings, UI state holders, ViewModel/component wiring, or previewable screen boundaries | [State hoisting](references/state-hoisting.md) |
| `LaunchedEffect`, `DisposableEffect`, `SideEffect`, `snapshotFlow`, `rememberCoroutineScope`, `rememberUpdatedState`, `produceState`, imperative `requestFocus`, callbacks, event Flow collection, snackbar, navigation, or analytics | [Side effects](references/side-effects.md) |
| Focus ownership and keyboard/TV/D-pad behavior | [Compose focus navigation](../compose-focus-navigation/SKILL.md) |
| Tests or previews for the resulting UI contract | [Compose UI testing patterns](../compose-ui-testing-patterns/SKILL.md) |

© chrisbanes · Apache-2.0 · chrisbanes/skills

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой