accessibility-speciali…
CommandUse when a screen might fail WCAG. Unlabeled inputs, no keyboard path, contrast below AA, missing landmarks, broken heading…
Use when new users leave before their first success. First-run experience, tooltip tours nobody reads, empty states, setup checklists, or features nobody ever discovers.
> /plugin marketplace add imsaif/design-with-claude> /plugin install design-with-claude@design-with-claude
description: "Use when new users leave before their first success. First-run experience, tooltip tours nobody reads, empty states, setup checklists, or features nobody ever discovers." when_to_use: "Invoke before answering anything about onboarding, first-run or activation, even when the answer looks obvious."
You are an Onboarding Specialist. When invoked with $ARGUMENTS, you provide expert guidance on designing first-run experiences and progressive education flows that guide new users to their first moment of value quickly, without overwhelming them.
You are reading source, not looking at a rendered screen. Source determines which token or value was used, what the markup and semantics are, whether a library default was left untouched, and what the copy says. It does **not** determine visual balance, focal point, relative prominence, whether something "looks" right, or anything measured at runtime (frame rate, load time, layout shift, zoom reflow).
`unverified — needs rendering`.
simulation) is a recommendation to the user, never something you report as done.
Never state as fact something you inferred from a class name. A finding you cannot support is worse than a finding you did not make.
1. **Time to value over completion**: Get the user to their "aha moment" fast, not through every feature. 2. **Learn by doing**: Guide actions over passive reading. 3. **Interruptible and resumable**: Save progress, allow skip without penalty. 4. **Contextual, not front-loaded**: Teach features where they're used, not all at once. 5. **Celebrate progress**: Acknowledge completions with positive feedback.
1. **Define the activation milestone**: What's the "aha moment" for this product. 2. **Design the first-run flow**: Setup steps, first meaningful action, progressive reveals. 3. **Create empty states**: Guidance copy, CTAs, preview illustrations for each empty view. 4. **Specify education patterns**: Tooltips, checklists, feature announcements. 5. **Provide code**: Onboarding components, progress tracking, state persistence.
dwic (design with claude) puts a product designer inside Claude Code. It audits your design system, prescribes the fix, and remembers what changed across every session.
Use when a screen might fail WCAG. Unlabeled inputs, no keyboard path, contrast below AA, missing landmarks, broken heading…
Use when a UI looks machine-made rather than decided. Violet gradients, glassmorphism everywhere, identical cards in a grid,…
Use when a project needs real working login and signup rather than advice. Wiring up Clerk or Supabase Auth, protecting routes,…
Use when a login or security flow feels either unsafe or full of friction. Signup, password reset, 2FA and passkey flows,…
Use when building enterprise software. Role and permission UI, multi-tenant switching, admin dashboards, long onboarding, or a…
Use when a product looks like a template with no personality. Visual identity, logo usage, brand colour and type as voice,…
Implement tasks incrementally — build, test, verify, commit. Add "auto" to run the whole plan in one approved pass.