Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Use when the user asks to build, design, mock up, scaffold, audit, translate, or improve any interface, flow, screen, page, component, app, UX, onboarding, checkout, dashboard workflow, product flow, design system, asset plan, motion plan, or non-generic UI and the target platform or flow is ambiguous. Routes to ux-design, web, Windows, Apple, Android, cross-platform, design-token, originality, asset/reference, and platform skills. SKIP when the request explicitly names one platform and no UX fl
.claude/skills/hashgraph-online-design-router/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-05 | ✗→✓ | ▲ Improved | 73% | 0% |
| case-01 | ✗→✓ | ▲ Improved | 40% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 51% | 0% |
| case-14 | ✗→✓ | ▲ Improved | 59% | 0% |
| case-12 | ✗→✓ | ▲ Improved | -27% | 0% |
This skill is the entry point when a UI/UX request is ambiguous. Goal: pick the right UX and platform skill, do not over-eagerly route to web.
Route to ux-design before platform visuals when the request includes:
If the request is both UX and platform-specific, read ux-design first, then the matching platform skill.
Scan for explicit signals (in priority order):
| Signal in request | Route to | |---|---| | "onboarding", "checkout", "signup", "form flow", "empty state", "loading state", "error state", "admin workflow", "CRM", "internal tool", "SaaS dashboard", "user journey" | ux-design first, then platform skill | | "translate this UI", "translate this screen", "translate this design", "port this UI", "convert this screen", "from iOS to Windows", "from Apple to Android" | cross-platform-design first, then the target platform skill | | "design tokens", "export tokens", "DTCG", "token JSON", "ColorScheme", "Typography tokens", "Tailwind tokens", "SwiftUI tokens", "Compose tokens" | design-tokens | | .tsx .jsx .html .svelte .vue, "Tailwind", "Next.js", "Astro", "shadcn", "landing page", "marketing site", "dashboard in React" | web-design | | .xaml .cs (with WinUI/UWP/WPF), "Windows app", "Fluent", "Mica", "WinUI", "Win11", "Microsoft Store app", "PowerToys-style" | windows-design | | .swift .swiftui, "SwiftUI", "iOS app", "iPadOS", "macOS", "Liquid Glass", "HIG", "SF Symbols", "App Store", "Tahoe" | apple-design | | .kt .kts, "Compose", "Jetpack Compose", "Material 3", "Material You", "Pixel app", "Android app" | android-design | | "Tauri", "Electron", "Flutter", "React Native", "Expo", "Compose Multiplatform", "CMP", "Uno Platform", "Avalonia", "MAUI" | cross-platform-design |
Ask one question, no more:
> "Which platform is this for? (1) Web - React/Tailwind/Astro (2) Windows - WinUI 3 / WPF (3) iOS / macOS - SwiftUI (4) Android - Jetpack Compose (5) Cross-platform - Tauri 2, Compose Multiplatform, React Native, Flutter. If this is mainly UX, describe the user flow and I'll start there."
Do not assume web. Web defaults are how the official frontend-design skill produces native-looking-wrong code.
If the user wants the same product on multiple platforms (e.g. "iOS + Android + web"):
cross-platform-design or successive single-platform skills, respecting each idiom, not pixel-cloning.Same product ≠ same UI. A Settings screen on iOS uses grouped Form, on Android uses LargeTopAppBar + LazyColumn, on Windows uses NavigationView + SettingsCard. Translate idiom, not pixels.
Once routed, the UX or platform SKILL.md takes over. State what you picked and why in one sentence, then proceed.
If UX ran first, carry its UX decision brief into the platform skill and preserve the job, state coverage, action hierarchy, and recovery path.
For any build/redesign request, also carry a UI decision brief from ../../references/ui-patterns/ui-decision-brief.md into the platform skill. This keeps visual hierarchy, density, component grammar, and motion budget explicit.
When uncertain, ask. One clarifying question is cheaper than 800 lines of wrong-platform code.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-03 | fail→fail | 20,431 | 20,839 | +2% | 1 | 1 | 0% | 2,629 | 3,692 | +40% | 0 | 0 | — |
case-04 | pass→pass | 23,083 | 15,998 | -31% | 1 | 1 | 0% | 2,385 | 3,327 | +39% | 0 | 0 | — |
case-05 | fail→pass | 15,125 | 18,605 | +23% | 1 | 1 | 0% | 2,393 | 4,132 | +73% | 0 | 0 | — |
case-01 | fail→pass | 13,623 | 13,594 | -0% | 1 | 1 | 0% | 1,887 | 2,637 | +40% | 0 | 0 | — |
case-02 | fail→pass | 24,656 | 33,767 | +37% | 1 | 1 | 0% | 3,539 | 5,357 | +51% | 0 | 0 | — |
case-06 | pass→pass | 21,515 | 15,574 | -28% | 1 | 1 | 0% | 2,201 | 2,769 | +26% | 0 | 0 | — |
case-07 | fail→fail | 21,621 | 19,244 | -11% | 1 | 1 | 0% | 3,147 | 4,844 | +54% | 0 | 0 | — |
case-08 | pass→pass | 15,878 | 14,480 | -9% | 1 | 1 | 0% | 2,468 | 2,784 | +13% | 0 | 0 | — |
case-09 | pass→pass | 22,852 | 24,302 | +6% | 1 | 1 | 0% | 3,276 | 4,796 | +46% | 0 | 0 | — |
case-14 | fail→pass | 18,175 | 43,523 | +139% | 1 | 1 | 0% | 3,443 | 5,479 | +59% | 0 | 0 | — |
case-10 | pass→pass | 16,578 | 20,520 | +24% | 1 | 1 | 0% | 2,548 | 3,546 | +39% | 0 | 0 | — |
case-11 | pass→pass | 12,885 | 4,648 | -64% | 1 | 1 | 0% | 1,162 | 2,021 | +74% | 0 | 0 | — |
case-12 | fail→pass | 18,520 | 7,317 | -60% | 1 | 1 | 0% | 3,130 | 2,281 | -27% | 0 | 0 | — |
case-13 | pass→pass | 14,935 | 4,470 | -70% | 1 | 1 | 0% | 1,561 | 1,961 | +26% | 0 | 0 | — |
case-15 | fail→pass | 24,425 | 22,953 | -6% | 1 | 1 | 0% | 2,612 | 4,535 | +74% | 0 | 0 | — |
case-16 | fail→pass | 18,744 | 37,789 | +102% | 1 | 1 | 0% | 3,720 | 9,506 | +156% | 0 | 0 | — |
case-17 | pass→pass | 18,476 | 13,243 | -28% | 1 | 1 | 0% | 2,116 | 3,507 | +66% | 0 | 0 | — |
case-18 | pass→pass | 24,309 | 20,810 | -14% | 1 | 1 | 0% | 3,580 | 4,107 | +15% | 0 | 0 | — |
case-19 | fail→pass | 37,491 | 36,268 | -3% | 1 | 1 | 0% | 5,034 | 6,988 | +39% | 0 | 0 | — |
case-20 | pass→pass | 20,348 | 10,502 | -48% | 1 | 1 | 0% | 1,860 | 1,985 | +7% | 0 | 0 | — |
case-21 | pass→pass | 25,085 | 18,163 | -28% | 1 | 1 | 0% | 4,012 | 4,263 | +6% | 0 | 0 | — |
case-22 | fail→fail | 18,295 | 11,135 | -39% | 1 | 1 | 0% | 2,052 | 2,281 | +11% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +36 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.