← スキル一覧に戻る
kmp-ui-bridge
by amirrudd
⭐ 0🍴 0📅 2026年1月22日
Manusで実行SKILL.md
name: kmp-ui-bridge description: Skill for translating web UI patterns (React/Tailwind) to native mobile patterns (Kotlin/Compose Multiplatform).
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.
スコア
総合スコア
50/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
レビュー
💬
レビュー機能は近日公開予定です