@leejungkiin/awkit 1.0.5 → 1.0.7

package/workflows/mobile/reverse-android.md

@@ -1,20 +1,20 @@
 ---
-description: 🔧 Dịch ngược APK Android (Apktool output) → App Kotlin hiện đại với Jetpack Compose, Clean Architecture. Progressive Disclosure: Map → Blueprint → Build.
+description: 🔧 Dịch ngược APK Android (Apktool output) → App Kotlin hiện đại với Jetpack Compose, Clean Architecture, và UI-First methodology.
 skill: smali-to-kotlin
 ---
 
 # /reverse-android — Android APK Reverse Engineering Workflow
 
 > **Skill:** `smali-to-kotlin` v2.0 | **Tech:** Kotlin + Compose + Hilt + Retrofit + Room
-> **Philosophy:** "Treat decompiled code as a MAP, not a TODO list"
-> **Approach:** Map → Blueprint → Build (progressive disclosure)
+> **Philosophy:** "Map → Blueprint → UI First → Logic Behind"
+> **Key:** UI is designed and approved BEFORE coding any business logic.
 
 ---
 
 ## ⚡ QUICK START
 
 User cung cấp: Apktool output dir, `AndroidManifest.xml`, hoặc nói "reverse engineer APK này".
-Workflow dẫn dắt qua **4 phases** — mỗi phase có zoom level riêng, **không bao giờ nhảy cóc**.
+Workflow dẫn dắt qua **5 phases** — UI-First approach, **không bao giờ nhảy cóc**.
 
 ---
 
@@ -27,10 +27,11 @@ reverse_session:
   project_name: "[TBD - từ manifest]"
   apktool_dir: "[path]"
   current_phase: 0
-  current_zoom: 0       # 0=satellite, 1=district, 2=block, 3=ground
-  current_feature: null  # set khi user chọn feature ở Phase 2
-  app_map_done: false
-  architecture_done: false
+  current_feature: null
+  phase_2_status:
+    contracts: pending
+    ui_shell: pending
+    resources: pending
   completed_features: []
   pending_features: []
   decisions: []
@@ -39,7 +40,7 @@ reverse_session:
 ### Bước 0.2: Xác nhận input
 
 ```
-🔧 Android Reverse Engineering v2.0 — Map → Blueprint → Build
+🔧 Android Reverse Engineering v2.0 — UI-First Pipeline
 
 Em cần biết:
 1. Thư mục Apktool output ở đâu?
@@ -50,14 +51,15 @@ Chưa chạy Apktool? → apktool d your-app.apk -o ./decompiled/
 
 ---
 
-## 📋 Pipeline Overview (4 Phases)
+## 📋 Pipeline Overview (5 Phases — UI-First)
 
-| Phase | Name | Sub-workflow | Zoom | Code? | Gate |
-|-------|------|-------------|------|-------|------|
-| 0 | 🗺️ Discovery | [`/re-android-discover`](reverse-android-discover.md) | Satellite | ❌ | User approves Map |
-| 1 | 🏗️ Architecture | [`/re-android-design`](reverse-android-design.md) | District | ❌ | User approves Architecture |
-| 2 | 📐 Blueprint | [`/re-android-build`](reverse-android-build.md) | Block | Signatures | Per-feature approval |
-| 3 | 🔨 Implementation | [`/re-android-build`](reverse-android-build.md) | Ground | Full | Per-feature checkpoint |
+| Phase | Name | Sub-workflow | Code? | Gate |
+|-------|------|-------------|-------|------|
+| 0 | 🗺️ Discovery | [`/re-android-discover`](reverse-android-discover.md) | ❌ | User approves Map |
+| 1 | 🏗️ Architecture | [`/re-android-design`](reverse-android-design.md) | ❌ | User approves Architecture |
+| 2 | 📐🎨 Blueprint + UI | [`/re-android-build`](reverse-android-build.md) | UI code | User approves UI + Contracts |
+| 3 | 🔨 Logic Build | [`/re-android-build`](reverse-android-build.md) | Full logic | Feature checkpoint |
+| 4 | ✅ Final Parity | [`/re-android-build`](reverse-android-build.md) | — | Final check |
 
 ### Execution Flow
 
@@ -68,31 +70,34 @@ Phase 0: Discovery (/re-android-discover) → App Map
     ↓ [User approves]
 Phase 1: Architecture (/re-android-design) → Architecture Blueprint
     ↓ [User approves + picks feature]
-Phase 2+3 Loop (/re-android-build):
-    → Blueprint Feature X → Build Feature X → Checkpoint
-    → Blueprint Feature Y → Build Feature Y → Checkpoint
-    → ... (repeat for all features)
+Feature Loop (/re-android-build):
+    Phase 2: Blueprint + UI (contracts + visual shell + resources)
+        ↓ 🚦 GATE: User approves UI + contracts
+    Phase 3: Logic Build (domain → data → DI → VM → wire UI)
+        ↓ 📊 CHECKPOINT: Feature done
+    → Repeat for next feature
     ↓
-Final: Parity Check & Quality Gate
+Phase 4: Final Parity Check & Quality Gate
 ```
 
 ---
 
 ## 🔭 ZOOM CONTROL
 
-AI phải tự check **TRƯỚC MỖI output**:
-
 ```yaml
 pre_output_check:
-  - "Đang ở zoom level nào? (0/1/2/3)"
-  - "Output có đúng zoom level không?"
-  - "Có function body trong Phase 0/1 không? → REMOVE"
-
-zoom_rules:
-  zoom_0: "NO CODE. Only diagrams, tables, maps."
-  zoom_1: "NO CODE BODIES. Only architecture diagrams, file lists."
-  zoom_2: "SIGNATURES ONLY. Interfaces, data classes, sealed classes."
-  zoom_3: "FULL CODE. Implementation for ONE feature at a time."
+  - "Đang ở phase nào?"
+  - "Output có đúng phase rule không?"
+  - "Phase 0/1: NO CODE BODIES"
+  - "Phase 2: UI code + signatures (no logic bodies)"
+  - "Phase 3: Full implementation code"
+
+phase_rules:
+  phase_0: "NO CODE. Only diagrams, tables, maps."
+  phase_1: "NO CODE BODIES. Only architecture diagrams, file lists."
+  phase_2_contracts: "SIGNATURES ONLY. Interfaces, data classes, sealed classes."
+  phase_2_ui: "FULL UI CODE. Compose with hardcoded mock data + @Preview."
+  phase_3: "FULL LOGIC CODE. Domain → Data → DI → VM → Wire UI."
 ```
 
 ---
@@ -101,23 +106,24 @@ zoom_rules:
 
 ```yaml
 never_skip:
-  - Phase 0 (Discovery) — always first, MUST create App Map
-  - Phase 1 (Architecture) — MUST design before coding
-  - User approval at each phase gate
-  - Per-feature Blueprint before Implementation
+  - Phase 0 (Discovery) — always first
+  - Phase 1 (Architecture) — design before coding
+  - Phase 2 UI Gate — user MUST approve UI before Phase 3
+  - Per-feature Blueprint before Logic Build
 
 never_do:
-  - Write code in Phase 0 or Phase 1
+  - Write logic code before UI is approved
   - Mass-copy resources from APK (on-demand only)
   - Implement multiple features simultaneously
-  - Skip parity check for crypto utils
+  - Modify UI significantly in Phase 3 (only wire, don't redesign)
+  - Skip crypto parity check
 
 always_do:
-  - Start with App Map (Phase 0)
-  - Present Architecture for review (Phase 1)
-  - Create Blueprint before coding each feature (Phase 2)
-  - Checkpoint after each feature (Phase 3)
-  - Document all decisions in session state
+  - Extract resources BEFORE coding UI (Phase 2.7 → 2.8)
+  - Create @Preview for ALL states
+  - Keep stateless composable (LoginScreenContent) after wiring
+  - Checkpoint after each feature
+  - Document all decisions
 ```
 
 ---
@@ -127,11 +133,11 @@ always_do:
 - **Sub-workflows:**
   - [`/re-android-discover`](reverse-android-discover.md) — Phase 0: Discovery
   - [`/re-android-design`](reverse-android-design.md) — Phase 1: Architecture
-  - [`/re-android-build`](reverse-android-build.md) — Phase 2+3: Blueprint + Build
-- **Skill:** `smali-to-kotlin` v2.0 (core knowledge & rules)
+  - [`/re-android-build`](reverse-android-build.md) — Phase 2+3+4: Blueprint + UI + Build
+- **Skill:** `smali-to-kotlin` v2.0 (UI-First pipeline)
 - **Sibling:** `/reverse-ios` (iOS counterpart)
 - **After RE done:** `/test`, `/deploy`, `/code-janitor`
 
 ---
 
-*reverse-android workflow v3.0.0 — Progressive Disclosure RE Pipeline*
+*reverse-android workflow v4.0.0 — UI-First RE Pipeline*

package/workflows/mobile/reverse-ios-build.md

@@ -1,36 +1,37 @@
 ---
-description: 🔨 RE iOS Phase 2+3 — Per-feature Blueprint → Implementation → Parity Check
+description: 🔨 RE iOS Phase 2+3+4 — Blueprint + UI Shell → Logic Build → Final Parity (UI-First)
 parent: reverse-ios
 ---
 
-# /re-ios-build — Blueprint & Build (Per Feature)
+# /re-ios-build — Blueprint + UI + Build (Per Feature)
 
-> **Parent:** [`/reverse-ios`](reverse-ios.md) → Phase 2+3
+> **Parent:** [`/reverse-ios`](reverse-ios.md) → Phase 2+3+4
 > **Prerequisite:** Completed Architecture from [`/re-ios-design`](reverse-ios-design.md)
-> **Skill:** `smali-to-swift` → `phase-2-blueprint.md` + `phase-3-build.md`
+> **Skill:** `smali-to-swift` → `phase-2-blueprint-ui.md` + `phase-3-logic-build.md`
 
 ---
 
-## 🔄 Feature Loop
+## 🔄 Feature Loop (UI-First)
 
 ```
 For each feature (from Architecture Build Order):
-    Phase 2: Blueprint (Zoom 2 — signatures only)
-        ↓ [User approves]
-    Phase 3: Implementation (Zoom 3 — full code)
-        ↓ [Checkpoint]
+    Phase 2: Blueprint + UI (contracts + visual shell)
+        ↓ 🚦 GATE: User approves UI + contracts
+    Phase 3: Logic Build (domain → data → wire)
+        ↓ 📊 CHECKPOINT
     → Next feature
 ```
 
 ---
 
-## 📐 Phase 2: Feature Blueprint (Zoom 2)
+## 📐🎨 Phase 2: Blueprint + UI Design
 
-> **Output:** Contracts, protocols, state design. **Signatures only.**
+> **Output:** Approved contracts + Working SwiftUI shell with mock data.
 
-### 2.1: Deep Header Reading
+### Part A: Contracts (signatures only)
 
-Read class-dump headers + Hopper pseudo-code for chosen feature.
+#### 2.1: Deep Header Reading
+Read class-dump headers + Hopper pseudo-code. See `objc-reading-guide.md`.
 
 **ObjC → Swift Quick Ref:**
 ```
@@ -40,90 +41,200 @@ Read class-dump headers + Hopper pseudo-code for chosen feature.
 + (instancetype)sharedInstance      → static let shared
 ```
 
-### 2.2: Domain Contracts
-
+#### 2.2–2.5: Define Contracts
 ```swift
+// 2.2 Domain Model
 struct [Model]: Codable, Identifiable, Sendable {
-    let field1: Type
-    // CodingKeys if needed
+    let field: Type
 }
 
+// 2.3 Repository Protocol
 protocol [Feature]Repository: Sendable {
     func [method](...) async throws -> [Type]
 }
 
-struct [Action]UseCase: Sendable {
-    func execute(...) async throws -> [Type]
+// 2.4 API Endpoint
+enum [Feature]Endpoint {
+    case [action](param: Type)
+    var path: String { /* ... */ }
+}
+
+// 2.5 UseCase
+struct [Action]UseCase {
+    func execute(...) async throws -> [Type] // TODO
+}
+```
+
+#### 2.6: UI State Design
+```swift
+struct [Screen]ViewState {
+    var field: Type = default
+    var isLoading: Bool = false
+    var error: String? = nil
+}
+enum [Screen]Action { /* user interactions */ }
+enum [Screen]Event { /* navigation, alerts */ }
+
+extension [Screen]ViewState {
+    static let normal = [Screen]ViewState(/* sample */)
+    static let loading = [Screen]ViewState(isLoading: true)
+    static let error = [Screen]ViewState(error: "Error message")
+}
+```
+
+### Part B: UI Visual Shell
+
+#### 2.7: Resource Extraction ⭐ (BEFORE UI code!)
+
+Extract from IPA bundle / Assets.car:
+- Images → Assets.xcassets
+- Colors → Color extension or asset catalog
+- Strings → Localizable.xcstrings
+- Fonts → custom fonts
+
+Copy ONLY needed resources. Verify they build.
+
+#### 2.8: UI Implementation ⭐ (Visual shell with mock data)
+
+- Use ViewState from 2.6 with hardcoded defaults
+- Use REAL resources from 2.7
+- Create `[Screen]Content` view (stateless)
+- Match visual parity with original app
+- NO ViewModel connection, NO real API calls
+
+```swift
+struct [Screen]Content: View {
+    var state: [Screen]ViewState = .normal   // Mock
+    var onAction: ([Screen]Action) -> Void = { _ in }  // No-op
+
+    var body: some View {
+        // Full SwiftUI matching original app
+    }
 }
+
+#Preview("Normal") { [Screen]Content(state: .normal) }
+#Preview("Loading") { [Screen]Content(state: .loading) }
+#Preview("Error") { [Screen]Content(state: .error) }
 ```
 
-### 2.3: UI State Design
+#### 2.9: Visual Parity Check ⭐
 
-- @Observable ViewModel properties
-- User actions
-- Navigation events
-- Wireframe
+Compare with original app:
+- [ ] Layout structure matches
+- [ ] Colors, typography, spacing correct
+- [ ] Icons/images positioned correctly
+- [ ] All states: normal, loading, error, empty
 
-### ✅ Blueprint Gate
+### 🚦 UI + Contracts Gate (MANDATORY)
 
 ```
-"📐 Blueprint cho [Feature] xong. OK? → Code."
+"📐🎨 Blueprint + UI cho [Feature] xong:
+📝 Contracts: [N] models, [N] protocols, [N] use cases, [N] endpoints
+🎨 UI: [Screen] with [N] state previews
+📸 Visual Parity: [OK / needs adjustment]
+
+→ ✅ Approve → Phase 3 (Logic Build)
+→ 🎨 Adjust UI → fix then re-check
+→ 📝 Adjust contracts → revise"
 ```
 
+> ⚠️ **DO NOT proceed to Phase 3 without user approval.**
+
 ---
 
-## 🔨 Phase 3: Implementation (Zoom 3)
+## 🔨 Phase 3: Logic Build
 
-> **Full Swift code for THIS feature only.**
+> **Output:** Full Swift code. Wire logic to EXISTING UI.
 
-### 3.1: Domain → Data → DI → ViewModel → Screen
+### 3.1: Domain Layer
+Models + Repository protocols + UseCases (implement with repo calls)
 
-Standard implementation order:
-1. Codable structs
-2. Repository protocol + implementation
-3. APIClient endpoints
-4. SwiftData models (if applicable)
-5. DI container entries
-6. @Observable ViewModel
-7. SwiftUI Screen
-8. Resource extraction (on-demand only)
+### 3.2: Data Layer
+DTOs + APIClient endpoints + SwiftData (if applicable) + Repository implementation
 
-### 🔒 Crypto (Special)
+### 3.3: DI Container
+AppContainer with lazy properties for repos, use cases, view models
+
+### 3.4: ViewModel
+@Observable with state property + handle(_ action:) + event handler
+
+### 3.5: Wire UI ↔ Logic ⭐ (NOT "code new UI")
+
+The UI already exists from Phase 2.8. Only CONNECT it:
 
+```swift
+// Keep stateless Content view from Phase 2 (for Preview):
+// [Screen]Content(state:, onAction:) — DO NOT MODIFY
+
+// ADD wrapper that wires ViewModel:
+struct [Screen]: View {
+    @State private var viewModel: [Screen]ViewModel
+
+    init(container: AppContainer) {
+        _viewModel = State(initialValue: container.make[Screen]ViewModel())
+    }
+
+    var body: some View {
+        [Screen]Content(
+            state: viewModel.state,
+            onAction: viewModel.handle
+        )
+    }
+}
+```
+
+### 3.6: Integration Test ⭐
+- [ ] API calls succeed, data displays
+- [ ] Loading/error states work
+- [ ] Navigation correct
+- [ ] Crypto output matches (if applicable)
+
+### 🔒 Crypto (Special)
 ```swift
 import CryptoKit
 import CommonCrypto
 // XCTest mandatory for crypto utils
 ```
-
 > ⚠️ Crypto MUST match original output.
 
 ### ✅ Feature Checkpoint
 
 ```markdown
 ## ✅ Feature Complete: [Name]
-### Files created: [list]
-### Tests: [crypto verified?]
-⏭️ Next: Phase 2 for [next feature]
+Files: [list] | Resources: [count] | Tests: [status]
+⏭️ Next Feature: [Name] → Return to Phase 2
 ```
 
 ---
 
-## ✅ Final Parity Check
+## ✅ Phase 4: Final Parity Check (After ALL features)
 
-- [ ] API Parity
-- [ ] Data/Crypto Parity
-- [ ] UI Parity
+### Checklist
+- [ ] API Parity — all endpoints match
+- [ ] Data/Crypto Parity — output identical
+- [ ] UI Parity — screen-by-screen comparison
+- [ ] Edge Cases — empty, error, offline, lifecycle
 - [ ] Build: `xcodebuild build && xcodebuild test`
 
+### 🎉 Final Summary
+
+```markdown
+## ✅ Reverse Engineering Complete!
+- Screens: [N] | Features: [N]
+- Frameworks reused: [N] | Replaced: [N]
+- Tests: [pass/fail]
+
+⏭️ Next: /test → /deploy → /code-janitor
+```
+
 ---
 
 ## 🔗 Related
 
 - **Parent:** [`/reverse-ios`](reverse-ios.md)
-- **Previous:** [`/re-ios-design`](reverse-ios-design.md)
-- **Skill:** `smali-to-swift` → `phase-2-blueprint.md` + `phase-3-build.md`
+- **Previous:** [`/re-ios-design`](reverse-ios-design.md) (Phase 1)
+- **Skill:** `smali-to-swift` → `phase-2-blueprint-ui.md` + `phase-3-logic-build.md`
 
 ---
 
-*re-ios-build v3.0.0 — Phase 2+3: Blueprint & Build*
+*re-ios-build v4.0.0 — UI-First Blueprint + Build*

package/workflows/mobile/reverse-ios-design.md

@@ -65,10 +65,19 @@ App/
 └── Resources/
 ```
 
-### Step 6: Build Order
+### Step 6: Build Order (UI-First) ⭐
 
 | # | Phase | Scope | Complexity |
 |---|-------|-------|-----------|
+| 1 | 🟢 Foundation | Xcode project + DI skeleton + Theme | Low |
+| 2 | 🟢 Navigation | NavigationStack, TabView, routes | Low |
+| 3 | 🔵 Per Feature | Blueprint (contracts) + UI Shell (visual) | Medium |
+| 4 | 🚦 UI Gate | User approves UI before logic | — |
+| 5 | 🟡 Per Feature | Logic Build (Domain → Data → VM → Wire UI) | High |
+| 6 | 📦 SDKs | Third-party SDK + Native libs integration | Medium |
+| N | 🔴 Final | Full Parity Check | High |
+
+> **UI-First:** Design and approve UI before coding logic for each feature.
 
 ### Step 7: Tech Decisions
 

package/workflows/mobile/reverse-ios.md

@@ -1,13 +1,13 @@
 ---
-description: 🍎 Dịch ngược IPA iOS (class-dump, Hopper output) → App Swift hiện đại với SwiftUI, Clean Architecture. Progressive Disclosure: Map → Blueprint → Build.
+description: 🍎 Dịch ngược IPA iOS (class-dump, Hopper output) → App Swift hiện đại với SwiftUI, Clean Architecture, và UI-First methodology.
 skill: smali-to-swift
 ---
 
 # /reverse-ios — iOS IPA Reverse Engineering Workflow
 
 > **Skill:** `smali-to-swift` v2.0 | **Tech:** Swift + SwiftUI + async/await + URLSession + SwiftData
-> **Philosophy:** "Treat decompiled code as a MAP, not a TODO list"
-> **Approach:** Map → Blueprint → Build (progressive disclosure)
+> **Philosophy:** "Map → Blueprint → UI First → Logic Behind"
+> **Key:** UI is designed and approved BEFORE coding any business logic.
 > **Sibling:** `/reverse-android`
 
 ---
@@ -15,7 +15,7 @@ skill: smali-to-swift
 ## ⚡ QUICK START
 
 User cung cấp: Decrypted `.app` bundle, class-dump headers, Hopper pseudo-code, hoặc nói "reverse engineer IPA này".
-Workflow dẫn dắt qua **4 phases** — mỗi phase có zoom level riêng, **không bao giờ nhảy cóc**.
+Workflow dẫn dắt qua **5 phases** — UI-First approach, **không bao giờ nhảy cóc**.
 
 ---
 
@@ -29,10 +29,11 @@ reverse_ios_session:
   app_bundle_dir: "[path]"
   headers_dir: "[class-dump output]"
   current_phase: 0
-  current_zoom: 0
   current_feature: null
-  app_map_done: false
-  architecture_done: false
+  phase_2_status:
+    contracts: pending
+    ui_shell: pending
+    resources: pending
   completed_features: []
   pending_features: []
   decisions: []
@@ -41,7 +42,7 @@ reverse_ios_session:
 ### Bước 0.2: Xác nhận input
 
 ```
-🍎 iOS Reverse Engineering v2.0 — Map → Blueprint → Build
+🍎 iOS Reverse Engineering v2.0 — UI-First Pipeline
 
 Em cần biết:
 1. Decrypted .app bundle ở đâu?
@@ -55,14 +56,15 @@ Chưa chuẩn bị?
 
 ---
 
-## 📋 Pipeline Overview (4 Phases)
+## 📋 Pipeline Overview (5 Phases — UI-First)
 
-| Phase | Name | Sub-workflow | Zoom | Code? | Gate |
-|-------|------|-------------|------|-------|------|
-| 0 | 🗺️ Discovery | [`/re-ios-discover`](reverse-ios-discover.md) | Satellite | ❌ | User approves Map |
-| 1 | 🏗️ Architecture | [`/re-ios-design`](reverse-ios-design.md) | District | ❌ | User approves Architecture |
-| 2 | 📐 Blueprint | [`/re-ios-build`](reverse-ios-build.md) | Block | Signatures | Per-feature approval |
-| 3 | 🔨 Implementation | [`/re-ios-build`](reverse-ios-build.md) | Ground | Full | Per-feature checkpoint |
+| Phase | Name | Sub-workflow | Code? | Gate |
+|-------|------|-------------|-------|------|
+| 0 | 🗺️ Discovery | [`/re-ios-discover`](reverse-ios-discover.md) | ❌ | User approves Map |
+| 1 | 🏗️ Architecture | [`/re-ios-design`](reverse-ios-design.md) | ❌ | User approves Architecture |
+| 2 | 📐🎨 Blueprint + UI | [`/re-ios-build`](reverse-ios-build.md) | UI code | User approves UI + Contracts |
+| 3 | 🔨 Logic Build | [`/re-ios-build`](reverse-ios-build.md) | Full logic | Feature checkpoint |
+| 4 | ✅ Final Parity | [`/re-ios-build`](reverse-ios-build.md) | — | Final check |
 
 ### Execution Flow
 
@@ -73,11 +75,14 @@ Phase 0: Discovery (/re-ios-discover) → App Map
     ↓ [User approves]
 Phase 1: Architecture (/re-ios-design) → Architecture Blueprint
     ↓ [User approves + picks feature]
-Phase 2+3 Loop (/re-ios-build):
-    → Blueprint Feature X → Build Feature X → Checkpoint
-    → Blueprint Feature Y → Build Feature Y → Checkpoint
+Feature Loop (/re-ios-build):
+    Phase 2: Blueprint + UI (contracts + visual shell + resources)
+        ↓ 🚦 GATE: User approves UI + contracts
+    Phase 3: Logic Build (domain → data → DI → VM → wire UI)
+        ↓ 📊 CHECKPOINT: Feature done
+    → Repeat for next feature
     ↓
-Final: Parity Check & Quality Gate
+Phase 4: Final Parity Check & Quality Gate
 ```
 
 ---
@@ -86,15 +91,18 @@ Final: Parity Check & Quality Gate
 
 ```yaml
 pre_output_check:
-  - "Đang ở zoom level nào?"
-  - "Output có đúng zoom level không?"
-  - "Có function body trong Phase 0/1 không? → REMOVE"
-
-zoom_rules:
-  zoom_0: "NO CODE. Only diagrams, tables, maps."
-  zoom_1: "NO CODE BODIES. Only architecture, file lists."
-  zoom_2: "SIGNATURES ONLY. Protocols, structs, enums."
-  zoom_3: "FULL CODE. Implementation for ONE feature."
+  - "Đang ở phase nào?"
+  - "Output có đúng phase rule không?"
+  - "Phase 0/1: NO CODE BODIES"
+  - "Phase 2: UI code + signatures (no logic bodies)"
+  - "Phase 3: Full implementation code"
+
+phase_rules:
+  phase_0: "NO CODE. Only diagrams, tables, maps."
+  phase_1: "NO CODE BODIES. Only architecture, file lists."
+  phase_2_contracts: "SIGNATURES ONLY. Protocols, structs, enums."
+  phase_2_ui: "FULL UI CODE. SwiftUI with hardcoded mock data + #Preview."
+  phase_3: "FULL LOGIC CODE. Domain → Data → DI → VM → Wire UI."
 ```
 
 ---
@@ -104,23 +112,27 @@ zoom_rules:
 ```yaml
 never_skip:
   - Phase 0 (Discovery) — always first
-  - Phase 1 (Architecture) — design before code
-  - Per-feature Blueprint before Implementation
+  - Phase 1 (Architecture) — design before coding
+  - Phase 2 UI Gate — user MUST approve UI before Phase 3
+  - Per-feature Blueprint before Logic Build
 
 never_do:
-  - Write code in Phase 0 or Phase 1
-  - Mass-copy assets from IPA
+  - Write logic code before UI is approved
+  - Mass-copy assets from IPA (on-demand only)
   - Use UIKit when SwiftUI equivalent exists
   - Use GCD for new async code (use async/await)
   - Use ObjC in new code (Swift only)
+  - Modify UI significantly in Phase 3 (only wire, don't redesign)
   - Implement multiple features simultaneously
 
 always_do:
-  - Start with App Map
-  - Create Blueprint before each feature
+  - Extract resources BEFORE coding UI (Phase 2.7 → 2.8)
+  - Create #Preview for ALL states
+  - Keep stateless View (LoginScreenContent) after wiring
   - XCTest all crypto/hash functions
   - Use @Observable for ViewModels
   - Use NavigationStack, SPM
+  - Checkpoint after each feature
 ```
 
 ---
@@ -130,11 +142,11 @@ always_do:
 - **Sub-workflows:**
   - [`/re-ios-discover`](reverse-ios-discover.md) — Phase 0: Discovery
   - [`/re-ios-design`](reverse-ios-design.md) — Phase 1: Architecture
-  - [`/re-ios-build`](reverse-ios-build.md) — Phase 2+3: Blueprint + Build
-- **Skill:** `smali-to-swift` v2.0
+  - [`/re-ios-build`](reverse-ios-build.md) — Phase 2+3+4: Blueprint + UI + Build
+- **Skill:** `smali-to-swift` v2.0 (UI-First pipeline)
 - **Sibling:** `/reverse-android`
 - **After RE done:** `/test`, `/deploy`, `/code-janitor`
 
 ---
 
-*reverse-ios workflow v3.0.0 — Progressive Disclosure RE Pipeline*
+*reverse-ios workflow v4.0.0 — UI-First RE Pipeline*