kmp-ui-bridge
SKILL.md
KMP UI Bridge
This skill provides a translation layer between web and native mobile UI development.
UI Mapping Guide
Layouts
| Web (Tailwind) | Mobile (Compose) |
|---|---|
flex flex-col |
Column |
flex flex-row |
Row |
grid |
LazyVerticalGrid or Box |
p-4 |
Modifier.padding(16.dp) |
gap-4 |
Arrangement.spacedBy(16.dp) |
items-center |
Alignment.CenterVertically |
justify-between |
Arrangement.SpaceBetween |
Components
| Web Component | Mobile Component |
|---|---|
<Button> |
Button or IconButton |
<Input> |
TextField or OutlinedTextField |
<img /> |
AsyncImage (Coil) |
<Dialog> |
AlertDialog |
<toast> |
Snackbar |
Styling
| Tailwind Class | Compose Parameter |
|---|---|
rounded-lg |
RoundedCornerShape(8.dp) |
shadow-md |
Modifier.shadow(elevation = 4.dp) |
bg-primary |
color = MaterialTheme.colorScheme.primary |
font-bold |
fontWeight = FontWeight.Bold |
Shared Logic Patterns
When moving logic from src/ to mobile/shared/:
- Extract purely logical functions into
commonMain. - Use
Flowinstead of React state for asynchronous data streams. - Implement
Repositorypattern to share API call logic.
Examples
translation-example.md
See resources/translation-example.md for a side-by-side comparison of a UI component in both platforms.
Weekly Installs
2
Repository
amirrudd/flyerboardFirst Seen
Feb 26, 2026
Security Audits
Installed on
opencode2
kilo2
gemini-cli2
antigravity2
claude-code2
github-copilot2