From wim-onboarding
Adds animation to a WiM onboarding screen — Lottie sequences for the Mr. DNA bubble persona, Compose AnimatedVisibility/updateTransition/AnimatedContent for screen transitions and reactive UI, or spring-physics motion for the bubble's signature wobble. Triggered when the user asks to animate an element, add a Lottie file, make something bounce/wobble/fade, animate a transition, or "make it move." Always uses spring physics for the persona; tween easing is forbidden for Mr. DNA motion.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wim-onboarding:add-animationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Add animation to onboarding UI using the right primitive for the job.
Add animation to onboarding UI using the right primitive for the job.
Is this Mr. DNA's body motion (wobble, breathing, idle sway)?
→ Spring physics. NEVER tween. NEVER Lottie for this — it's interactive physics.
Is this an illustrated sequence (Mr. DNA waving, a permission flow demo, a hand pointing)?
→ Lottie JSON. Place under app/src/main/res/raw/, reference via LottieCompositionSpec.RawRes.
Is this a UI transition (screen-in, fade, content swap)?
→ Compose: AnimatedVisibility, AnimatedContent, Crossfade, or updateTransition.
Is this in the WebView (onboarding.html)?
→ CSS transitions for UI; Lottie via lottie-web for persona sequences. JS in onboarding.js.
@Composable
fun MrDnaBubble(mood: MrDnaMood) {
val composition by rememberLottieComposition(
LottieCompositionSpec.RawRes(when (mood) {
MrDnaMood.Idle -> R.raw.mrdna_idle
MrDnaMood.Excited -> R.raw.mrdna_excited
MrDnaMood.Curious -> R.raw.mrdna_curious
MrDnaMood.Satisfied -> R.raw.mrdna_satisfied
})
)
LottieAnimation(
composition = composition,
iterations = LottieConstants.IterateForever,
modifier = Modifier.size(160.dp)
)
}
Required dependency: implementation("com.airbnb.android:lottie-compose:6.4.0") in app/build.gradle.kts. If the Lottie JSON file does not exist in res/raw/, output a TODO and stop — do not invent one. Lottie generation is a designer task; the plugin can prepare the binding but never the asset.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
lottie.loadAnimation({
container: document.querySelector('.persona[data-mood="excited"]'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'mrdna_excited.json' // bundled in assets/
});
</script>
Bundle the JSON in app/src/main/assets/. Same rule: never fabricate Lottie JSON.
val bubbleOffset by animateDpAsState(
targetValue = if (isPressed) 4.dp else 0.dp,
animationSpec = spring(
dampingRatio = Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessLow
)
)
Damping ratios:
DampingRatioHighBouncy — flamboyant, use sparinglyDampingRatioMediumBouncy — Mr. DNA defaultDampingRatioLowBouncy — tight, almost flatStiffness:
StiffnessHigh — fast snapStiffnessMedium — Mr. DNA wobbleStiffnessLow — lazy, organicStiffnessVeryLow — driftAnimatedVisibility(
visible = isCardShown,
enter = slideInVertically { it } + fadeIn(),
exit = slideOutVertically { -it } + fadeOut()
) {
PermissionCard(...)
}
AnimatedContent(
targetState = currentScreen,
transitionSpec = {
slideInHorizontally { it } togetherWith slideOutHorizontally { -it }
}
) { screen ->
when (screen) { /* … */ }
}
The existing onboarding.html uses transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) for tile slides. Match that easing for any new tile-level transitions to keep the slider feel consistent.
For persona micro-motion in WebView, prefer Lottie over CSS keyframes — keyframes drift visually from the Compose spring once you migrate.
width, height, top, left); animate transform and opacityanimation-validator agent for reviewInvoke animation-validator after the animation is in place. It checks for tween-on-persona, missing Lottie assets, layout-property animation, and frame-rate hazards.
npx claudepluginhub gugosf114/wim-android --plugin wim-onboardingCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.