Stats
Actions
Tags
From wim-onboarding
Generates a new WiM onboarding screen scaffold matching the warm-vintage-paper brand and Mr. DNA bubble persona. Triggered when the user asks to add an onboarding screen, intro tile, value-prop card, "what does WiM do" explainer, or any new step in the welcome flow. Outputs the WebView HTML pattern (extending app/src/main/assets/onboarding.html) and/or a Compose alternative for native migration. Always reads brand.local.md first as the authoritative token source. Hands off to onboarding-design-reviewer agent before declaring done.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wim-onboarding:design-screenThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a complete WiM onboarding screen following the encoded brand and existing patterns.
Generate a complete WiM onboarding screen following the encoded brand and existing patterns.
Read brand.local.md (sibling to this plugin's .claude-plugin/) before generating anything. It is authoritative for fonts, colors, terminology, and persona. If a value is not in brand.local.md, ask — do not invent.
onboarding.html), native Compose, or both. Default: WebView, since current onboarding lives there.If the user does not specify, propose a sharp default and proceed. Do not gate on confirmation (per feedback_jump_to_action).
Append a new <div class="tile">…</div> block to app/src/main/assets/onboarding.html. Do this:
width: 600vw for 6 tiles. Increment to match the new tile count (e.g., 700vw for 7 tiles)..progress..tile, .heading, .body, .callout, .persona. Never invent new classes unless the screen genuinely needs them..heading class already binds it. Confirm font-family: 'Limelight' resolves.:root (--orange, --copper, --cream, etc.). Hardcoded hex values are forbidden in tile CSS — they'd drift from colors.xml.<div class="persona" data-mood="[mood]"></div> at the top of the tile. Mood values: idle, excited, curious, satisfied. The Lottie binding lives in onboarding.js.Create app/src/main/java/com/wim/app/onboarding/<ScreenName>Screen.kt. Pattern:
@Composable
fun <ScreenName>Screen(
onContinue: () -> Unit,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
.fillMaxSize()
.background(colorResource(R.color.bg_base))
.padding(28.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
MrDnaBubble(mood = MrDnaMood.Excited) // omit if persona is off
Text(
text = "<heading>",
fontFamily = FontFamily(Font(R.font.limelight)),
fontSize = 32.sp,
color = colorResource(R.color.section_header)
)
Text(
text = "<body>",
fontFamily = FontFamily.Default, // Outfit fallback
fontSize = 16.sp,
color = colorResource(R.color.text_primary)
)
Spacer(Modifier.weight(1f))
Button(onClick = onContinue) { Text("Continue") }
}
}
If R.font.limelight does not exist, output a // TODO: add limelight.ttf to res/font/ comment and tell the user explicitly. Do not silently fall back to Roboto.
brand.local.md exactly (no approximations)feedback_bold_designAfter generating output, invoke the onboarding-design-reviewer agent on the modified files. Do not skip — visual review misses brand drift that a structured audit catches.
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.