kmp-ui-bridge
2
总安装量
2
周安装量
#68141
全站排名
安装命令
npx skills add https://github.com/amirrudd/flyerboard --skill kmp-ui-bridge
Agent 安装分布
opencode
2
kilo
2
gemini-cli
2
antigravity
2
claude-code
2
github-copilot
2
Skill 文档
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.