@leejungkiin/awkit 1.6.6 → 1.7.0

package/templates/specs/design-template.md

@@ -1,166 +1,76 @@
-# [Feature Name] Design Document
-
-## Overview
-
-[High-level description of the feature architecture - describe the overall approach, key design decisions, and how it fits into the larger system]
-
-## Architecture
-
-[Description of architectural approach and patterns used]
-
-### Component Hierarchy
-
-```
-[FeatureName]View (Root)
-├── [HeaderComponent] (Navigation and context)
-├── [MainContainer] (Primary content)
-│   ├── [ContentSection1]
-│   │   ├── [SubComponent1]
-│   │   └── [SubComponent2]
-│   ├── [ContentSection2]
-│   │   └── [SubComponent3]
-│   └── [ActionSection]
-│       └── [ActionButtons]
-├── [FloatingElements] (Overlays, FABs)
-└── [ModalComponents] (Sheets, Dialogs)
-```
-
-## Components and Interfaces
-
-### [MainComponent]
-- **Purpose**: [What this component does and why]
-- **Platform-Specific Design**:
-  - iOS: [Apple HIG considerations, SF Symbols, native patterns]
-  - Android: [Material Design 3 components, patterns]
-- **Key Features**:
-  - [Feature 1 with implementation detail]
-  - [Feature 2 with implementation detail]
-  - [Animations and transitions]
-
-### [SubComponent1]
-- **Purpose**: [Component purpose]
-- **Visual Design**:
-  - [Layout specifications]
-  - [Color and typography]
-  - [Spacing and sizing]
-- **Interaction Design**:
-  - [Touch/click behavior]
-  - [Hover states (if applicable)]
-  - [Animation specs]
-
-## Data Models
-
-### [PrimaryModel]
-```swift
-// iOS
-struct [ModelName]: Codable, Identifiable {
-    let id: UUID
-    let property1: String
-    let property2: Int
-    let optionalProperty: String?
-    let nestedObject: [NestedType]
-    let createdAt: Date
-    let updatedAt: Date
-    
-    enum CodingKeys: String, CodingKey {
-        case id
-        case property1 = "property_1"
-        // ... mapping for API compatibility
-    }
-}
-```
-
-```kotlin
-// Android
-data class [ModelName](
-    val id: String,
-    val property1: String,
-    val property2: Int,
-    val optionalProperty: String?,
-    val nestedObject: List<NestedType>,
-    val createdAt: Instant,
-    val updatedAt: Instant
-)
+# UI/Visual Design Document — [Tính Năng/Giao Diện]
+> "[Slogan hoặc Nguyên tắc chủ đạo của giao diện: "Ví dụ: Mỗi tab một sứ mệnh – không overlap"]"
+
+[⚠️ AI INSTRUCTION: BẮT BUỘC KHÔNG THIẾT KẾ DATA MODELS TẠI ĐÂY. Tập trung 100% vào Đồ Họa, Thông số UI (Hex, Padding), UX (Tap, Hover) và Component UI hierarchy.]
+
+## 1. Tổng Quan & Metadata
+* **Phiên bản:** [Ví dụ: 1.0]
+* **Ngày tạo:** [YYYY-MM-DD]
+* **Mục tiêu đồ họa:** [Lý do thay đổi/Kết quả UI mong muốn]
+
+## 2. Nguyên Tắc Thiết Kế (Design Principles)
+[Danh sách quy tắc bất biến về mặt đồ họa và trải nghiệm người dùng]
+1. [Nguyên tắc 1: Không overlap chức năng giữa các khu vực].
+2. [Nguyên tắc 2: Tình trạng hiển thị (Visibility) của các thành phần chính].
+3. [Nguyên tắc 3: Hệ thống thông báo/Badge thông minh].
+4. [Nguyên tắc 4: Phân cấp Animation theo tiers (Subtle, Satisfying, v.v.)].
+
+## 3. Đặc Tả Hình Ảnh (Component Specs)
+### 3.1 Thông số kỹ thuật (Thẩm mỹ & Layout)
+* **Kích thước:** [Ví dụ: Height: 60px + SafeArea].
+* **Màu sắc & Shadow:** 
+  - Nền/Border: [Mã màu Background, Border cụ thể].
+  - Shadow: [Elevation, Offset, Radius].
+* **Trạng thái (States):** 
+  - Active: [Màu sắc, font weight, opacity].
+  - Inactive: [Màu sắc, font weight, opacity].
+
+### 3.2 Danh sách Element
+[Bảng liệt kê các thành phần hiển thị]:
+| # | Tên Item | Mức độ ưu tiên | Icon/Graphic (Màu sắc) | Điều kiện nháy/hiển thị |
+|---|----------|----------------|------------------------|-------------------------|
+| 1 | [Item A] | [Primary]      | [Mã Hex / Vector]      | [Condition]             |
+
+## 4. Chi Tiết Các Màn Hình (Screen Breakdown)
+### 4.1 Layout: [Tên Màn Hình]
+* **Vai trò hiển thị:** [Dashboard / Modal / Popup]
+* **Cấu trúc đồ họa (Từ trên xuống):**
+    - **Header:** [Nút back, Tiêu đề, Badge]
+    - **Hero Section:** [Ảnh chụp, Thông điệp to]
+    - **Content Grid:** [Spacing dọc ngang, Padding 2 bên]
+    - **CTA Button:** [Stick bottom, Shadow layer]
+
+### 4.2 Component Hierarchy (Cấu trúc giao diện)
+[AI: Bắt buộc vẽ sơ đồ Text Tree cho cấu trúc Component React/UI UI-only]
+```text
+FeatureView (Root)
+│
+├── HeaderComponent
+│   └── BackButton
+│
+├── ContentSection
+│   ├── ItemCard
+│   └── ProgressBar
+│
+└── ActionButtons
+    └── PrimaryCTA
 ```
 
-### [StateModel]
-```swift
-// iOS - ViewModel State
-enum [Feature]ViewState {
-    case idle
-    case loading
-    case loaded([DataModel])
-    case error(Error)
-    case empty
-}
-```
-
-```kotlin
-// Android - UI State
-sealed interface [Feature]UiState {
-    data object Loading : [Feature]UiState
-    data class Success(val data: List<DataModel>) : [Feature]UiState
-    data class Error(val message: String) : [Feature]UiState
-    data object Empty : [Feature]UiState
-}
-```
-
-## Correctness Properties
-
-*Properties serve as the bridge between requirements and verifiable correctness guarantees.*
-
-**Property 1: [Property Name]**
-*For any* [scenario/input], the system should [expected behavior across all conditions]
-**Validates: Requirements 1.1, 1.2, 1.3**
-
-**Property 2: [Property Name]**
-*For any* [scenario/input], the system should [expected behavior]
-**Validates: Requirements 2.1, 2.2**
-
-**Property 3: Error Handling Correctness**
-*For any* error condition, the system should [graceful handling, user feedback, recovery options]
-**Validates: Requirements 3.1, 3.2, 3.3**
-
-## UI/UX Design Specifications
-
-### Visual Design System
-
-**Colors:**
-| Token | Light Mode | Dark Mode | Usage |
-|-------|------------|-----------|-------|
-| Primary | #[hex] | #[hex] | [usage] |
-| Secondary | #[hex] | #[hex] | [usage] |
-| Background | #[hex] | #[hex] | [usage] |
-
-**Typography:**
-| Style | Font | Size | Weight | Usage |
-|-------|------|------|--------|-------|
-| Title | [font] | 24pt | Bold | [usage] |
-| Body | [font] | 16pt | Regular | [usage] |
-
-**Spacing:**
-| Token | Value | Usage |
-|-------|-------|-------|
-| xs | 4pt | [usage] |
-| sm | 8pt | [usage] |
-| md | 16pt | [usage] |
-
-### Animation Specifications
-
-| Animation | Duration | Easing | Description |
-|-----------|----------|--------|-------------|
-| Appear | 300ms | easeOut | [description] |
-| Disappear | 200ms | easeIn | [description] |
-| Spring | 0.5s/0.7 | spring | [response/damping] |
-
-## Performance Considerations
+## 5. Đặc Tả Chuyển Động (Animation & Graphic Logic)
+* **Logic thông báo (Badge Status):** [Quy định dấu chấm đỏ nổi lên lúc nào, hiệu ứng thở "breathing" ra sao].
+* **Đặc tả chuyển động (Animation Spec):**
+    - **Kiểu:** [Spring / Linear / Bounce].
+    - **Thông số:** [Duration: X ms, Damping: Y, Stiffness: Z].
+* **Hiệu ứng Haptic (Rung):** [Gõ phím -> Light Haptic; Thành công -> Success Haptic].
 
-- **Lazy Loading**: [What should be lazy loaded]
-- **Caching Strategy**: [How data should be cached]
-- **Memory Management**: [Memory considerations]
+## 6. Sơ Đồ Routing (Đứng từ góc độ UI)
+* **Cấu trúc Thư mục Màn Hình:** [app/(tabs)/home.tsx]
+* **Component tái sử dụng:** [Ví dụ: Dùng chung thẻ UserCard từ design-system sẵn có].
 
-## Security Considerations
+## 7. Lộ Trình Triển Khai (Dành riêng cho Frontend/UI)
+* **Giai đoạn 1:** Lên layout tĩnh (CSS + HTML/JSX). Gắn Mock Text.
+* **Giai đoạn 2:** Apply Animations & Haptics.
+* **Giai đoạn 3:** Bọc Component ghép vào Data thật bên ngoài.
 
-- **Data Encryption**: [What needs encryption]
-- **Input Validation**: [Validation requirements]
-- **Authentication**: [Auth requirements]
+---
+*Tài liệu Đặc Tả Giao Diện (Visual & Graphic Design Only).*

package/templates/specs/requirements-template.md

@@ -1,65 +1,133 @@
-# [Feature Name] Requirements Document
-
-## Introduction
-
-[Brief description of the feature and its purpose - 2-3 sentences explaining what problem it solves and why it's important to users]
-
-## Glossary
-
-- **[Term_1]**: [Clear definition of domain-specific term]
-- **[Term_2]**: [Clear definition of domain-specific term]
-- **[System_Component]**: [Description of system component mentioned in requirements]
-
-## Requirements
-
-### Requirement 1
-
-**User Story:** As a [user type], I want to [action/capability], so that [benefit/value].
-
-#### Acceptance Criteria
-
-1. WHEN [triggering condition], THE [System_Component] SHALL [expected behavior]
-2. WHEN [triggering condition], THE [System_Component] SHALL [expected behavior]
-3. WHILE [ongoing context], THE [System_Component] SHALL [maintained behavior]
-4. IF [condition], THE [System_Component] SHALL [conditional behavior]
-5. WHEN [edge case], THE [System_Component] SHALL [edge case handling]
-
-### Requirement 2
-
-**User Story:** As a [user type], I want to [action/capability], so that [benefit/value].
-
-#### Acceptance Criteria
-
-1. WHEN [condition], THE [System_Component] SHALL [behavior]
-2. WHEN [condition], THE [System_Component] SHALL [behavior]
-3. WHILE [context], THE [System_Component] SHALL [behavior]
-
-### Requirement 3 (Error Handling)
-
-**User Story:** As a [user type], I want [error recovery capability], so that [resilience benefit].
-
-#### Acceptance Criteria
-
-1. WHEN [error condition], THE [System_Component] SHALL [error handling]
-2. WHEN [network failure], THE [System_Component] SHALL [offline handling]
-3. WHEN [invalid input], THE [System_Component] SHALL [validation feedback]
-
-### Requirement 4 (Security)
-
-**User Story:** As a [user type], I want [security feature], so that [security benefit].
-
-#### Acceptance Criteria
-
-1. WHEN [sensitive data access], THE [System_Component] SHALL [security measure]
-2. WHEN [authentication required], THE [System_Component] SHALL [auth flow]
-3. WHILE [session active], THE [System_Component] SHALL [session management]
-
-### Requirement 5 (Accessibility)
-
-**User Story:** As a [user with accessibility needs], I want [accessibility feature], so that [inclusive benefit].
-
-#### Acceptance Criteria
-
-1. WHEN [using screen reader], THE [System_Component] SHALL [accessibility support]
-2. WHEN [using keyboard only], THE [System_Component] SHALL [keyboard navigation]
-3. WHILE [displaying content], THE [System_Component] SHALL [contrast/sizing support]
+# Concept Document — [Tên Ứng dụng/Dự án]
+> "[Slogan hoặc câu định vị cốt lõi của dự án]"
+
+[⚠️ AI INSTRUCTION: You MUST fill out the following sections with EXTREME detail. Use ASCII diagrams (Plain Text boxes) where requested. Do not provide generic overviews. Dive deep into technical mappings, user psychology, and exact layouts as shown in the template structure.]
+
+## 1. Tầm nhìn & Lý do tồn tại
+* **Tóm tắt dự án:** [Nêu rõ dự án là gì, tích hợp công nghệ gì để tạo giá trị gì. 2-3 câu.]
+* **Vấn đề được giải quyết:** [Nêu pain points hiện tại của người dùng và lý do giải pháp cũ không hiệu quả.]
+* **Đối tượng người dùng cốt lõi:**
+  - [Nhân khẩu học 1]
+  - [Tâm lý/Nhu cầu 1]
+  - [Hành vi 1]
+
+## 2. Triết lý cốt lõi
+### 2.1 Các lớp phân tích / Nền tảng
+[AI: BẮT BUỘC VẼ ASCII DIAGRAM 3-5 block thể hiện các trụ cột dữ liệu/logic của app. Ví dụ: Input -> Database/Sources -> AI Engine -> Output]
+```text
+┌─────────────────────────────────────────────────┐
+│                   [LỚP 1]                       │
+│  [Chi tiết tầng 1]                              │
+├─────────────────────────────────────────────────┤
+│                   [LỚP 2]                       │
+│  [Chi tiết tầng 2]                              │
+└─────────────────────────────────────────────────┘
+                        ↓
+              [ĐỘNG CƠ XỬ LÝ CHÍNH]
+                        ↓
+              [KẾT QUẢ ĐẦU RA]
+```
+
+### 2.2 Nguyên tắc thiết kế tính năng
+1. [Nguyên tắc 1 - Ví dụ: Cá nhân hóa tuyệt đối]
+2. [Nguyên tắc 2 - Ví dụ: Hành động được/Actionable]
+3. [Nguyên tắc 3 - Ví dụ: Gamification nhẹ]
+4. [Nguyên tắc 4]
+5. [Nguyên tắc 5]
+
+## 3. Kiến trúc ứng dụng
+### 3.1 Stack kỹ thuật
+| Layer | Công nghệ |
+|-------|-----------|
+| Mobile/Web | [Ví dụ: React Native + Expo] |
+| Frontend State | [Ví dụ: Zustand] |
+| Core Backend | [Ví dụ: Node.js / Firebase] |
+| Database | [Ví dụ: Firestore / SQLite] |
+| AI / 3rd Party | [Ví dụ: Gemini API / MediaPipe] |
+
+### 3.2 Cấu trúc màn hình (Routing Tree)
+[AI: BẮT BUỘC vẽ sơ đồ cây thư mục/router cho các màn hình app]
+```text
+app/
+├── onboarding/
+│   ├── step-1
+│   └── step-n
+├── (tabs)/
+│   ├── tab-1  # Vai trò
+│   └── tab-2  # Vai trò
+└── screens/
+    ├── screen-1
+    └── screen-n
+```
+
+## 4. Luồng xử lý cốt lõi (Core Pipeline)
+[AI: BẮT BUỘC vẽ sơ đồ ASCII Flow thể hiện luồng nghiệp vụ từ Action của user đến Dữ liệu đổ ra.]
+```text
+[User Input]
+  [Hành động]
+         │
+         ▼
+[Phase 1 — Xử lý A]
+  [Logic hàm/Function logic]
+         │
+         ▼
+[Phase 2 — Xử lý B]
+  [Logic tổng hợp] -> Output
+```
+
+## 5. Onboarding — Mindset & Thiết kế
+### 5.1 Triết lý onboarding
+[Giá trị cốt lõi muốn truyền tải trước khi user đăng ký là gì?]
+### 5.2 Cấu trúc các slide
+- **Slide 0 (Hook):** [Mô tả chi tiết ảnh, text, animation lôi kéo]
+- **Slide 1 (Value 1):** [Chức năng 1]
+- **Slide 2 (Personalization):** ...
+- **Slide 3 (CTA):** ...
+### 5.3 Design patterns đặc thù
+- [Ví dụ: Count-up animation cho điểm số, Stagger card entry]
+
+## 6. Gợi ý tính năng — Mindset xây dựng
+Mỗi tính năng đều phải đáp ứng cấu trúc [Input -> Core Logic -> Actionable Suggestion -> "Why" Explanation].
+[Đưa ra 1 cặp ví dụ Đúng/Sai về việc recommend nội dung cho user theo quy tắc KHÔNG GENERIC.]
+- ❌ **Sai:** [Câu chung chung]
+- ✅ **Đúng:** [Câu cá nhân hóa sâu theo db/mệnh/sở thích]
+
+## 7. Design System
+### 7.1 Palette màu
+| Vai trò | Hex Code | Tên màu |
+|---------|----------|----------|
+| Primary | #Hex     | [Tên]    |
+| Text/Sub| #Hex     | [Tên]    |
+
+### 7.2 Animation & Icon Convention
+- [Quy tắc animation (Fade, Spring, Duration)]
+- [Quy tắc icon (PNG thực tế hay SVG tint)]
+
+## 8. Vòng lặp tăng trưởng (Engagement Loop)
+[AI: Vẽ ASCII text flow mô tả vòng lặp giữ chân user]
+```text
+[Lần đầu sử dụng] -> [Nhận giá trị A] -> [Thực hiện hành động B] -> [Sự kiện C kéo user quay lại] -> [Chia sẻ mạng xã hội]
+```
+| Trigger quay lại | Tần suất |
+|-------------------|----------|
+| [Sự kiện/Push]    | [Bao lâu]|
+
+## 9. Mô hình kinh doanh (Monetization)
+[AI: Vẽ sơ đồ cây cho Free Tier và Premium Tier]
+
+## 10. Nguyên tắc kỹ thuật
+* **Performance:** [Luật xử lý client side vs server side]
+* **Data Flow:** [Service A -> Service B]
+* **Error Handling:** [Mindset khi API lỗi, rớt mạng, thiếu data]
+
+## 11. Roadmap tính năng
+* **Phase 1 — Nền tảng (MVP):** ...
+* **Phase 2 — Chiều sâu (Depth):** ...
+* **Phase 3 — Tăng trưởng (Growth):** ...
+
+## 12. Điều Không Được Làm (Anti-patterns)
+1. [Luật 1 - Ví dụ: Không để UI lạnh lẽo công nghệ]
+2. [Luật 2 - Ví dụ: Không lưu data raw người dùng lên server]
+3. [Luật 3]
+4. [Luật 4]
+5. [Luật 5]

package/workflows/ui/create-spec-architect.md

@@ -49,80 +49,110 @@ Hỏi người dùng các câu hỏi:
 mkdir -p docs/specs/[feature-name]
 ```
 
-### 3.2. Requirements Template
+### 3.2. Detailed Concept/Requirements Template (Theo chuẩn Đẹp Tướng)
 
 **File:** `docs/specs/[feature]/requirements.md`
 
 ```markdown
-# [Feature] Requirements
+# Concept Document — [Tính Năng/Giao Diện]
+> "[Slogan hoặc câu định vị ngắn gọn]"
+
+[⚠️ AI INSTRUCTION: BẮT BUỘC sử dụng cấu trúc cực kỳ chi tiết, dùng ASCII Diagram (Plain text) cho các kiến trúc/luồng xử lý và bảng biểu như template chuẩn.]
+
+## 1. Tầm nhìn & Lý do tồn tại
+* **Tóm tắt dự án:** ...
+* **Vấn đề được giải quyết:** ...
+* **Đối tượng người dùng cốt lõi:** ...
+
+## 2. Triết lý cốt lõi
+### 2.1 Các lớp phân tích / Nền tảng (Bắt buộc vẽ ASCII logic block)
+```text
+┌─────────────────────────────────────────────────┐
+│                   [LỚP 1]                       │
+├─────────────────────────────────────────────────┤
+│                   [LỚP 2]                       │
+└─────────────────────────────────────────────────┘
+                        ↓
+              [ĐỘNG CƠ XỬ LÝ CHÍNH]
+```
+### 2.2 Nguyên tắc thiết kế tính năng (Tối thiểu 5 nguyên tắc)
 
-## Introduction
-[1-2 sentences: What & Why]
+## 3. Kiến trúc ứng dụng
+### 3.1 Stack kỹ thuật (Bảng ánh xạ UI, AI, DB, BaaS)
+### 3.2 Cấu trúc màn hình (Vẽ sơ đồ Folder Tree routing)
 
-## Glossary
-- **Term**: Definition
+## 4. Luồng xử lý cốt lõi (Vẽ ASCII Flowchain logic)
 
-## Requirements
+## 5. Onboarding — Mindset & Thiết kế
+* Triết lý: Value trước, đăng ký sau
+* Cấu trúc Slides (Slide 0 -> 3): Chi tiết animation, thông điệp.
+* Design Patterns: Count-up, Stagger, v.v.
 
-### RQ-01: [Requirement Name]
-**Story:** As a [user], I want [action], so that [benefit].
+## 6. Gợi ý tính năng — Mindset (Logic mapping, Không Generic)
+* Đưa ví dụ ❌ Text chung chung vs ✅ Text phân tích chiều sâu.
 
-**Criteria:**
-1. WHEN [trigger], THEN [behavior]
-2. WHEN [error], THEN [handling]
-3. WHILE [state], THEN [constraint]
+## 7. Design System
+* Palette màu (Bảng Hex + Tên)
+* Animation & Icon conventions
 
-### RQ-02: [Requirement Name]
-**Story:** As a [user], I want [action], so that [benefit].
+## 8. Vòng lặp tăng trưởng & Engagement
+* Vẽ ASCII Loop tuần hoàn giữ chân user
+* Bảng Trigger Notifications
 
-**Criteria:**
-1. WHEN [trigger], THEN [behavior]
+## 9. Mô hình kinh doanh (Cây tính năng Free vs Premium)
+## 10. Nguyên tắc kỹ thuật (Performance, Data flow, Error handling)
+## 11. Roadmap (Phase MVP -> Depth -> Growth)
+## 12. Điều Không Được Làm (Anti-patterns - 7 quy tắc cấm kỵ)
 ```
 
-### 3.3. Design Template
+### 3.3. Design Template (Theo chuẩn Đồ Họa & UI)
 
 **File:** `docs/specs/[feature]/design.md`
 
 ```markdown
-# [Feature] Design
-
-## Overview
-[Architecture approach in 2-3 sentences]
-
-## Component Hierarchy
-```
-FeatureView
+# UI/Visual Design Document — [Tính Năng/Giao Diện]
+> "[Slogan hoặc Nguyên tắc chủ đạo của giao diện: "Ví dụ: Mỗi tab một sứ mệnh – không overlap"]"
+
+## 1. Tổng Quan & Metadata
+* **Phiên bản & Thời gian:** ...
+* **Mục tiêu:** [Lý do thay đổi/Kết quả đồ họa mong muốn]
+
+## 2. Nguyên Tắc Thiết Kế (Design Principles)
+1. [Tình trạng hiển thị / Phân cấp Animation theo tier]
+2. [Sử dụng hệ thống thông báo/Badge thông minh]
+
+## 3. Đặc Tả Hình Ảnh (Component Specs)
+### 3.1 Thông số kỹ thuật (Thẩm mỹ)
+* **Kích thước:** [Ví dụ: Height: 60px + SafeArea]
+* **Màu sắc & Shadow:** [Mã màu Hex, Elevation, Border]
+* **Trạng thái:** [Màu Active/Inactive, Font Weight]
+
+### 3.2 Danh sách Element
+* Mô tả chi tiết Icon, Label, Mức hiển thị.
+
+## 4. Chi Tiết Các Màn Hình (Screen Breakdown)
+### 4.1 Layout: [Tên Màn Hình]
+* Theo chiều dọc:
+  - Header / Hero Section
+  - Grid / Danh sách
+  - Action Buttons (Bottom)
+### 4.2 Component Hierarchy (Cấu trúc giao diện)
+```text
+FeatureView (Root)
 ├── HeaderComponent
 ├── ContentSection
-│   ├── ItemList
-│   └── ItemDetail
 └── ActionButtons
 ```
 
-## Data Models
-```swift
-struct Model: Codable, Identifiable {
-    let id: UUID
-    let property: String
-}
+## 5. Đặc Tả Chuyển Động (Animation & Graphic Logic)
+* **Animation Spec:** [Kiểu: Spring, Ease. Damping/Duration cụ thể]
+* **Haptic:** [Rung khi chạm/thành công]
+* **Badge Graphic Logic:** [Vị trí chấm đỏ, điều kiện nhấp nháy/biến mất]
 
-enum ViewState {
-    case idle, loading, loaded([Model]), error(Error)
-}
+## 6. Sơ Đồ Routing (Màn Hình)
+* **Cấu trúc Thư mục UI:** [Sơ đồ App Router, ví dụ: app/(tabs)/explore]
+* Không đi sâu vào Database. Chỉ liệt kê File UI mới.
 ```
-
-## Key Interfaces
-| Component | Purpose | Dependencies |
-|-----------|---------|--------------|
-| ViewModel | State management | Repository |
-| Repository | Data access | API, Cache |
-
-## UI Specs
-- **Colors:** [Primary, Secondary, Accent]
-- **Typography:** [Title, Body, Caption sizes]
-- **Animations:** [Duration, Easing]
-```
-
 ### 3.4. Task Generation (Symphony)
  
 **Script:** `docs/specs/[feature]/init_tasks.sh`