compose-state-and-effects — скилл для Claude Code: обзор
Скилл помогает проектировать и проверять владение состоянием в Jetpack Compose. Он распределяет стейт по уровням и подбирает эффекты под их жизненный цикл.
npx skills add chrisbanes/skills --skill compose-state-and-effects -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/compose-state-and-effects/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/compose-state-and-effects/
1Через Skills CLI (Vercel)
npx skills add chrisbanes/skills --skill compose-state-and-effects -a codex2Вручную: положить файлы
.agents/skills/compose-state-and-effects/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add chrisbanes/skills --skill compose-state-and-effects -a cursor2Вручную: положить файлы
.cursor/skills/compose-state-and-effects/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install chrisbanes/skills compose-state-and-effects2Вручную: положить файлы
.github/skills/compose-state-and-effects/SKILL.md1Через Skills CLI (Vercel)
npx skills add chrisbanes/skills --skill compose-state-and-effects -a gemini-cli2Командой платформы
gemini skills install https://github.com/chrisbanes/skills --path skills/compose-state-and-effectsВручную: положить файлы
.devin/skills/compose-state-and-effects/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add chrisbanes/skills --skill compose-state-and-effects -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора17
Похожие
Рядом в теме «Мобильная разработка»
Всё по теме «Мобильная разработка» →Вопросы о 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