cross-platform-design
starsforks
How to install cross-platform-design?
f0d010c/stark/cross-platform-design
$npx -y skills add f0d010c/stark --skill cross-platform-designUse when the user wants one codebase or one product design across web, iOS, Android, Windows, and Mac, asks for the same app on all platforms, asks to translate/port a UI between platforms, or names Compose Multiplatform, Tauri 2, Electron, React Native, Flutter, .NET MAUI, Avalo
SKILL.md
| 1 | # cross-platform-design — translate idiom, not pixels |
| 2 | |
| 3 | Goal: ship one codebase that respects each platform's HIG/Material/Fluent — not a Flutter app that looks like Flutter on every OS. |
| 4 | |
| 5 | ## What This Skill Can Do |
| 6 | |
| 7 | - Choose cross-platform stacks and explain tradeoffs across Tauri, Electron, React Native, Flutter, Compose Multiplatform, Avalonia, Uno, and MAUI. |
| 8 | - Translate Apple, Android, Windows, and web patterns by idiom instead of copying pixels. |
| 9 | - Preserve UX briefs, state coverage, action hierarchy, tokens, desktop archetype, originality seed, layout sketch, and product metaphor across platforms. |
| 10 | - Define per-platform navigation, controls, typography, icons, motion, density, and accessibility adaptations. |
| 11 | - Warn when one shared UI will harm platform fit or when a single-platform implementation is the better choice. |
| 12 | |
| 13 | ## Step 0 — Preserve UX and UI decisions |
| 14 | |
| 15 | If Stark produced a UX decision brief or UI decision brief, keep both as the source of truth. Translate them per platform instead of pixel-cloning. |
| 16 | |
| 17 | Read: |
| 18 | |
| 19 | - `../../references/ui-patterns/surface-taxonomy.md` |
| 20 | - `../../references/ui-patterns/ui-decision-brief.md` |
| 21 | - `../../references/ui-patterns/desktop-app-archetypes.md` |
| 22 | - `../../references/ui-patterns/originality-engine.md` |
| 23 | - `../../references/ui-patterns/design-recipes.md` |
| 24 | - `../../references/ui-patterns/anti-default-contrasts.md` |
| 25 | - `../../references/ui-patterns/visual-hierarchy.md` |
| 26 | - `../../references/ui-patterns/motion-budget.md` |
| 27 | |
| 28 | The shared product should preserve job, state coverage, action hierarchy, visual hierarchy, desktop archetype, originality seed, and layout sketch. Navigation, controls, typography, icons, and motion must become platform-specific, but the chosen shape should remain legible: command center stays a command center, library stays a library, workbench stays a workbench, and monitoring cockpit stays a monitoring cockpit. A product-specific metaphor can translate across platforms; exact pixels and custom controls should not. |
| 29 | |
| 30 | ## Step 1 — Pick the right framework for the design intent |
| 31 | |
| 32 | | User priority | Recommended stack | |
| 33 | |---|---| |
| 34 | | Native feel + Kotlin codebase + iOS support | **Compose Multiplatform 1.8+** (iOS stable since May 2025) | |
| 35 | | Tiny binary, web team, desktop-first | **Tauri 2** (Rust + native webviews; ~3MB) | |
| 36 | | Native Android views + iOS, large ecosystem | **React Native** (New Arch + Fabric + Hermes) | |
| 37 | | Single Skia raster across platforms (custom design system) | **Flutter** — only if pixel control matters more than native feel | |
| 38 | | .NET shop, XAML cross-platform | **Uno Platform 5+** (reuses WinUI XAML) | |
| 39 | | .NET shop, mobile-first | **.NET MAUI** (warn: weaker desktop, weaker iOS feel) | |
| 40 | | Cross-platform desktop + custom theming | **Avalonia 11** with Fluent/Mac themes | |
| 41 | |
| 42 | ## Step 2 — Native-feel ranking by platform |
| 43 | |
| 44 | When the user picks a stack, **state the fidelity tradeoff per platform** in one line each. |
| 45 | |
| 46 | ### Compose Multiplatform 1.8+ |
| 47 | - Android: native (excellent) |
| 48 | - iOS: stable but Material widgets won't feel HIG — you must implement Cupertino-styled Compose components, or accept a Material aesthetic on iOS |
| 49 | - Desktop: good for Compose-driven design, not native Fluent |
| 50 | - Web (Wasm): experimental |
| 51 | |
| 52 | ### Tauri 2 |
| 53 | - Windows: WebView2 chrome — Mica works via window-backdrop API but font rendering and focus rings will look subtly off vs WinUI 3 |
| 54 | - macOS: WKWebView — looks like a web app, not an AppKit/SwiftUI app |
| 55 | - Linux: WebKitGTK |
| 56 | - Mobile (iOS/Android): preview, not production-ready |
| 57 | |
| 58 | ### React Native (New Architecture) |
| 59 | - iOS: real UIKit views, decent. Liquid Glass requires `expo-glass-effect` or native modules; partial adoption. |
| 60 | - Android: real Android views, M3 themable but won't get spring physics or shape morphing without manual work. |
| 61 | - Desktop: react-native-windows / react-native-macos exist, fidelity weaker |
| 62 | |
| 63 | ### Flutter |
| 64 | - All platforms: Skia custom-painted. Never feels native to anyone. |
| 65 | - Material 3 widgets exist but lag platform updates (no spring physics parity, no shape morphing primitives, no real dynamic color). |
| 66 | - **Avoid** for any project where "native feel" is a stated requirement. |
| 67 | |
| 68 | ### Uno Platform |
| 69 | - Windows: native WinUI (excellent) |
| 70 | - iOS / Android / Mac / Web: reuses XAML rendering — distinctive fidelity but not 1:1 with each platform's idiom |
| 71 | - Best XAML cross-platform path |
| 72 | |
| 73 | ### .NET MAUI |
| 74 | - Wi |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
