Compose State Deferred Reads
When your Compose UI recomposes on every scroll tick or animation frame, you're probably reading State in the wrong phase. This skill shows you how to defer state reads from composition into layout or draw using block-form modifiers and provider lambdas, and how to avoid back-writing observable state from later phases into earlier ones. The cross-row measurement pattern alone will save you hours of debugging why lazy list items cascade recompose when one captures size and another reads it. Most of the advice is structural, not just quick fixes: keep the State object, move the .value read into the callback. If you've ever watched recomposition counters climb during a simple scroll, you need this.
- skills.sh installs
- 989
- GitHub stars
- 1.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add chrisbanes/skills --skill compose-state-deferred-reads --agent claude-codeInstalls into .claude/skills of the current project.
Files
When your Compose UI recomposes on every scroll tick or animation frame, you're probably reading State in the wrong phase. This skill shows you how to defer state reads from composition into layout or draw using block-form modifiers and provider lambdas, and how to avoid back-writing observable state from later phases into earlier ones. The cross-row measurement pattern alone will save you hours of debugging why lazy list items cascade recompose when one captures size and another reads it. Most of the advice is structural, not just quick fixes: keep the State object, move the .value read into the callback. If you've ever watched recomposition counters climb during a simple scroll, you need this.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/chrisbanes/skills
- Categories
- Frontend Development, Mobile Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from chrisbanes/skills
All 14- Compose Slot Api Pattern970
- Compose State Holder Ui Split969
- Kotlin Types Value Class844
- Compose Ui Testing Patterns2.5K
- Compose Focus Navigation2.1K
- Kotlin Coroutines Structured Concurrency1K
- Compose Recomposition Performance1K
- Kotlin Flow State Event Modeling1K
- Compose Modifier And Layout Style1K
- Compose Side Effects1K
- Kotlin Multiplatform Expect Actual998
- Compose Stability Diagnostics995
- Compose State Authoring994
Recommended
More Frontend Development
cicd-pipeline-generatorailabs-393/ai-labs-claude-skillsThis skill should be used when creating or configuring CI/CD pipeline files for automated testing, building, and deployment. Use this for generating GitHub Acti982skills.sh installs
langchaindavila7/claude-code-templatesFramework for building LLM-powered applications with agents, chains, and RAG. Supports multiple providers (OpenAI, Anthropic, Google), 500+ integrations, ReAct 969skills.sh installs
capacitor-mcpcap-go/capgo-skillsModel Context Protocol (MCP) tools for Capacitor mobile development. Covers Ionic/Capacitor component APIs, plugin documentation, CLI commands, and AI-assisted 961skills.sh installs
presentation-creatormblode/agent-skillsCreates bold, minimal, dark-first presentations with structured narrative arcs, punchy slide copy, high-contrast visual design, and conversational speaker notes960skills.sh installs
light-spotlight-rendervibe-motion/skillsGenerate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors. Use when users ask for 聚光灯扫字动画, spot960skills.sh installs
auth-web-cloudbasetencentcloudbase/skillsCloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked. Provides concise and practical Web authentication so957skills.sh installs