@leejungkiin/awkit 1.0.0

package/workflows/quality/performance-audit.md

@@ -0,0 +1,343 @@
+---
+description: ⚡ Phân tích & Tối ưu Performance
+---
+
+# WORKFLOW: /performance-audit - Performance Analysis & Optimization
+
+Phân tích hiệu suất ứng dụng và đưa ra đề xuất tối ưu hóa.
+
+---
+
+## Khi nào cần audit?
+
+- App chạy chậm
+- Battery drain cao
+- Memory leaks
+- Trước khi release
+- Sau khi thêm tính năng lớn
+
+---
+
+## Giai đoạn 1: Profiling
+
+### iOS - Instruments
+
+```bash
+# 1. Build for Profiling
+# Xcode → Product → Profile (⌘I)
+
+# 2. Choose template:
+# - Time Profiler: CPU usage
+# - Allocations: Memory usage
+# - Leaks: Memory leaks
+# - Energy Log: Battery usage
+```
+
+**Key Metrics:**
+- CPU usage < 50% average
+- Memory < 200MB for simple apps
+- Frame rate: 60 FPS (16.67ms per frame)
+- Launch time < 400ms
+
+### Android - Profiler
+
+```bash
+# Android Studio → View → Tool Windows → Profiler
+
+# Or command line:
+adb shell am profile start <package> /data/local/tmp/profile.trace
+# ... use app ...
+adb shell am profile stop <package>
+adb pull /data/local/tmp/profile.trace
+```
+
+**Key Metrics:**
+- CPU usage < 40% average
+- Memory < 150MB for simple apps
+- Frame time < 16ms (60 FPS)
+- Startup time < 500ms
+
+### React Native - Flipper
+
+```bash
+# Install Flipper
+brew install --cask flipper
+
+# Run with Flipper
+npx react-native run-ios
+# or
+npx react-native run-android
+
+# Open Flipper → Connect to app
+```
+
+---
+
+## Giai đoạn 2: Identify Bottlenecks
+
+### Common Issues
+
+| Issue | Symptoms | Tools |
+|-------|----------|-------|
+| **Slow rendering** | Janky scrolling, low FPS | Time Profiler, GPU Profiler |
+| **Memory leaks** | Increasing memory, crashes | Allocations, Leaks |
+| **Heavy computations** | High CPU, battery drain | Time Profiler |
+| **Large images** | Slow loading, high memory | Network profiler |
+| **Inefficient queries** | Slow data loading | Database profiler |
+
+---
+
+## Giai đoạn 3: Optimization Strategies
+
+### 3.1. Rendering Performance
+
+**iOS (SwiftUI)**
+```swift
+// ❌ BAD: Re-renders entire list
+ForEach(items) { item in
+    HeavyView(item: item)
+}
+
+// ✅ GOOD: Use lazy loading
+LazyVStack {
+    ForEach(items) { item in
+        HeavyView(item: item)
+            .id(item.id) // Stable identity
+    }
+}
+```
+
+**Android (Compose)**
+```kotlin
+// ❌ BAD: Recomposition on every state change
+@Composable
+fun ItemList(items: List<Item>) {
+    Column {
+        items.forEach { item ->
+            HeavyItem(item)
+        }
+    }
+}
+
+// ✅ GOOD: Use LazyColumn with keys
+@Composable
+fun ItemList(items: List<Item>) {
+    LazyColumn {
+        items(items, key = { it.id }) { item ->
+            HeavyItem(item)
+        }
+    }
+}
+```
+
+**React Native**
+```typescript
+// ❌ BAD: FlatList without optimization
+<FlatList
+  data={items}
+  renderItem={({ item }) => <HeavyComponent item={item} />}
+/>
+
+// ✅ GOOD: Optimized FlatList
+<FlatList
+  data={items}
+  renderItem={({ item }) => <HeavyComponent item={item} />}
+  keyExtractor={(item) => item.id}
+  removeClippedSubviews={true}
+  maxToRenderPerBatch={10}
+  windowSize={5}
+  getItemLayout={(data, index) => ({
+    length: ITEM_HEIGHT,
+    offset: ITEM_HEIGHT * index,
+    index,
+  })}
+/>
+```
+
+### 3.2. Image Optimization
+
+**iOS**
+```swift
+// Use appropriate image size
+Image("photo")
+    .resizable()
+    .aspectRatio(contentMode: .fill)
+    .frame(width: 100, height: 100)
+    .clipped()
+
+// Lazy loading
+AsyncImage(url: URL(string: imageURL)) { image in
+    image.resizable()
+} placeholder: {
+    ProgressView()
+}
+```
+
+**Android**
+```kotlin
+// Use Coil for efficient image loading
+AsyncImage(
+    model = imageUrl,
+    contentDescription = null,
+    modifier = Modifier.size(100.dp),
+    contentScale = ContentScale.Crop
+)
+```
+
+**React Native**
+```typescript
+// Use FastImage
+import FastImage from 'react-native-fast-image';
+
+<FastImage
+  source={{ uri: imageUrl, priority: FastImage.priority.normal }}
+  style={{ width: 100, height: 100 }}
+  resizeMode={FastImage.resizeMode.cover}
+/>
+```
+
+### 3.3. Memory Management
+
+**iOS**
+```swift
+// Use weak references to avoid retain cycles
+class ViewModel: ObservableObject {
+    private var cancellables = Set<AnyCancellable>()
+    
+    func fetchData() {
+        apiService.getData()
+            .sink { [weak self] data in
+                self?.updateUI(data)
+            }
+            .store(in: &cancellables)
+    }
+}
+```
+
+**Android**
+```kotlin
+// Use lifecycle-aware components
+class MyViewModel : ViewModel() {
+    private val _data = MutableLiveData<Data>()
+    val data: LiveData<Data> = _data
+    
+    override fun onCleared() {
+        // Clean up resources
+        super.onCleared()
+    }
+}
+```
+
+### 3.4. Database Optimization
+
+**iOS (SwiftData)**
+```swift
+// Use indexes
+@Model
+class User {
+    @Attribute(.unique) var id: UUID
+    @Attribute(.indexed) var email: String // Index for faster queries
+    var name: String
+}
+
+// Batch operations
+let users = try context.fetch(FetchDescriptor<User>())
+context.delete(users) // Batch delete
+```
+
+**Android (Room)**
+```kotlin
+@Entity(indices = [Index(value = ["email"], unique = true)])
+data class User(
+    @PrimaryKey val id: String,
+    val email: String,
+    val name: String
+)
+
+// Use transactions for batch operations
+@Transaction
+suspend fun updateUsers(users: List<User>) {
+    users.forEach { userDao.update(it) }
+}
+```
+
+---
+
+## Giai đoạn 4: Measure Improvements
+
+### Before/After Comparison
+
+```markdown
+## Performance Audit Report
+
+### Metrics Before Optimization
+- App launch: 800ms
+- Memory usage: 250MB
+- FPS: 45 average
+- CPU usage: 65%
+
+### Optimizations Applied
+1. Implemented lazy loading for lists
+2. Optimized image loading with caching
+3. Fixed memory leaks in ViewModels
+4. Added database indexes
+
+### Metrics After Optimization
+- App launch: 400ms ✅ (50% improvement)
+- Memory usage: 150MB ✅ (40% reduction)
+- FPS: 58 average ✅ (29% improvement)
+- CPU usage: 35% ✅ (46% reduction)
+
+### Recommendations
+- [ ] Monitor memory in production
+- [ ] Add performance tests to CI
+- [ ] Profile quarterly
+```
+
+---
+
+## Giai đoạn 5: Continuous Monitoring
+
+### Setup Analytics
+
+```swift
+// iOS - Track performance metrics
+func trackPerformance() {
+    let launchTime = Date().timeIntervalSince(appLaunchTime)
+    Analytics.logEvent("app_launch_time", parameters: [
+        "duration_ms": launchTime * 1000
+    ])
+}
+```
+
+```kotlin
+// Android
+class PerformanceMonitor {
+    fun trackStartup() {
+        val duration = SystemClock.elapsedRealtime() - startTime
+        FirebasePerformance.getInstance()
+            .newTrace("app_startup")
+            .apply {
+                putMetric("duration_ms", duration)
+                start()
+                stop()
+            }
+    }
+}
+```
+
+---
+
+## Checklist
+
+- [ ] Profile with platform tools
+- [ ] Identify top 3 bottlenecks
+- [ ] Implement optimizations
+- [ ] Measure improvements
+- [ ] Setup continuous monitoring
+- [ ] Document findings
+- [ ] Add performance tests
+
+---
+
+**Next Steps**: `/test` để verify optimizations không break functionality

package/workflows/quality/project-audit.md

@@ -0,0 +1,61 @@
+---
+description: Quét toàn bộ dự án để đánh giá mức độ hoàn thiện, phát hiện logic thiếu sót, và tạo báo cáo tổng quan kèm đề xuất test Maestro.
+---
+
+# Project Comprehensive Audit Workflow 🕵️‍♂️
+
+## 1. Khởi động & Nhận diện 🚩
+1.  **Đọc ngữ cảnh dự án**:
+    -   Đọc file `.project-identity` (nếu có) để hiểu Tech Stack và Roadmap.
+    -   Đọc file `App.swift` hoặc `SceneDelegate.swift` để xác định điểm entry của ứng dụng.
+2.  **Bản đồ cấu trúc**:
+    -   Dùng `list_dir` (recursive hoặc depth=3) để nắm cấu trúc thư mục chính: `Core`, `Features`, `UI`, `Services`, `Models`.
+    -   Xác định mô hình kiến trúc đang dùng (MVVM, VIPER, TCA, v.v.).
+
+## 2. Quét độ hoàn thiện (Static Analysis) 🔍
+1.  **Tìm "Nợ kỹ thuật" & Placeholder**:
+    -   Dùng `grep_search` tìm các từ khóa: `TODO`, `FIXME`, `fatalError`, `print(`, `Coming soon`, `placeholder`.
+    -   Phát hiện các function/class rỗng hoặc chưa implement logic.
+2.  **Kiểm tra tính kết nối**:
+    -   View có ViewModel không?
+    -   Service có được inject vào ViewModel không? (Kiểm tra xem có hardcode singleton không mong muốn không).
+3.  **Kiểm tra tài nguyên**:
+    -   Kiểm tra `Assets.xcassets` (sơ bộ) xem có ảnh thiếu hay tên không chuẩn không.
+
+## 3. Phân tích chức năng (Feature Gap Analysis) 🧩
+Dựa trên cấu trúc thư mục và code thực tế, lập bảng so sánh:
+-   **Tính năng đã có**: (Ví dụ: Auth, Home, Settings).
+-   **Trạng thái**:
+    -   🟢 **Done**: Logic đầy đủ, UI hoàn thiện.
+    -   🟡 **In Progress**: Có UI nhưng logic mock/hardcode.
+    -   🔴 **Missing**: Có trong plan/identity nhưng chưa thấy code.
+    -   ⚪️ **Unknown**: Code rác, không rõ mục đích.
+
+## 4. Kiểm thử giao diện thực tế (Maestro Integration) 📱
+*Bước này yêu cầu Maestro đã được cài đặt (`brew install maestro`).*
+
+1.  **Đề xuất kịch bản test (Test Plan)**:
+    -   Dựa trên các màn hình đã quét được, đề xuất 1 flow kiểm thử chính (Critical Path). Ví dụ: `Login -> Home -> Detail -> Back`.
+2.  **Tạo/Chạy Maestro Flow**:
+    -   Tạo file tạm `audit_flow.yaml`.
+    -   Chạy lệnh: `maestro test audit_flow.yaml`. (Nếu user đồng ý và môi trường sẵn sàng).
+    -   *Lưu ý: Nếu không chạy được Maestro, chuyển sang phân tích code tĩnh sâu hơn.*
+
+## 5. Báo cáo & Đề xuất (Final Report) bằng tiếng Việt 📝
+Tổng hợp kết quả thành báo cáo Markdown:
+
+### 📊 Báo cáo tiến độ dự án [Tên Dự Án]
+| Tính năng | Trạng thái | Ghi chú (Lỗi/Thiếu/Cần tối ưu) |
+| :--- | :--- | :--- |
+| Authentication | 🟢 Done | Đã có login/register, chưa có forgot password |
+| User Profile | 🟡 Partial | UI xong, chưa lưu data xuống DB |
+| ... | ... | ... |
+
+### 🛠 Đề xuất hành động
+1.  **Ưu tiên cao**: [Các crash tiềm ẩn, logic sai].
+2.  **Cần làm ngay**: [Các tính năng còn đang dang dở].
+3.  **Tối ưu**: [Refactor code rác, UI chưa mượt].
+
+### 🤖 Lệnh tiếp theo
+- `bd create "Fix logic ABC"`
+- `/create-feature "Tên tính năng còn thiếu"`

package/workflows/quality/self-healing-test.md

@@ -0,0 +1,192 @@
+---
+description: Tự động chạy lại, phát hiện lỗi và vá mã nguồn cho bài test XCTest/JUnit/Jest.
+safe_auto_run: false
+---
+
+# /self-healing-test - Mobile Test Loop
+
+A sophisticated workflow that doesn't just fail on error, but attempts to fix the test or the code.
+
+---
+
+## Phase 1: Test Execution
+// turbo
+
+### iOS (XCTest)
+```bash
+xcodebuild test \
+  -workspace *.xcworkspace \
+  -scheme [Scheme] \
+  -destination 'platform=iOS Simulator,name=iPhone 15 Pro' \
+  -only-testing:[TestTarget]/[TestClass]/[testMethod]
+```
+
+### Android (JUnit / Espresso)
+```bash
+# Unit tests
+./gradlew testDebugUnitTest --tests "[TestClass]"
+
+# Instrumented tests
+./gradlew connectedDebugAndroidTest -Pandroid.testInstrumentationRunnerArguments.class=[TestClass]
+```
+
+### Expo (Jest)
+```bash
+npm test -- --testPathPattern="[pattern]" --watch=false
+```
+
+---
+
+## Phase 2: Failure Interception
+
+If test fails:
+
+### 2.1. Capture Artifacts
+// turbo
+- **iOS**: Capture simulator screenshot, test logs
+- **Android**: Capture emulator screenshot, logcat
+- **Expo**: Capture test output
+
+### 2.2. Analyze Failure Type
+
+| Type | Pattern | Strategy |
+| :--- | :--- | :--- |
+| **Selector Not Found** | "Unable to find element" | Update test selector |
+| **Assertion Failed** | "Expected X but got Y" | Fix implementation |
+| **Timeout** | "Timed out waiting" | Add wait, check async |
+| **Null/Nil Error** | "unexpectedly found nil" | Add null check |
+| **API Error** | "Network request failed" | Check mock setup |
+
+---
+
+## Phase 3: The "Heal" Step
+
+### Case A: Selector Not Found (UI Changed)
+1. **Read UI file** to find current element
+2. **Update test file** with new selector:
+
+**iOS:**
+```swift
+// Before
+app.buttons["oldButton"].tap()
+
+// After (find new accessibilityIdentifier)
+app.buttons["newButton"].tap()
+```
+
+**Android:**
+```kotlin
+// Before
+onView(withId(R.id.oldButton)).perform(click())
+
+// After
+onView(withId(R.id.newButton)).perform(click())
+```
+
+### Case B: Assertion Failed (Logic Bug)
+1. **Analyze expected vs actual**
+2. **Locate function** causing wrong output
+3. **Apply fix** to implementation
+
+### Case C: Timeout (Async Issue)
+1. **Add explicit wait:**
+
+**iOS:**
+```swift
+let exists = element.waitForExistence(timeout: 5)
+XCTAssertTrue(exists)
+```
+
+**Android:**
+```kotlin
+IdlingRegistry.getInstance().register(idlingResource)
+// or use Espresso IdlingResource
+```
+
+**Expo:**
+```typescript
+await waitFor(() => expect(element).toBeVisible());
+```
+
+---
+
+## Phase 4: Retry Loop
+// turbo
+
+```
+Loop (max 3 iterations):
+  1. Run failing test
+  2. If PASS → Break, report success
+  3. If FAIL → Analyze, Apply fix
+  4. Increment counter
+  
+If still failing after 3 attempts:
+  → Abort and report to user
+```
+
+---
+
+## Phase 5: Success Actions
+
+### If Healed:
+// turbo
+1. **Report fix:**
+   ```
+   ✅ Test Healed!
+   
+   Test: [TestName]
+   Issue: [Selector not found]
+   Fix: Updated accessibilityIdentifier in [File]
+   Attempts: 2
+   ```
+
+2. **Auto-commit (optional):**
+   ```bash
+   git add .
+   git commit -m "test: auto-heal fix for [TestName]"
+   ```
+
+### If Not Healed:
+```
+❌ Could Not Auto-Heal
+
+Test: [TestName]
+Attempts: 3
+Last Error: [Error details]
+
+Possible Issues:
+- Complex logic error requiring manual review
+- Missing mock data
+- Environment configuration
+
+Recommendation: Use /debug for manual investigation
+```
+
+---
+
+## Phase 6: Test Coverage Check (Optional)
+
+After healing, optionally run coverage:
+
+### iOS
+```bash
+xcodebuild test -enableCodeCoverage YES ...
+xcrun xccov view --report build/Logs/Test/*.xcresult
+```
+
+### Android
+```bash
+./gradlew jacocoTestReport
+```
+
+### Expo
+```bash
+npm test -- --coverage
+```
+
+---
+
+## ⚠️ NEXT STEPS:
+- All tests pass → `/deploy` or continue coding
+- Tests still failing → `/debug` for manual fix
+- Want more tests → `/feature-completion` with TDD

package/workflows/quality/ui-review.md

@@ -0,0 +1,130 @@
+---
+description: Đánh giá thành phần giao diện, phân tích tính năng và kiểm tra triển khai logic.
+---
+
+# /ui-review - The Visual Inspector
+
+You are **Antigravity Creative Director**. User has a "Vibe" but doesn't know professional terminology.
+
+**Mission:** Transform "Vibe" into beautiful, usable, professional interface.
+
+---
+
+## Phase 1: Vibe Styling (Understand the Vibe)
+
+### 1.1. Ask about Style
+"What kind of look do you want?"
+- A) **Clean, Minimal** (Light, spacious)
+- B) **Luxury, Dark** (Premium, sophisticated)
+- C) **Colorful, Playful** (Young, energetic)
+- D) **Corporate, Formal** (Professional, business)
+- E) **Tech, Futuristic** (Modern, cutting-edge)
+
+### 1.2. Ask about Colors
+- "Any preferred main color? (Or match company logo?)"
+- "Light mode or Dark mode?"
+
+### 1.3. Ask about Shapes
+- "Rounded corners (soft) or sharp corners (edgy)?"
+- "Need shadow effects for depth?"
+
+---
+
+## Phase 2: Hidden UX Discovery
+
+Many Vibe Coders don't think about these. AI must proactively ask:
+
+### 2.1. Device Usage
+"Will users mainly use Phone or Computer?"
+- Phone → Mobile-first, large buttons, hamburger menu
+- Computer → Sidebar, wide data tables
+
+### 2.2. Loading States
+"What to show while loading data?"
+- A) Spinner (circle)
+- B) Progress bar
+- C) Skeleton (looks professional)
+
+### 2.3. Empty States
+"What to show when no data? (e.g., empty cart)"
+- AI designs beautiful Empty State with illustration + CTA
+
+### 2.4. Error States
+"How to show errors?"
+- A) Popup in center
+- B) Banner at top
+- C) Toast notification in corner
+
+### 2.5. Accessibility (Users often forget)
+"Need screen reader support?"
+AI will AUTOMATICALLY:
+- Ensure color contrast (WCAG AA)
+- Add alt text for images
+- Enable keyboard navigation
+
+### 2.6. Dark Mode
+"Need dark mode?"
+- If YES → AI designs both versions
+
+---
+
+## Phase 3: Reference & Inspiration
+
+### 3.1. Find Inspiration
+"Any website/app you find beautiful to reference?"
+- If YES → AI analyzes and learns the style
+- If NO → AI finds suitable inspiration
+
+---
+
+## Phase 4: Mockup Generation
+
+### 4.1. Create Mockup
+1. Compose detailed prompt for `generate_image`:
+   - Colors (hex codes)
+   - Layout (Grid, Cards, Sidebar)
+   - Typography (Font style)
+   - Spacing, Shadows, Borders
+2. Call `generate_image` to create mockup
+3. Show User: "Does this match your vision?"
+
+### 4.2. Iteration (Repeat if needed)
+- User: "Too dark" → AI increases brightness, redraws
+- User: "Boring" → AI adds spacing, shadows
+- User: "Colors too bright" → AI reduces saturation
+
+---
+
+## Phase 5: Pixel-Perfect Implementation
+
+### 5.1. Component Breakdown
+- Decompose mockup into Components (Header, Sidebar, Card, Button...)
+
+### 5.2. Code Implementation
+Write CSS/SwiftUI/Compose to recreate EXACTLY like mockup:
+- Responsive (Desktop + Tablet + Mobile)
+- Hover effects
+- Smooth transitions/animations
+- Loading states
+- Error states
+- Empty states
+
+### 5.3. Accessibility Check
+- Verify color contrast
+- Add ARIA labels / accessibilityLabel
+- Test keyboard navigation
+
+---
+
+## Phase 6: Handover
+
+1. "UI is ready. Preview in browser/simulator."
+2. "Try on mobile device too."
+3. "Need any adjustments?"
+
+---
+
+## ⚠️ NEXT STEPS:
+- UI OK → `/code` or `/feature-completion` to add logic
+- Need adjustments → Continue in `/ui-review`
+- Display issues → `/debug`