@momo-kits/native-kits 0.158.1-beta.1-debug → 0.158.1-beta.2-debug

package/.claude/skills/design-system/references/tokens/spacing-radius.md

@@ -1,144 +0,0 @@
-# Spacing & Radius — Design Guideline
-
-## Spacing Scale
-
-MoMo KitX uses a consistent spacing scale for padding, margins, and gaps.
-
-| Token | Value | Design Use |
-|-------|-------|------------|
-| `Spacing.XXS` | 2 | Micro gap (icon-to-text inline) |
-| `Spacing.XS` | 4 | Tight gap (badge offset, dense lists) |
-| `Spacing.S` | 8 | Small gap (between related elements, icon padding) |
-| `Spacing.M` | 12 | Default gap (content padding, list item spacing) |
-| `Spacing.L` | 16 | Standard padding (card padding, section margins) |
-| `Spacing.XL` | 24 | Large gap (section separation, modal padding) |
-| `Spacing.XXL` | 32 | Extra large (page top/bottom padding, major sections) |
-| `Spacing.3XL` | 48 | RN only — hero spacing |
-| `Spacing.4XL` | 56 | RN only — large hero spacing |
-| `Spacing.5XL` | 64 | RN only — extra large spacing |
-
----
-
-## Spacing Usage Rules
-
-### Component Internal Spacing
-
-| Component | Padding | Gap |
-|-----------|---------|-----|
-| Button (large) | `Spacing.L` horizontal, `Spacing.M` vertical | `Spacing.S` icon-to-text |
-| Button (medium) | `Spacing.M` horizontal, `Spacing.S` vertical | `Spacing.S` icon-to-text |
-| Button (small) | `Spacing.S` horizontal, `Spacing.XS` vertical | `Spacing.XS` icon-to-text |
-| Card | `Spacing.L` all sides | — |
-| Input | `Spacing.M` horizontal, `Spacing.S` vertical | — |
-| List item | `Spacing.L` horizontal, `Spacing.M` vertical | `Spacing.M` between items |
-| Badge | `Spacing.XS` horizontal | — |
-| Tag | `Spacing.S` horizontal, `Spacing.XXS` vertical | — |
-
-### Layout Spacing
-
-| Context | Token | Value |
-|---------|-------|-------|
-| Screen horizontal margin | `Spacing.L` | 16 |
-| Section margin (Section component) | 12 | 12 (built-in) |
-| Between cards in a section | `Spacing.M` | 12 |
-| Between sections | `Spacing.XL` | 24 |
-| Modal/sheet content padding | `Spacing.XL` | 24 |
-| Form field vertical gap | `Spacing.L` | 16 |
-| Inline element gap | `Spacing.S` | 8 |
-
-### Layout Grid
-
-React Native uses a **12-column grid** via `Screen > Section > Card > Item`:
-
-```
-Screen (full width)
-└── Section (12px margin each side)
-    └── Card (container with optional shadow)
-        ├── Item widthSpan=12  → full width
-        ├── Item widthSpan=6   → half width
-        ├── Item widthSpan=4   → one-third width
-        └── Item widthSpan=3   → one-quarter width
-```
-
----
-
-## Radius Scale
-
-| Token | Value | Design Use |
-|-------|-------|------------|
-| `Radius.XXS` | 2 | Subtle rounding (tags, small elements) |
-| `Radius.XS` | 4 | Small elements (badges, small buttons) |
-| `Radius.S` | 8 | Cards, inputs, containers |
-| `Radius.M` | 12 | Medium containers, dropdowns |
-| `Radius.L` | 16 | Modals, bottom sheets, large cards |
-| `Radius.XL` | 24 | Pills, chips, rounded buttons |
-
-### Radius Usage Rules
-
-| Element | Radius Token |
-|---------|-------------|
-| Card | `Radius.S` (8) |
-| Input field | `Radius.S` (8) |
-| Button (large) | `Radius.XL` (24) — pill shape |
-| Button (small) | `Radius.M` (12) |
-| Modal | `Radius.L` (16) top corners |
-| Bottom sheet | `Radius.L` (16) top corners |
-| Chip / Tag | `Radius.XL` (24) — full pill |
-| Avatar | Full circle (50% radius) |
-| Tooltip | `Radius.S` (8) |
-| Badge | Full circle or `Radius.XS` (4) |
-
----
-
-## Spacing Annotation Examples
-
-### Card with content
-```
-┌───────────────────────────────────────────┐
-│ Spacing.L (16)                            │
-│  ┌─────────────────────────────────────┐  │
-│  │ Title (headline_s_bold)             │  │
-│  │                                     │  │
-│  │ Spacing.S (8) gap                   │  │
-│  │                                     │  │
-│  │ Description (body_default_regular)  │  │
-│  └─────────────────────────────────────┘  │
-│ Spacing.L (16)                            │
-└───────────────────────────────────────────┘
-  Radius.S (8) corners
-```
-
-### Form layout
-```
-┌─ Screen margin: Spacing.L (16) ───────────┐
-│                                            │
-│  Label (label_l_regular)                   │
-│  Spacing.XS (4) gap                       │
-│  ┌──────────────────────────────────────┐  │
-│  │ Input                    Radius.S(8) │  │
-│  └──────────────────────────────────────┘  │
-│  Spacing.L (16) gap                       │
-│  Label                                     │
-│  Spacing.XS (4) gap                       │
-│  ┌──────────────────────────────────────┐  │
-│  │ Input                               │  │
-│  └──────────────────────────────────────┘  │
-│                                            │
-└────────────────────────────────────────────┘
-```
-
----
-
-## Do's & Don'ts
-
-### Do's
-- Use `Spacing.L` (16) as the standard horizontal padding for screen content
-- Use `Spacing.M` (12) as the default vertical gap between related elements
-- Use `Spacing.XL` (24) to separate distinct sections
-- Match radius to component size — larger components get larger radius
-
-### Don'ts
-- Don't use arbitrary spacing values — always pick from the scale
-- Don't mix different radius values on elements at the same level
-- Don't use `Spacing.XXS` (2) for content gaps — it's only for micro-adjustments
-- Don't apply corner radius to only some corners of a card (except modals/sheets: top only)

package/.claude/skills/design-system/references/tokens/theme.md

@@ -1,125 +0,0 @@
-# Theme — Design Guideline
-
-## Overview
-
-MoMo KitX supports light and dark themes through semantic color tokens. Designers should use `theme.colors.*` paths instead of direct `Colors.*` tokens so the UI adapts automatically.
-
----
-
-## Semantic Color Structure
-
-```
-theme.colors
-├── primary              → Brand accent
-├── secondary            → Brand tint
-├── background
-│   ├── default          → Page background
-│   ├── surface          → Card/container surface
-│   ├── tonal            → Brand-tinted background
-│   ├── pressed          → Pressed state overlay
-│   ├── selected         → Selected state background
-│   └── disable          → Disabled element background
-├── text
-│   ├── default          → Primary text
-│   ├── secondary        → Supporting text
-│   ├── hint             → Placeholder/caption text
-│   └── disable          → Disabled text
-├── border
-│   ├── default          → Standard borders
-│   └── disable          → Disabled borders
-├── success
-│   ├── primary          → Success text/icon
-│   ├── secondary        → Success accent
-│   └── container        → Success background
-├── warning              → (same structure as success)
-├── error                → (same structure as success)
-├── highlight            → (same structure as success)
-└── interactive          → (same structure as success)
-```
-
----
-
-## Light Theme Specs
-
-| Path | Token | Hex | Design Use |
-|------|-------|-----|------------|
-| `primary` | `pink_03` | #EB2F96 | Primary buttons, active indicators |
-| `secondary` | `pink_07` | — | Secondary brand accent |
-| `background.default` | — | #F2F2F6 | Page/screen background |
-| `background.surface` | `black_01` | #FFFFFF | Cards, containers, modals |
-| `background.tonal` | `pink_09` | — | Brand-tinted sections |
-| `background.pressed` | — | #DFDFE6 | Touch feedback overlay |
-| `background.selected` | `pink_10` | — | Selected item background |
-| `background.disable` | — | #EBEBF2 | Disabled containers |
-| `text.default` | `black_17` | #303233 | Body text, headings |
-| `text.secondary` | `black_15` | #484848 | Subtitles, supporting text |
-| `text.hint` | `black_12` | #727272 | Placeholders, captions |
-| `text.disable` | `black_08` | #C6C6C6 | Disabled labels |
-| `border.default` | `black_04` | #E8E8E8 | Input borders, dividers |
-| `border.disable` | `black_03` | #F0F0F0 | Disabled borders |
-| `success.primary` | `green_03` | #34C759 | Success icon/text |
-| `success.container` | `green_08` | — | Success banner background |
-| `warning.primary` | `orange_03` | #FA541C | Warning icon/text |
-| `warning.container` | `orange_08` | — | Warning banner background |
-| `error.primary` | `red_03` | #F5222D | Error icon/text |
-| `error.container` | `red_08` | — | Error banner background |
-| `highlight.primary` | `mint_03` | — | Highlight icon/text |
-| `interactive.primary` | `blue_03` | #007AFF | Links, interactive elements |
-
----
-
-## Dark Theme Specs
-
-| Path | Token | Hex | Design Use |
-|------|-------|-----|------------|
-| `primary` | `pink_04` | — | Primary buttons (slightly lighter for dark bg) |
-| `secondary` | `pink_08` | — | Secondary accent |
-| `background.default` | — | #121212 | Page background |
-| `background.surface` | — | #1E1E1E | Cards, containers |
-| `background.pressed` | — | #1A1A1A | Touch feedback |
-| `background.selected` | `pink_11` | — | Selected item |
-| `background.disable` | — | #303030 | Disabled containers |
-| `text.default` | — | #FFFFFF | Primary text |
-| `text.secondary` | — | #B0B0B0 | Supporting text |
-| `text.hint` | — | #727272 | Placeholder text |
-| `text.disable` | — | #505050 | Disabled text |
-| `border.default` | — | #2A2A2A | Borders |
-| `border.disable` | — | #242424 | Disabled borders |
-
-Success, warning, error, highlight, interactive tokens remain the same in both themes.
-
----
-
-## Usage Guidelines
-
-### When to Use Semantic Tokens vs Direct Colors
-
-| Scenario | Use | Example |
-|----------|-----|---------|
-| Text that should adapt to theme | `theme.colors.text.default` | Body text |
-| Brand-colored CTA | `theme.colors.primary` | Primary button |
-| Error state | `theme.colors.error.primary` | Error message |
-| Fixed-color element (e.g. logo) | Direct `Colors.*` | `Colors.pink_MoMo_Branding` |
-
-### Dark Mode Design Rules
-
-1. **Elevation = lighter** — In dark mode, higher elevation surfaces are lighter (not darker)
-2. **Surface hierarchy**: `background.default` (#121212) < `background.surface` (#1E1E1E) < elevated surfaces
-3. **No pure black text on dark surfaces** — Use `text.default` (white) instead
-4. **Maintain contrast** — Test all text/background combinations in both themes
-
----
-
-## Do's & Don'ts
-
-### Do's
-- Use `theme.colors.*` for all colors that should adapt between light/dark
-- Test designs in both light and dark themes
-- Use `background.surface` for cards/containers (not hardcoded white)
-- Use semantic status colors (`error`, `success`, `warning`) for feedback states
-
-### Don'ts
-- Don't hardcode `#FFFFFF` for surfaces — use `background.surface`
-- Don't assume dark mode is just "inverted" — it has its own specific values
-- Don't use `background.pressed` as a permanent background — it's for touch feedback only
-- Don't use direct `Colors.pink_03` when `theme.colors.primary` would be more appropriate

package/.claude/skills/design-system/references/tokens/typography.md

@@ -1,135 +0,0 @@
-# Typography — Design Guideline
-
-## Type Scale Overview
-
-MoMo KitX uses a structured type scale with the naming pattern: `{category}_{size}_{weight}`.
-
----
-
-## Full Type Scale
-
-### Headline — Page titles, section headers
-
-| Token | Size | Weight | Line Height | Use for |
-|-------|------|--------|-------------|---------|
-| `headline_l_bold` | 28sp | Bold | 36 | Page title, hero text |
-| `headline_l_semibold` | 28sp | SemiBold | 36 | Page title (lighter) |
-| `headline_default_bold` | 24sp | Bold | 32 | Section title |
-| `headline_default_semibold` | 24sp | SemiBold | 32 | Section title (lighter) |
-| `headline_s_bold` | 20sp | Bold | 28 | Sub-section title |
-| `headline_s_semibold` | 20sp | SemiBold | 28 | Sub-section title (lighter) |
-
-### Body — Content text, descriptions
-
-| Token | Size | Weight | Line Height | Use for |
-|-------|------|--------|-------------|---------|
-| `body_l_semibold` | 16sp | SemiBold | 24 | Emphasized body text |
-| `body_l_regular` | 16sp | Regular | 24 | Large body text |
-| `body_default_semibold` | 14sp | SemiBold | 20 | Emphasized default text |
-| `body_default_medium` | 14sp | Medium | 20 | Medium weight body |
-| `body_default_regular` | 14sp | Regular | 20 | Default body text (most common) |
-| `body_s_semibold` | 12sp | SemiBold | 16 | Small emphasized text |
-| `body_s_regular` | 12sp | Regular | 16 | Small body text |
-
-### Action — Buttons, interactive labels
-
-| Token | Size | Weight | Line Height | Use for |
-|-------|------|--------|-------------|---------|
-| `action_l_bold` | 18sp | Bold | 24 | Large button label |
-| `action_default_bold` | 16sp | Bold | 22 | Default button label |
-| `action_s_bold` | 14sp | Bold | 20 | Small button label |
-
-### Caption — Supporting text, metadata
-
-| Token | Size | Weight | Line Height | Use for |
-|-------|------|--------|-------------|---------|
-| `caption_default_semibold` | 12sp | SemiBold | 16 | Emphasized caption |
-| `caption_default_regular` | 12sp | Regular | 16 | Default caption |
-| `caption_s_semibold` | 10sp | SemiBold | 14 | Small emphasized caption |
-| `caption_s_regular` | 10sp | Regular | 14 | Smallest text |
-
-### Label — Form labels, tags
-
-| Token | Size | Weight | Line Height | Use for |
-|-------|------|--------|-------------|---------|
-| `label_l_regular` | 16sp | Regular | 22 | Large form label |
-| `label_l_bold` | 16sp | Bold | 22 | Emphasized form label |
-
----
-
-## Typography Hierarchy Rules
-
-### Heading Hierarchy
-Use a clear visual hierarchy with no more than 3 heading levels per screen:
-
-```
-headline_default_bold     → Page title (1 per screen)
-headline_s_bold           → Section title
-body_l_semibold           → Sub-section title
-body_default_regular      → Body content
-caption_default_regular   → Supporting info
-```
-
-### Font Families
-
-| Family | Use for |
-|--------|---------|
-| `SFProText` | Default system font (all UI text) |
-| `AlegreyaSans` | Decorative, special promotions |
-| `BarlowCondensed` | Condensed layouts, data-heavy screens |
-
-### Font Scaling
-- Font sizes automatically scale based on user accessibility settings
-- Design at 1x scale, system handles scaling
-- Ensure layouts accommodate up to 1.5x text scaling without breaking
-
----
-
-## Pairing Rules
-
-### Recommended Pairings
-
-| Context | Title | Body | Caption |
-|---------|-------|------|---------|
-| Card content | `body_default_semibold` | `body_default_regular` | `caption_default_regular` |
-| List item | `body_default_semibold` | `body_s_regular` | `caption_s_regular` |
-| Page header | `headline_default_bold` | `body_default_regular` | — |
-| Form field | `label_l_regular` | `body_default_regular` | `caption_default_regular` |
-| Banner/alert | `body_default_semibold` | `body_s_regular` | — |
-
-### Color Pairings with Typography
-
-| Text Role | Typography | Color Token |
-|-----------|-----------|-------------|
-| Primary content | `body_default_regular` | `theme.colors.text.default` |
-| Secondary info | `body_s_regular` | `theme.colors.text.secondary` |
-| Hint/placeholder | `body_default_regular` | `theme.colors.text.hint` |
-| Disabled | any | `theme.colors.text.disable` |
-| Error message | `caption_default_regular` | `theme.colors.error.primary` |
-| Link text | `body_default_semibold` | `theme.colors.interactive.primary` |
-
----
-
-## Accessibility
-
-- **Minimum text size**: `caption_s_regular` (10sp) — use sparingly, only for non-critical metadata
-- **Body text minimum**: 14sp (`body_default_regular`) for primary reading content
-- **Line height**: Always use the defined line height — do not compress
-- **Contrast**: All text must meet WCAG AA (4.5:1 normal, 3:1 large/bold)
-
----
-
-## Do's & Don'ts
-
-### Do's
-- Use `body_default_regular` as the standard body text throughout the app
-- Maintain consistent heading hierarchy within each screen
-- Use `action_*_bold` tokens for all button labels (maps to button sizes)
-- Use SemiBold for emphasis within body text, not color changes
-
-### Don'ts
-- Don't use more than 3 heading levels per screen
-- Don't use `caption_s_*` (10sp) for important information — it's too small
-- Don't mix font families on the same screen (except intentional brand moments)
-- Don't manually set font sizes — always use typography tokens
-- Don't use Bold weight for body text — reserve Bold for action and headline

package/.claude/skills/design-system-kits/SKILL.md

@@ -1,102 +0,0 @@
----
-name: design-system-kits
-description: ALWAYS invoke this skill FIRST for any UI development task in this codebase without exception. This skill MUST be consulted before writing ANY UI code, component, screen, layout, or visual element. Use when building any interface with React
-  Native, Compose Multiplatform.
-
----
-
-## Prereqs
-- Read [references/code-convention.md](references/code-convention.md) before generating code
-- When generating from a design spec JSON, **always load both**:
-  1. [references/design-spec-structure.md](references/design-spec-structure.md) — JSON schema (what each field means)
-  2. [references/design-spec-to-code.md](references/design-spec-to-code.md) — spec-to-code mapping (how to translate to RN or Compose)
-
-## How to Use
-
-1. **Identify platform**: `.tsx`/`.ts` = React Native, `.kt` = Compose
-2. **If input is a design spec JSON** → load `references/design-spec-structure.md` for full schema mapping
-3. **Find component** in catalog tables below
-4. **Load reference file** for exact API
-5. **Generate code** with correct imports and design tokens
-
-## References
-
-### Design Tokens & Styles
-| File | Load when... |
-|------|-------------|
-| `references/tokens/colors.md` | Color hex values |
-| `references/tokens/theme.md` | Light/dark theme |
-| `references/tokens/typography.md` | Typography scale |
-| `references/tokens/spacing-radius.md` | Spacing/radius values |
-
-### Components
-| File | Component | RN | Compose |
-|------|-----------|:--:|:------:|
-| `references/components/button.md` | Button | ✅ | ✅ |
-| `references/components/text.md` | Text | ✅ | ✅ |
-| `references/components/input.md` | Input | ✅ | ✅ |
-| `references/components/input-search.md` | InputSearch | ✅ | ✅ |
-| `references/components/input-text-area.md` | InputTextArea | ✅ | ✅ |
-| `references/components/input-dropdown.md` | InputDropDown | ✅ | ✅ |
-| `references/components/input-phone-number.md` | InputPhoneNumber | ✅ | ✅ |
-| `references/components/input-money.md` | InputMoney | ✅ | ✅ |
-| `references/components/input-otp.md` | InputOTP | ✅ | ✅ |
-| `references/components/checkbox.md` | CheckBox | ✅ | ✅ |
-| `references/components/radio.md` | Radio | ✅ | ✅ |
-| `references/components/switch.md` | Switch | ✅ | ✅ |
-| `references/components/icon.md` | Icon | ✅ | ✅ |
-| `references/components/image.md` | Image | ✅ | ✅ |
-| `references/components/badge.md` | Badge, BadgeDot | ✅ | ✅ |
-| `references/components/tag.md` | Tag | ✅ | ✅ |
-| `references/components/chip.md` | Chip | ✅ | ✅ |
-| `references/components/popup-notify.md` | PopupNotify | ✅ | ✅ |
-| `references/components/popup-promotion.md` | PopupPromotion | ✅ | ✅ |
-| `references/components/toast.md` | Toast | ✅ | ✅ |
-| `references/components/snackbar.md` | SnackBar | ✅ | ✅ |
-| `references/components/skeleton.md` | Skeleton | ✅ | ✅ |
-| `references/components/loader.md` | Loader | ✅ | ✅ |
-| `references/components/tooltip.md` | Tooltip | ✅ | ✅ |
-| `references/components/avatar.md` | Avatar | ✅ | ✅ |
-| `references/components/carousel.md` | Carousel | ✅ | ✅ |
-| `references/components/tab-view.md` | TabView | ✅ | ✅ |
-| `references/components/divider.md` | Divider | ✅ | ✅ |
-| `references/components/pagination.md` | Pagination | ✅ | ✅ |
-| `references/components/progress-info.md` | ProgressInfo | ✅ | ✅ |
-| `references/components/rating.md` | Rating | ✅ | ✅ |
-| `references/components/slider.md` | Slider | ✅ | ✅ |
-| `references/components/stepper.md` | Stepper | ✅ | ✅ |
-| `references/components/steps.md` | Steps | ✅ | ✅ |
-| `references/components/collapse.md` | Collapse | ✅ | ✅ |
-| `references/components/swipe.md` | Swipe | ✅ | ✅ |
-| `references/components/suggest-action.md` | SuggestAction | ✅ | ✅ |
-| `references/components/uploader.md` | Uploader | ✅ | ✅ |
-| `references/components/date-picker.md` | DatePicker | ✅ | ✅ |
-| `references/components/information.md` | Information | ✅ | ✅ |
-
-### Design Spec
-| File | Load when... |
-|------|-------------|
-| `references/design-spec-structure.md` | **Understanding the JSON schema** (what each field means) |
-| `references/design-spec-to-code.md` | **Mapping spec → code** (how to translate to RN or Compose) |
-
-### Screen Layout
-| File | Load when... |
-|------|-------------|
-| `references/screen-layout-rule.md` | Screen layout rules, `useGridLayout`, Section/Card/Item spacing, grid system |
-
-### Navigation
-| File | Load when...                                   |
-|------|------------------------------------------------|
-| `references/navigation/setup.md` | App root setup, Container, NavigationContainer |
-| `references/navigation/stack.md` | Screen config, header                          |
-| `references/navigation/navigation-options.md` | Header title, background, right buttons, **header spec → code mapping** |
-| `references/navigation/navigator.md` | Compose Navigator API                          |
-| `references/navigation/bottom-tab.md` | Bottom tabs                                    |
-| `references/navigation/modal.md` | Modal                                          |
-| `references/navigation/bottomsheet.md` | Bottom sheet                                   |
-
-## Important Rules
-
-1. **Always use design tokens** — Never hardcode colors/spacing/fonts
-2. **RN**: Use `Screen > Section|Card > Item` — Section and Card are **siblings** (same level), never nested
-3. **Design spec JSON** — When generating code from a design spec, **always load both** `references/design-spec-structure.md` (schema) and `references/design-spec-to-code.md` (platform mapping). For the `header` field, also load `references/navigation/navigation-options.md`. **Priority: use existing components from the catalog tables above** — only create custom sub-components when no existing component can fulfill the requirement.

package/.claude/skills/design-system-kits/references/code-convention.md

@@ -1,118 +0,0 @@
----
-tags: code, convention, formatting, style, lint, developer
-related:
----
-
-# Code Convention
-
-Apply this convention to every AI-generated code output.
-
-## Scope and Consistency
-
-1. Use this document as the single source of truth for code-related skills.
-2. Any copied code-convention reference in other skills must be identical to this file.
-3. Apply header and marker requirements only to newly generated files or newly generated code blocks.
-4. Do not add markers/header to unchanged existing code.
-
-## 0) File Size and Line Width
-
-1. Keep each source file under about 500 lines.
-2. Enforce max line length (column width) of 120.
-3. If a file would exceed 500 lines, split by feature/module while preserving behavior.
-
-## 1) Required File Header
-
-Add a file header at the top of each newly generated code file with:
-
-1. `File`
-2. `Created At` (ISO-like timestamp with timezone)
-3. `Created By` (`AI`)
-4. `AI Agent`
-5. `Model`
-
-Template:
-
-```txt
-<COMMENT_OPEN>
-File: <relative-or-file-name>
-Created At: <YYYY-MM-DD HH:mm:ss Z>
-Created By: AI
-AI Agent: <agent-name>
-Model: <model-id>
-<COMMENT_CLOSE>
-```
-
-Language examples:
-
-```js
-/*
-File: src/example.js
-Created At: 2026-03-10 12:30:00 +07:00
-Created By: AI
-AI Agent: Codex
-Model: gpt-5
-*/
-```
-
-```py
-# File: src/example.py
-# Created At: 2026-03-10 12:30:00 +07:00
-# Created By: AI
-# AI Agent: Codex
-# Model: gpt-5
-```
-
-## 2) Required AI Block Markers
-
-Wrap every newly generated AI code block:
-
-- Start marker: `AI-GENERATED START`
-- End marker: `AI-GENERATED END`
-- Include short purpose text.
-
-JavaScript / TypeScript:
-
-```js
-// AI-GENERATED START: build payment retry helper
-function retryPayment() {
-  // ...
-}
-// AI-GENERATED END: build payment retry helper
-```
-
-Python:
-
-```py
-# AI-GENERATED START: parse webhook payload
-def parse_webhook(payload):
-    return payload
-# AI-GENERATED END: parse webhook payload
-```
-
-HTML / XML:
-
-```html
-<!-- AI-GENERATED START: login form -->
-<form></form>
-<!-- AI-GENERATED END: login form -->
-```
-
-CSS:
-
-```css
-/* AI-GENERATED START: card layout */
-.card { display: grid; }
-/* AI-GENERATED END: card layout */
-```
-
-## 3) Enforcement Checklist
-
-Before returning output, verify:
-
-1. File header exists at top of each newly generated file.
-2. Header includes filename, timestamp, AI creator, agent, and model.
-3. Every newly generated code block has start and end markers.
-4. Marker comment style matches target language.
-5. Unchanged existing code was not backfilled with new markers/header.
-6. New or modified files stay within ~500 lines.
-7. New or modified lines do not exceed 120 columns unless unavoidable.

package/.claude/skills/design-system-kits/references/components/avatar.md

@@ -1,45 +0,0 @@
-# Avatar
-
-## React Native
-
-```tsx
-import { Avatar } from '@momo-kits/avatar';
-
-<Avatar
-  size={48}                                        // 24|32|40|48|56|72  (default: 32)
-  image="https://..."                              // image URL; falls back to initials or icon
-  name="John Doe"                                  // shows initials when no image
-  rounded={true}                                   // circular shape; default: true
-  showIconMomo={false}                             // shows MoMo logo badge (top-right)
-  showIconSupport={false}                          // shows support icon badge (bottom-right)
-  iconSupport="https://..."                        // custom support icon URL; defaults to built-in
-  accessibilityLabel="Avatar of John"              // for automated testing
-/>
-```
-
-## Compose
-
-```kotlin
-import vn.momo.kits.components.Avatar
-import vn.momo.kits.components.AvatarSize
-
-Avatar(
-    modifier = Modifier,
-    size = AvatarSize.SIZE_48,     // SIZE_24 | SIZE_32 | SIZE_40 | SIZE_48 | SIZE_56 | SIZE_72
-    rounded = true,
-    name = "John Doe",             // initials fallback
-    image = "https://...",        // image URL fallback
-    showIconMomo = false,
-    showIconSupport = false,
-    accessibilityLabel = "Avatar of John",
-)
-```
-
-**Fallback priority:** `image` → `name` (initials) → default person icon. Badge icons only shown when `rounded=true`.
-
-## Key Differences
-
-| Feature | React Native | Compose |
-|---------|-------------|---------|
-| Size | `number` (px) | `AvatarSize` enum |
-| Badge icons | Always shown | Only when `rounded=true` |