@momo-kits/native-kits 0.157.1-skill.3 → 0.157.1-skill.6-debug

package/.claude/skills/momo-native-kits-skills/README.md

@@ -0,0 +1,52 @@
+# MoMo Native Kits Skills
+
+Generate production-ready Kotlin/Compose code using vn.momo.kits components. NEVER use Material Design.
+
+## Quick Start
+
+```bash
+# Validate generated code
+node scripts/validate-kits.js <file.kt>
+
+# Run tests
+node scripts/test-runner.js
+```
+
+## Skills
+
+| Skill | Components |
+|-------|------------|
+| [form-controls](form-controls/) | Button, Input, CheckBox, Radio, Switch |
+| [data-display](data-display/) | Text, Chip, Badge, Skeleton |
+| [layout](layout/) | Card, Divider |
+| [feedback](feedback/) | Popup, SnackBar, Tooltip, TrustBanner |
+| [navigation](navigation/) | BottomTab, Header, NavigationContainer |
+
+## Usage
+
+1. Identify component needed
+2. Read component reference
+3. Generate code per API
+4. Add AI block markers
+5. Validate
+
+## Scripts
+
+| Script | Purpose |
+|--------|---------|
+| `validate-kits.js` | Validate generated code |
+| `test-runner.js` | Run skill tests |
+| `test-on-device.sh` | Build & test on device |
+
+## Rules
+
+- Use `vn.momo.kits.components` and `vn.momo.kits.const`
+- NO: `androidx.compose.material`, `Material3`, `Material2`
+- Follow [code-convention.md](references/developer/code-convention.md)
+
+## Test Results
+
+```
+Validation Rules: 17/17 ✅
+References: 21/21 ✅
+```

package/.claude/skills/momo-native-kits-skills/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: momo-native-kits-skills
+description: |
+  Generate Kotlin/Compose code using vn.momo.kits components. NEVER use Material Design.
+
+  Use when user mention:
+  - Button, Input, CheckBox, Radio, Switch, Text, Chip, Badge, Skeleton, Card, Divider, Popup, SnackBar, Tooltip, TrustBanner, BottomTab, Header, NavigationContainer
+  - nút bấm, ô nhập, ô tick, nút chọn, nút gạt, chữ, nhãn, thẻ, khung, đường kẻ, xác nhận, thông báo, gợi ý, bảo mật, thanh điều hướng, tiêu đề
+
+  IMPORTANT: Use ONLY MoMo Native Kits components from `vn.momo.kits.*`. NEVER use Material3, Material2.
+---
+
+# MoMo Native Kits
+
+## Prereqs
+- Import: `vn.momo.kits.components`, `vn.momo.kits.const`
+- NO: `androidx.compose.material`, `Material3`, `Material2`
+- Read [code-convention.md](references/developer/code-convention.md) before generating code
+
+## Skills
+
+| Skill | Components | Triggers |
+|-------|------------|----------|
+| [form-controls](form-controls/SKILL.md) | Button, Input, CheckBox, Radio, Switch | button/input/checkbox/radio/switch, nút bấm/ô nhập/ô tick |
+| [data-display](data-display/SKILL.md) | Text, Chip, Badge, Skeleton | text/chip/badge/skeleton, chữ/nhãn/thông báo/loading |
+| [layout](layout/SKILL.md) | Card, Divider | card/divider, thẻ/khung/đường kẻ |
+| [feedback](feedback/SKILL.md) | Popup, SnackBar, Tooltip, TrustBanner | popup/snackbar/tooltip, xác nhận/thông báo/gợi ý |
+| [navigation](navigation/SKILL.md) | BottomTab, Header, NavigationContainer | bottomtab/header, thanh điều hướng/tiêu đề |
+
+## Quick Ref
+- **Validate**: `node scripts/validate-kits.js <file.kt>`
+- **Code Convention**: [references/developer/code-convention.md](references/developer/code-convention.md)

package/.claude/skills/momo-native-kits-skills/data-display/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: data-display
+description: |
+  Text, Title, Chip, Badge, Skeleton. Use vn.momo.kits. NEVER Material.
+  Triggers: text/title/chip/badge/skeleton | chữ/tiêu đề/nhãn/thông báo số/loading/hiển thị
+---
+
+# Data Display
+
+## Prereqs
+- Import: `vn.momo.kits.components`, `vn.momo.kits.const`
+- NO: `Material3`, `Material2`
+- Read [code-convention.md](../references/developer/code-convention.md)
+
+## Components
+| Component | Ref |
+|-----------|-----|
+| Text | [text.md](references/text.md) |
+| Title | [text.md](references/text.md) |
+| Chip | [chip.md](references/chip.md) |
+| Badge | [badge.md](references/badge.md) |
+| Skeleton | [skeleton.md](references/skeleton.md) |
+| Constants | [constants.md](../references/constants.md) |
+| Design | [design-guidelines.md](../references/design-guidelines.md) |
+
+## Workflow (with logging)
+1. **📥 Read** component ref + [constants.md](../references/constants.md) + [code-convention.md](../references/developer/code-convention.md)
+2. **✏️ Generate** code per API
+3. **🏷️ Apply AI Convention**: Add file header + AI-GENERATED START/END markers (per code-convention.md)
+4. **✅ Validate**: `node ../../scripts/validate-kits.js <file.kt>`
+5. **🔧 Fix** errors if any
+
+## Example Log Output
+```
+🤖 data-display: Starting
+📥 → references/text.md
+📥 → ../references/constants.md
+📥 → ../references/developer/code-convention.md
+✏️ → Generating Text component
+🏷️ → Applying AI Convention (header + markers)
+✅ → Validating (5 passed)
+```

package/.claude/skills/momo-native-kits-skills/feedback/SKILL.md

@@ -0,0 +1,43 @@
+---
+name: feedback
+description: |
+  PopupNotify, PopupPromotion, SnackBar, Tooltip, TrustBanner, Information. Use vn.momo.kits. NEVER Material.
+  Triggers: popup/snackbar/tooltip/trustbanner/information/promotion | xác nhận/thông báo/gợi ý/bảo mật/khuyến mãi/cảnh báo
+---
+
+# Feedback
+
+## Prereqs
+- Import: `vn.momo.kits.components`, `vn.momo.kits.const`
+- NO: `Material3`, `Material2`
+- Read [code-convention.md](../references/developer/code-convention.md)
+
+## Components
+| Component | Ref |
+|-----------|-----|
+| PopupNotify | [popup.md](references/popup.md) |
+| PopupPromotion | [popup.md](references/popup.md) |
+| SnackBar | [snackbar.md](references/snackbar.md) |
+| Tooltip | [tooltip.md](references/tooltip.md) |
+| TrustBanner | [trustbanner.md](references/trustbanner.md) |
+| Information | [trustbanner.md](references/trustbanner.md) |
+| Constants | [constants.md](../references/constants.md) |
+| Design | [design-guidelines.md](../references/design-guidelines.md) |
+
+## Workflow (with logging)
+1. **📥 Read** component ref + [constants.md](../references/constants.md) + [code-convention.md](../references/developer/code-convention.md)
+2. **✏️ Generate** code per API
+3. **🏷️ Apply AI Convention**: Add file header + AI-GENERATED START/END markers (per code-convention.md)
+4. **✅ Validate**: `node ../../scripts/validate-kits.js <file.kt>`
+5. **🔧 Fix** errors if any
+
+## Example Log Output
+```
+🤖 feedback: Starting
+📥 → references/popup.md
+📥 → ../references/constants.md
+📥 → ../references/developer/code-convention.md
+✏️ → Generating Popup component
+🏷️ → Applying AI Convention (header + markers)
+✅ → Validating (6 passed)
+```

package/.claude/{momo-native-kits-skill → skills/momo-native-kits-skills/feedback}/references/popup.md

@@ -12,8 +12,7 @@ fun PopupNotify(
 
 data class PopupNotifyProps(
     val title: String,
-    val message: String? = null,
-    val type: PopupNotifyType = PopupNotifyType.INFO,
+    val description: String? = null,
     val primary: PopupAction? = null,
     val secondary: PopupAction? = null,
     val onIconClose: (() -> Unit)? = null,
@@ -24,10 +23,6 @@ data class PopupAction(
     val title: String,
     val onPress: () -> Unit
 )
-
-enum class PopupNotifyType {
-    SUCCESS, ERROR, WARNING, INFO
-}
 ```
 
 ## Basic
@@ -36,8 +31,7 @@ enum class PopupNotifyType {
 PopupNotify(
     props = PopupNotifyProps(
         title = "Thành công",
-        message = "Giao dịch đã được xử lý",
-        type = PopupNotifyType.SUCCESS,
+        description = "Giao dịch đã được xử lý",
         onIconClose = { showPopup = false }
     )
 )
@@ -49,8 +43,7 @@ PopupNotify(
 PopupNotify(
     props = PopupNotifyProps(
         title = "Xác nhận",
-        message = "Bạn có chắc muốn xóa?",
-        type = PopupNotifyType.WARNING,
+        description = "Bạn có chắc muốn xóa?",
         primary = PopupAction(title = "Xóa", onPress = { /* delete */ }),
         secondary = PopupAction(title = "Hủy", onPress = { /* cancel */ }),
         onIconClose = { showPopup = false }

package/.claude/skills/momo-native-kits-skills/form-controls/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: form-controls
+description: |
+  Button, Input, CheckBox, Radio, Switch, InputSearch, InputOTP, InputMoney, InputDropDown, InputPhoneNumber. Use vn.momo.kits. NEVER Material.
+  Triggers: button/input/checkbox/radio/switch/search/otp/money/dropdown/phone | nút bấm/ô nhập/ô tick/nút chọn/nút gạt/tìm kiếm/mã xác thực/tiền/chọn danh sách/số điện thoại
+---
+
+# Form Controls
+
+## Prereqs
+- Import: `vn.momo.kits.components`, `vn.momo.kits.const`
+- NO: `Material3`, `Material2`
+- Read [code-convention.md](../references/developer/code-convention.md)
+
+## Components
+| Component | Ref |
+|-----------|-----|
+| Button | [button.md](references/button.md) |
+| Input | [input.md](references/input.md) |
+| CheckBox | [checkbox.md](references/checkbox.md) |
+| Radio | [radio.md](references/radio.md) |
+| Switch | [switch.md](references/switch.md) |
+| Constants | [constants.md](../references/constants.md) |
+| Design | [design-guidelines.md](../references/design-guidelines.md) |
+
+## Workflow (with logging)
+1. **📥 Read** component ref + [constants.md](../references/constants.md) + [code-convention.md](../references/developer/code-convention.md)
+2. **✏️ Generate** code per API
+3. **🏷️ Apply AI Convention**: Add file header + AI-GENERATED START/END markers (per code-convention.md)
+4. **✅ Validate**: `node ../../scripts/validate-kits.js <file.kt>`
+5. **🔧 Fix** errors if any
+
+## Example Log Output
+```
+🤖 form-controls: Starting
+📥 → references/switch.md
+📥 → ../references/constants.md
+📥 → ../references/developer/code-convention.md
+✏️ → Generating Switch component
+🏷️ → Applying AI Convention (header + markers)
+✅ → Validating (9 passed)
+```

package/.claude/{momo-native-kits-skill → skills/momo-native-kits-skills/form-controls}/references/button.md

@@ -121,8 +121,7 @@ Button(
 Button(
     onClick = { /* Will not trigger */ },
     title = "Không thể click",
-    type = ButtonType.DISABLED,
-    enabled = false
+    type = ButtonType.DISABLED
 )
 ```
 
@@ -154,7 +153,7 @@ fun LoginScreen() {
             modifier = Modifier.fillMaxWidth()
         )
 
-        TextButton(
+        Button(
             onClick = { /* Navigate to forgot password */ },
             title = "Quên mật khẩu?",
             type = ButtonType.TEXT

package/.claude/{momo-native-kits-skill → skills/momo-native-kits-skills/form-controls}/references/input.md

@@ -326,11 +326,9 @@ fun InputPhoneNumber(
     text: MutableState<String>,
     onChangeText: (String) -> Unit,
     modifier: Modifier = Modifier,
-    floatingValue: String = "",
     placeholder: String = "",
     error: String = "",
-    enabled: Boolean = true,
-    countryCode: String = "+84"          // Default country code
+    enabled: Boolean = true
 )
 ```
 
@@ -342,9 +340,7 @@ val phone = remember { mutableStateOf("") }
 InputPhoneNumber(
     text = phone,
     onChangeText = { phone.value = it },
-    floatingValue = "Số điện thoại",
-    placeholder = "Nhập số điện thoại",
-    countryCode = "+84"
+    placeholder = "Nhập số điện thoại"
 )
 ```
 
@@ -364,7 +360,7 @@ fun LoginForm() {
         InputPhoneNumber(
             text = phone,
             onChangeText = { phone.value = it },
-            floatingValue = "Số điện thoại"
+            placeholder = "Số điện thoại"
         )
 
         Input(

package/.claude/{momo-native-kits-skill → skills/momo-native-kits-skills/form-controls}/references/radio.md

@@ -7,12 +7,12 @@
 ```kotlin
 @Composable
 fun Radio(
-    value: T,                          // Required: This radio's value
-    onChange: (T) -> Unit,            // Required: Selection callback
-    groupValue: T,                    // Required: Currently selected value
-    modifier: Modifier = Modifier,
-    label: String = "",                // Label text
-    enabled: Boolean = true
+    value: Any,                    // Required: This radio's value
+    groupValue: Any,               // Required: Currently selected value
+    disabled: Boolean = false,     // Disabled state
+    onChange: () -> Unit = {},     // Selection callback (no param)
+    label: String = "",            // Label text
+    modifier: Modifier = Modifier
 )
 ```
 
@@ -24,14 +24,14 @@ var selectedOption by remember { mutableStateOf("option1") }
 Column {
     Radio(
         value = "option1",
-        onChange = { selectedOption = it },
+        onChange = { selectedOption = "option1" },
         groupValue = selectedOption,
         label = "Option 1"
     )
 
     Radio(
         value = "option2",
-        onChange = { selectedOption = it },
+        onChange = { selectedOption = "option2" },
         groupValue = selectedOption,
         label = "Option 2"
     )
@@ -48,7 +48,7 @@ var gender by remember { mutableStateOf(Gender.MALE) }
 Gender.entries.forEach { g ->
     Radio(
         value = g,
-        onChange = { gender = it },
+        onChange = { gender = g },
         groupValue = gender,
         label = when (g) {
             Gender.MALE -> "Nam"

package/.claude/skills/momo-native-kits-skills/layout/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: layout
+description: |
+  Card, Divider. Use vn.momo.kits. NEVER Material.
+  Triggers: card/divider | thẻ/khung/đường kẻ/bố cục
+---
+
+# Layout
+
+## Prereqs
+- Import: `vn.momo.kits.components`, `vn.momo.kits.const`
+- NO: `Material3`, `Material2`
+- Read [code-convention.md](../references/developer/code-convention.md)
+
+## Components
+| Component | Ref |
+|-----------|-----|
+| Card | [card.md](references/card.md) |
+| Divider | [divider.md](references/divider.md) |
+| Constants | [constants.md](../references/constants.md) |
+| Design | [design-guidelines.md](../references/design-guidelines.md) |
+
+## Workflow (with logging)
+1. **📥 Read** component ref + [constants.md](../references/constants.md) + [code-convention.md](../references/developer/code-convention.md)
+2. **✏️ Generate** code per API
+3. **🏷️ Apply AI Convention**: Add file header + AI-GENERATED START/END markers (per code-convention.md)
+4. **✅ Validate**: `node ../../scripts/validate-kits.js <file.kt>`
+5. **🔧 Fix** errors if any
+
+## Example Log Output
+```
+🤖 layout: Starting
+📥 → references/divider.md
+📥 → ../references/constants.md
+📥 → ../references/developer/code-convention.md
+✏️ → Generating Divider component
+🏷️ → Applying AI Convention (header + markers)
+✅ → Validating (5 passed)
+```

package/.claude/skills/momo-native-kits-skills/navigation/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: navigation
+description: |
+  BottomTab, Header, NavigationContainer, setOptions. Use vn.momo.kits. NEVER Material.
+  Triggers: bottomtab/header/navigation/navigator/setOptions | thanh điều hướng/tiêu đề/điều hướng/chuyển màn hình
+---
+
+# Navigation
+
+## Prereqs
+- Import: `vn.momo.kits.components`, `vn.momo.kits.const`
+- NO: `Material3`, `Material2`
+- Read [code-convention.md](../references/developer/code-convention.md)
+
+## Components
+| Component | Ref |
+|-----------|-----|
+| Navigation | [navigation.md](references/navigation.md) |
+| Constants | [constants.md](../references/constants.md) |
+| Design | [design-guidelines.md](../references/design-guidelines.md) |
+
+## Workflow (with logging)
+1. **📥 Read** component ref + [constants.md](../references/constants.md) + [code-convention.md](../references/developer/code-convention.md)
+2. **✏️ Generate** code per API
+3. **🏷️ Apply AI Convention**: Add file header + AI-GENERATED START/END markers (per code-convention.md)
+4. **✅ Validate**: `node ../../scripts/validate-kits.js <file.kt>`
+5. **🔧 Fix** errors if any
+
+## Example Log Output
+```
+🤖 navigation: Starting
+📥 → references/navigation.md
+📥 → ../references/constants.md
+📥 → ../references/developer/code-convention.md
+✏️ → Generating BottomTab component
+🏷️ → Applying AI Convention (header + markers)
+✅ → Validating (4 passed)
+```

package/.claude/skills/momo-native-kits-skills/output/test-report.json

@@ -0,0 +1,12 @@
+{
+  "timestamp": "2026-03-17T03:06:54.981Z",
+  "rules": {
+    "passed": 19,
+    "total": 19
+  },
+  "references": {
+    "passed": 16,
+    "total": 16
+  },
+  "testCases": 16
+}

package/.claude/skills/momo-native-kits-skills/output/validation-result.json

@@ -0,0 +1,108 @@
+{
+  "file": "sample/shared/src/commonMain/kotlin/screens/TestComponents.kt",
+  "validatedAt": "2026-03-17T03:10:45.378Z",
+  "summary": {
+    "total": 12,
+    "passed": 12,
+    "errors": 0,
+    "warnings": 0
+  },
+  "results": [
+    {
+      "id": "no-material-import",
+      "category": "Global",
+      "name": "No Material Design imports",
+      "severity": "error",
+      "passed": true,
+      "evidence": "No Material imports found"
+    },
+    {
+      "id": "no-material-components",
+      "category": "Global",
+      "name": "No Material components used",
+      "severity": "error",
+      "passed": true,
+      "evidence": "No Material components used"
+    },
+    {
+      "id": "momo-kits-import",
+      "category": "Global",
+      "name": "Uses vn.momo.kits imports",
+      "severity": "warning",
+      "passed": true,
+      "evidence": "Found vn.momo.kits imports"
+    },
+    {
+      "id": "button-no-text",
+      "category": "Button",
+      "name": "Button uses \"title\" (not \"text\")",
+      "severity": "error",
+      "passed": true,
+      "evidence": "Button uses correct param name"
+    },
+    {
+      "id": "button-no-enabled",
+      "category": "Button",
+      "name": "Button has no \"enabled\" param",
+      "severity": "error",
+      "passed": true,
+      "evidence": "No invalid \"enabled\" param on Button"
+    },
+    {
+      "id": "checkbox-no-enabled",
+      "category": "CheckBox",
+      "name": "CheckBox uses \"disabled\" (not \"enabled\")",
+      "severity": "error",
+      "passed": true,
+      "evidence": "CheckBox uses correct \"disabled\" param"
+    },
+    {
+      "id": "checkbox-no-modifier",
+      "category": "CheckBox",
+      "name": "CheckBox has no modifier param",
+      "severity": "warning",
+      "passed": true,
+      "evidence": "No invalid modifier on CheckBox"
+    },
+    {
+      "id": "phone-no-floatingValue",
+      "category": "InputPhoneNumber",
+      "name": "InputPhoneNumber has no floatingValue",
+      "severity": "error",
+      "passed": true,
+      "evidence": "No invalid floatingValue usage"
+    },
+    {
+      "id": "phone-no-countryCode",
+      "category": "InputPhoneNumber",
+      "name": "InputPhoneNumber has no countryCode",
+      "severity": "error",
+      "passed": true,
+      "evidence": "No invalid countryCode usage"
+    },
+    {
+      "id": "text-no-fontSize",
+      "category": "Text",
+      "name": "Text uses \"style\" (not \"fontSize\")",
+      "severity": "warning",
+      "passed": true,
+      "evidence": "Text typography usage looks correct"
+    },
+    {
+      "id": "state-remember",
+      "category": "State",
+      "name": "MutableState uses remember",
+      "severity": "warning",
+      "passed": true,
+      "evidence": "State properly wrapped in remember"
+    },
+    {
+      "id": "nav-no-scaffold",
+      "category": "Navigation",
+      "name": "No Scaffold (use NavigationContainer)",
+      "severity": "error",
+      "passed": true,
+      "evidence": "No Scaffold usage"
+    }
+  ]
+}