← ClaudeAtlas

wnb-compose-animationlisted

Use this skill when a Jetpack Compose UI is about to gain an animation, or when reviewing existing motion. Enforces the decision-aware gate — first ask "should this UI animate at all?"; only if yes, then pick the smallest API (AnimatedVisibility, animate*AsState, rememberTransition, AnimatedContent, Animatable). Requires every animation to earn its frame budget, carry a label, respect reduce-motion accessibility, and stay off scroll-adjacent recomposition paths. Triggers on "add animation", "animate", "fade in", "make it smooth", "smooth transition", "fancy transition", "AnimatedVisibility", "animate*AsState", "AnimatedContent", "rememberTransition", "Animatable", "Crossfade", "animateContentSize", "should this animate", "reduce motion".
wenubey/claude-android-skills · ★ 0 · Web & Frontend · score 72
Install: claude install-skill wenubey/claude-android-skills
# Jetpack Compose — decision-aware animation Most animation bugs in Compose are not "wrong API" bugs — they are **"did not need to animate in the first place"** bugs. This skill's job is to make the first decision explicit before any code is written. Only after the "should we animate?" gate passes does API selection matter. For deep API selection (which primitive to reach for), this skill is intentionally thin — see `[[compose-animations]]` (chrisbanes/skills) linked at the end. This skill focuses on the **gate**. ## Non-negotiables 1. **Every animation earns its frame budget.** If a reviewer cannot answer "what does this animation communicate?" in one sentence, remove it. 2. **The gate runs first, always.** Before typing `AnimatedVisibility` or `animate*AsState`, answer the three "should we animate?" questions below. If any answer is no, no motion. 3. **Every animation gets a `label`.** `animate*AsState(label = "fabWidth")`, `rememberTransition(label = "phase")`, `AnimatedContent(label = "profile-content")`. Enables the Compose Animation preview and tooling — no exceptions. 4. **Respect reduce-motion.** On Android, wrap animation opt-in on `LocalAccessibilityManager.current?.getRecommendedTimeoutMillis(...)` or the platform's `Settings.Global.TRANSITION_ANIMATION_SCALE`. If motion is disabled, jump to the end state directly. 5. **No animated value on the recomposition-hot path.** Reading a frame-updating `State` in a composable body causes recomposition every frame. For