@leejungkiin/awkit 1.6.5 → 1.6.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/README.md +121 -130
  2. package/bin/awk.js +111 -8
  3. package/package.json +5 -3
  4. package/schemas/onboarding-screen.schema.json +108 -0
  5. package/scripts/__pycache__/openrouter_image_gen.cpython-311.pyc +0 -0
  6. package/scripts/cockpit-quota.js +93 -0
  7. package/scripts/openrouter_image_gen.py +772 -0
  8. package/scripts/video-analyzer.js +172 -0
  9. package/skills/CATALOG.md +2 -1
  10. package/skills/ai-sprite-maker/SKILL.md +27 -6
  11. package/skills/ai-sprite-maker/scripts/__pycache__/remove_chroma_key.cpython-311.pyc +0 -0
  12. package/skills/ai-sprite-maker/scripts/remove_chroma_key.py +440 -0
  13. package/skills/awf-caveman/SKILL.md +65 -0
  14. package/skills/expo-build-optimizer/SKILL.md +33 -0
  15. package/skills/ios-app-store-audit/SKILL.md +48 -0
  16. package/skills/ios-expert-coder/SKILL.md +45 -0
  17. package/skills/mascot-designer/SKILL.md +66 -0
  18. package/skills/mascot-designer/examples/witny-case-study.md +35 -0
  19. package/skills/orchestrator/SKILL.md +20 -0
  20. package/skills/short-maker/scripts/google-flow-cli/README.md +227 -115
  21. package/skills/short-maker/scripts/google-flow-cli/gflow/api/client.py +32 -3
  22. package/skills/short-maker/scripts/google-flow-cli/gflow/api/models.py +4 -2
  23. package/skills/short-maker/scripts/google-flow-cli/gflow/cli/main.py +33 -6
  24. package/skills/short-maker/scripts/google-flow-cli/pyproject.toml +1 -1
  25. package/skills/verification-gate/SKILL.md +4 -0
  26. package/templates/help.html +21 -0
  27. package/templates/project-identity/android.json +24 -0
  28. package/templates/project-identity/backend-nestjs.json +24 -0
  29. package/templates/project-identity/expo.json +24 -0
  30. package/templates/project-identity/ios.json +24 -0
  31. package/templates/project-identity/web-nextjs.json +24 -0
  32. package/templates/specs/design-template.md +71 -161
  33. package/templates/specs/requirements-template.md +133 -65
  34. package/workflows/ui/create-spec-architect.md +80 -50
  35. package/workflows/ui/image-gen.md +118 -0
@@ -19,6 +19,12 @@
19
19
  "indentation": "spaces-2",
20
20
  "lineLength": 100
21
21
  },
22
+ "communication": {
23
+ "cavemanMode": {
24
+ "enabled": false,
25
+ "level": "full"
26
+ }
27
+ },
22
28
  "createdDate": "{{DATE}}",
23
29
  "lastUpdated": "{{DATE}}",
24
30
  "automation": {
@@ -46,6 +52,24 @@
46
52
  "git": {
47
53
  "autoCommit": true,
48
54
  "autoPush": true
55
+ },
56
+ "obsidian": {
57
+ "enabled": false,
58
+ "path": "",
59
+ "autoSync": false
60
+ },
61
+ "mcp": {
62
+ "pixel-mcp": {
63
+ "enabled": false
64
+ }
65
+ }
66
+ },
67
+ "modelPolicy": {
68
+ "mode": "auto",
69
+ "defaultTier": "STANDARD",
70
+ "tierOverrides": {
71
+ "*.plist|*.json|*.env": "LIGHT",
72
+ "docs/*": "LIGHT"
49
73
  }
50
74
  }
51
75
  }
@@ -22,6 +22,12 @@
22
22
  "indentation": "spaces-2",
23
23
  "lineLength": 100
24
24
  },
25
+ "communication": {
26
+ "cavemanMode": {
27
+ "enabled": false,
28
+ "level": "full"
29
+ }
30
+ },
25
31
  "createdDate": "{{DATE}}",
26
32
  "lastUpdated": "{{DATE}}",
27
33
  "automation": {
@@ -49,6 +55,24 @@
49
55
  "git": {
50
56
  "autoCommit": true,
51
57
  "autoPush": true
58
+ },
59
+ "obsidian": {
60
+ "enabled": false,
61
+ "path": "",
62
+ "autoSync": false
63
+ },
64
+ "mcp": {
65
+ "pixel-mcp": {
66
+ "enabled": false
67
+ }
68
+ }
69
+ },
70
+ "modelPolicy": {
71
+ "mode": "auto",
72
+ "defaultTier": "STANDARD",
73
+ "tierOverrides": {
74
+ "*.plist|*.json|*.env": "LIGHT",
75
+ "docs/*": "LIGHT"
52
76
  }
53
77
  }
54
78
  }
@@ -22,6 +22,12 @@
22
22
  "indentation": "spaces-4",
23
23
  "lineLength": 120
24
24
  },
25
+ "communication": {
26
+ "cavemanMode": {
27
+ "enabled": false,
28
+ "level": "full"
29
+ }
30
+ },
25
31
  "createdDate": "{{DATE}}",
26
32
  "lastUpdated": "{{DATE}}",
27
33
  "automation": {
@@ -49,6 +55,24 @@
49
55
  "git": {
50
56
  "autoCommit": true,
51
57
  "autoPush": true
58
+ },
59
+ "obsidian": {
60
+ "enabled": false,
61
+ "path": "",
62
+ "autoSync": false
63
+ },
64
+ "mcp": {
65
+ "pixel-mcp": {
66
+ "enabled": false
67
+ }
68
+ }
69
+ },
70
+ "modelPolicy": {
71
+ "mode": "auto",
72
+ "defaultTier": "STANDARD",
73
+ "tierOverrides": {
74
+ "*.plist|*.json|*.env": "LIGHT",
75
+ "docs/*": "LIGHT"
52
76
  }
53
77
  }
54
78
  }
@@ -19,6 +19,12 @@
19
19
  "indentation": "spaces-2",
20
20
  "lineLength": 100
21
21
  },
22
+ "communication": {
23
+ "cavemanMode": {
24
+ "enabled": false,
25
+ "level": "full"
26
+ }
27
+ },
22
28
  "createdDate": "{{DATE}}",
23
29
  "lastUpdated": "{{DATE}}",
24
30
  "automation": {
@@ -46,6 +52,24 @@
46
52
  "git": {
47
53
  "autoCommit": true,
48
54
  "autoPush": true
55
+ },
56
+ "obsidian": {
57
+ "enabled": false,
58
+ "path": "",
59
+ "autoSync": false
60
+ },
61
+ "mcp": {
62
+ "pixel-mcp": {
63
+ "enabled": false
64
+ }
65
+ }
66
+ },
67
+ "modelPolicy": {
68
+ "mode": "auto",
69
+ "defaultTier": "STANDARD",
70
+ "tierOverrides": {
71
+ "*.plist|*.json|*.env": "LIGHT",
72
+ "docs/*": "LIGHT"
49
73
  }
50
74
  }
51
75
  }
@@ -1,166 +1,76 @@
1
- # [Feature Name] Design Document
2
-
3
- ## Overview
4
-
5
- [High-level description of the feature architecture - describe the overall approach, key design decisions, and how it fits into the larger system]
6
-
7
- ## Architecture
8
-
9
- [Description of architectural approach and patterns used]
10
-
11
- ### Component Hierarchy
12
-
13
- ```
14
- [FeatureName]View (Root)
15
- ├── [HeaderComponent] (Navigation and context)
16
- ├── [MainContainer] (Primary content)
17
- │ ├── [ContentSection1]
18
- │ │ ├── [SubComponent1]
19
- │ │ └── [SubComponent2]
20
- │ ├── [ContentSection2]
21
- │ │ └── [SubComponent3]
22
- │ └── [ActionSection]
23
- │ └── [ActionButtons]
24
- ├── [FloatingElements] (Overlays, FABs)
25
- └── [ModalComponents] (Sheets, Dialogs)
26
- ```
27
-
28
- ## Components and Interfaces
29
-
30
- ### [MainComponent]
31
- - **Purpose**: [What this component does and why]
32
- - **Platform-Specific Design**:
33
- - iOS: [Apple HIG considerations, SF Symbols, native patterns]
34
- - Android: [Material Design 3 components, patterns]
35
- - **Key Features**:
36
- - [Feature 1 with implementation detail]
37
- - [Feature 2 with implementation detail]
38
- - [Animations and transitions]
39
-
40
- ### [SubComponent1]
41
- - **Purpose**: [Component purpose]
42
- - **Visual Design**:
43
- - [Layout specifications]
44
- - [Color and typography]
45
- - [Spacing and sizing]
46
- - **Interaction Design**:
47
- - [Touch/click behavior]
48
- - [Hover states (if applicable)]
49
- - [Animation specs]
50
-
51
- ## Data Models
52
-
53
- ### [PrimaryModel]
54
- ```swift
55
- // iOS
56
- struct [ModelName]: Codable, Identifiable {
57
- let id: UUID
58
- let property1: String
59
- let property2: Int
60
- let optionalProperty: String?
61
- let nestedObject: [NestedType]
62
- let createdAt: Date
63
- let updatedAt: Date
64
-
65
- enum CodingKeys: String, CodingKey {
66
- case id
67
- case property1 = "property_1"
68
- // ... mapping for API compatibility
69
- }
70
- }
71
- ```
72
-
73
- ```kotlin
74
- // Android
75
- data class [ModelName](
76
- val id: String,
77
- val property1: String,
78
- val property2: Int,
79
- val optionalProperty: String?,
80
- val nestedObject: List<NestedType>,
81
- val createdAt: Instant,
82
- val updatedAt: Instant
83
- )
1
+ # UI/Visual Design Document — [Tính Năng/Giao Diện]
2
+ > "[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"]"
3
+
4
+ [⚠️ 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.]
5
+
6
+ ## 1. Tổng Quan & Metadata
7
+ * **Phiên bản:** [Ví dụ: 1.0]
8
+ * **Ngày tạo:** [YYYY-MM-DD]
9
+ * **Mục tiêu đồ họa:** [ do thay đổi/Kết quả UI mong muốn]
10
+
11
+ ## 2. Nguyên Tắc Thiết Kế (Design Principles)
12
+ [Danh sách quy tắc bất biến về mặt đồ họa và trải nghiệm người dùng]
13
+ 1. [Nguyên tắc 1: Không overlap chức năng giữa các khu vực].
14
+ 2. [Nguyên tắc 2: Tình trạng hiển thị (Visibility) của các thành phần chính].
15
+ 3. [Nguyên tắc 3: Hệ thống thông báo/Badge thông minh].
16
+ 4. [Nguyên tắc 4: Phân cấp Animation theo tiers (Subtle, Satisfying, v.v.)].
17
+
18
+ ## 3. Đặc Tả Hình Ảnh (Component Specs)
19
+ ### 3.1 Thông số kỹ thuật (Thẩm mỹ & Layout)
20
+ * **Kích thước:** [Ví dụ: Height: 60px + SafeArea].
21
+ * **Màu sắc & Shadow:**
22
+ - Nền/Border: [Mã màu Background, Border cụ thể].
23
+ - Shadow: [Elevation, Offset, Radius].
24
+ * **Trạng thái (States):**
25
+ - Active: [Màu sắc, font weight, opacity].
26
+ - Inactive: [Màu sắc, font weight, opacity].
27
+
28
+ ### 3.2 Danh sách Element
29
+ [Bảng liệt kê các thành phần hiển thị]:
30
+ | # | Tên Item | Mức độ ưu tiên | Icon/Graphic (Màu sắc) | Điều kiện nháy/hiển thị |
31
+ |---|----------|----------------|------------------------|-------------------------|
32
+ | 1 | [Item A] | [Primary] | [Mã Hex / Vector] | [Condition] |
33
+
34
+ ## 4. Chi Tiết Các Màn Hình (Screen Breakdown)
35
+ ### 4.1 Layout: [Tên Màn Hình]
36
+ * **Vai trò hiển thị:** [Dashboard / Modal / Popup]
37
+ * **Cấu trúc đồ họa (Từ trên xuống):**
38
+ - **Header:** [Nút back, Tiêu đề, Badge]
39
+ - **Hero Section:** [Ảnh chụp, Thông điệp to]
40
+ - **Content Grid:** [Spacing dọc ngang, Padding 2 bên]
41
+ - **CTA Button:** [Stick bottom, Shadow layer]
42
+
43
+ ### 4.2 Component Hierarchy (Cấu trúc giao diện)
44
+ [AI: Bắt buộc vẽ sơ đồ Text Tree cho cấu trúc Component React/UI UI-only]
45
+ ```text
46
+ FeatureView (Root)
47
+
48
+ ├── HeaderComponent
49
+ │ └── BackButton
50
+
51
+ ├── ContentSection
52
+ │ ├── ItemCard
53
+ │ └── ProgressBar
54
+
55
+ └── ActionButtons
56
+ └── PrimaryCTA
84
57
  ```
85
58
 
86
- ### [StateModel]
87
- ```swift
88
- // iOS - ViewModel State
89
- enum [Feature]ViewState {
90
- case idle
91
- case loading
92
- case loaded([DataModel])
93
- case error(Error)
94
- case empty
95
- }
96
- ```
97
-
98
- ```kotlin
99
- // Android - UI State
100
- sealed interface [Feature]UiState {
101
- data object Loading : [Feature]UiState
102
- data class Success(val data: List<DataModel>) : [Feature]UiState
103
- data class Error(val message: String) : [Feature]UiState
104
- data object Empty : [Feature]UiState
105
- }
106
- ```
107
-
108
- ## Correctness Properties
109
-
110
- *Properties serve as the bridge between requirements and verifiable correctness guarantees.*
111
-
112
- **Property 1: [Property Name]**
113
- *For any* [scenario/input], the system should [expected behavior across all conditions]
114
- **Validates: Requirements 1.1, 1.2, 1.3**
115
-
116
- **Property 2: [Property Name]**
117
- *For any* [scenario/input], the system should [expected behavior]
118
- **Validates: Requirements 2.1, 2.2**
119
-
120
- **Property 3: Error Handling Correctness**
121
- *For any* error condition, the system should [graceful handling, user feedback, recovery options]
122
- **Validates: Requirements 3.1, 3.2, 3.3**
123
-
124
- ## UI/UX Design Specifications
125
-
126
- ### Visual Design System
127
-
128
- **Colors:**
129
- | Token | Light Mode | Dark Mode | Usage |
130
- |-------|------------|-----------|-------|
131
- | Primary | #[hex] | #[hex] | [usage] |
132
- | Secondary | #[hex] | #[hex] | [usage] |
133
- | Background | #[hex] | #[hex] | [usage] |
134
-
135
- **Typography:**
136
- | Style | Font | Size | Weight | Usage |
137
- |-------|------|------|--------|-------|
138
- | Title | [font] | 24pt | Bold | [usage] |
139
- | Body | [font] | 16pt | Regular | [usage] |
140
-
141
- **Spacing:**
142
- | Token | Value | Usage |
143
- |-------|-------|-------|
144
- | xs | 4pt | [usage] |
145
- | sm | 8pt | [usage] |
146
- | md | 16pt | [usage] |
147
-
148
- ### Animation Specifications
149
-
150
- | Animation | Duration | Easing | Description |
151
- |-----------|----------|--------|-------------|
152
- | Appear | 300ms | easeOut | [description] |
153
- | Disappear | 200ms | easeIn | [description] |
154
- | Spring | 0.5s/0.7 | spring | [response/damping] |
155
-
156
- ## Performance Considerations
59
+ ## 5. Đặc Tả Chuyển Động (Animation & Graphic Logic)
60
+ * **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].
61
+ * **Đặc tả chuyển động (Animation Spec):**
62
+ - **Kiểu:** [Spring / Linear / Bounce].
63
+ - **Thông số:** [Duration: X ms, Damping: Y, Stiffness: Z].
64
+ * **Hiệu ứng Haptic (Rung):** [Gõ phím -> Light Haptic; Thành công -> Success Haptic].
157
65
 
158
- - **Lazy Loading**: [What should be lazy loaded]
159
- - **Caching Strategy**: [How data should be cached]
160
- - **Memory Management**: [Memory considerations]
66
+ ## 6. Đồ Routing (Đứng từ góc độ UI)
67
+ * **Cấu trúc Thư mục Màn Hình:** [app/(tabs)/home.tsx]
68
+ * **Component tái sử dụng:** [ dụ: Dùng chung thẻ UserCard từ design-system sẵn có].
161
69
 
162
- ## Security Considerations
70
+ ## 7. Lộ Trình Triển Khai (Dành riêng cho Frontend/UI)
71
+ * **Giai đoạn 1:** Lên layout tĩnh (CSS + HTML/JSX). Gắn Mock Text.
72
+ * **Giai đoạn 2:** Apply Animations & Haptics.
73
+ * **Giai đoạn 3:** Bọc Component ghép vào Data thật bên ngoài.
163
74
 
164
- - **Data Encryption**: [What needs encryption]
165
- - **Input Validation**: [Validation requirements]
166
- - **Authentication**: [Auth requirements]
75
+ ---
76
+ *Tài liệu Đặc Tả Giao Diện (Visual & Graphic Design Only).*
@@ -1,65 +1,133 @@
1
- # [Feature Name] Requirements Document
2
-
3
- ## Introduction
4
-
5
- [Brief description of the feature and its purpose - 2-3 sentences explaining what problem it solves and why it's important to users]
6
-
7
- ## Glossary
8
-
9
- - **[Term_1]**: [Clear definition of domain-specific term]
10
- - **[Term_2]**: [Clear definition of domain-specific term]
11
- - **[System_Component]**: [Description of system component mentioned in requirements]
12
-
13
- ## Requirements
14
-
15
- ### Requirement 1
16
-
17
- **User Story:** As a [user type], I want to [action/capability], so that [benefit/value].
18
-
19
- #### Acceptance Criteria
20
-
21
- 1. WHEN [triggering condition], THE [System_Component] SHALL [expected behavior]
22
- 2. WHEN [triggering condition], THE [System_Component] SHALL [expected behavior]
23
- 3. WHILE [ongoing context], THE [System_Component] SHALL [maintained behavior]
24
- 4. IF [condition], THE [System_Component] SHALL [conditional behavior]
25
- 5. WHEN [edge case], THE [System_Component] SHALL [edge case handling]
26
-
27
- ### Requirement 2
28
-
29
- **User Story:** As a [user type], I want to [action/capability], so that [benefit/value].
30
-
31
- #### Acceptance Criteria
32
-
33
- 1. WHEN [condition], THE [System_Component] SHALL [behavior]
34
- 2. WHEN [condition], THE [System_Component] SHALL [behavior]
35
- 3. WHILE [context], THE [System_Component] SHALL [behavior]
36
-
37
- ### Requirement 3 (Error Handling)
38
-
39
- **User Story:** As a [user type], I want [error recovery capability], so that [resilience benefit].
40
-
41
- #### Acceptance Criteria
42
-
43
- 1. WHEN [error condition], THE [System_Component] SHALL [error handling]
44
- 2. WHEN [network failure], THE [System_Component] SHALL [offline handling]
45
- 3. WHEN [invalid input], THE [System_Component] SHALL [validation feedback]
46
-
47
- ### Requirement 4 (Security)
48
-
49
- **User Story:** As a [user type], I want [security feature], so that [security benefit].
50
-
51
- #### Acceptance Criteria
52
-
53
- 1. WHEN [sensitive data access], THE [System_Component] SHALL [security measure]
54
- 2. WHEN [authentication required], THE [System_Component] SHALL [auth flow]
55
- 3. WHILE [session active], THE [System_Component] SHALL [session management]
56
-
57
- ### Requirement 5 (Accessibility)
58
-
59
- **User Story:** As a [user with accessibility needs], I want [accessibility feature], so that [inclusive benefit].
60
-
61
- #### Acceptance Criteria
62
-
63
- 1. WHEN [using screen reader], THE [System_Component] SHALL [accessibility support]
64
- 2. WHEN [using keyboard only], THE [System_Component] SHALL [keyboard navigation]
65
- 3. WHILE [displaying content], THE [System_Component] SHALL [contrast/sizing support]
1
+ # Concept Document — [Tên Ứng dụng/Dự án]
2
+ > "[Slogan hoặc câu định vị cốt lõi của dự án]"
3
+
4
+ [⚠️ 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.]
5
+
6
+ ## 1. Tầm nhìn & Lý do tồn tại
7
+ * **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.]
8
+ * **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ả.]
9
+ * **Đối tượng người dùng cốt lõi:**
10
+ - [Nhân khẩu học 1]
11
+ - [Tâm lý/Nhu cầu 1]
12
+ - [Hành vi 1]
13
+
14
+ ## 2. Triết lý cốt lõi
15
+ ### 2.1 Các lớp phân tích / Nền tảng
16
+ [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]
17
+ ```text
18
+ ┌─────────────────────────────────────────────────┐
19
+ │ [LỚP 1] │
20
+ │ [Chi tiết tầng 1] │
21
+ ├─────────────────────────────────────────────────┤
22
+ [LỚP 2]
23
+ [Chi tiết tầng 2]
24
+ └─────────────────────────────────────────────────┘
25
+
26
+ [ĐỘNG CƠ XỬ LÝ CHÍNH]
27
+
28
+ [KẾT QUẢ ĐẦU RA]
29
+ ```
30
+
31
+ ### 2.2 Nguyên tắc thiết kế tính năng
32
+ 1. [Nguyên tắc 1 - Ví dụ: Cá nhân hóa tuyệt đối]
33
+ 2. [Nguyên tắc 2 - Ví dụ: Hành động được/Actionable]
34
+ 3. [Nguyên tắc 3 - Ví dụ: Gamification nhẹ]
35
+ 4. [Nguyên tắc 4]
36
+ 5. [Nguyên tắc 5]
37
+
38
+ ## 3. Kiến trúc ứng dụng
39
+ ### 3.1 Stack kỹ thuật
40
+ | Layer | Công nghệ |
41
+ |-------|-----------|
42
+ | Mobile/Web | [Ví dụ: React Native + Expo] |
43
+ | Frontend State | [ dụ: Zustand] |
44
+ | Core Backend | [ dụ: Node.js / Firebase] |
45
+ | Database | [ dụ: Firestore / SQLite] |
46
+ | AI / 3rd Party | [Ví dụ: Gemini API / MediaPipe] |
47
+
48
+ ### 3.2 Cấu trúc màn hình (Routing Tree)
49
+ [AI: BẮT BUỘC vẽ đồ cây thư mục/router cho các màn hình app]
50
+ ```text
51
+ app/
52
+ ├── onboarding/
53
+ │ ├── step-1
54
+ │ └── step-n
55
+ ├── (tabs)/
56
+ │ ├── tab-1 # Vai trò
57
+ │ └── tab-2 # Vai trò
58
+ └── screens/
59
+ ├── screen-1
60
+ └── screen-n
61
+ ```
62
+
63
+ ## 4. Luồng xử cốt lõi (Core Pipeline)
64
+ [AI: BẮT BUỘC vẽ đồ ASCII Flow thể hiện luồng nghiệp vụ từ Action của user đến Dữ liệu đổ ra.]
65
+ ```text
66
+ [User Input]
67
+ [Hành động]
68
+
69
+
70
+ [Phase 1 — Xử lý A]
71
+ [Logic hàm/Function logic]
72
+
73
+
74
+ [Phase 2 — Xử lý B]
75
+ [Logic tổng hợp] -> Output
76
+ ```
77
+
78
+ ## 5. Onboarding — Mindset & Thiết kế
79
+ ### 5.1 Triết lý onboarding
80
+ [Giá trị cốt lõi muốn truyền tải trước khi user đăng ký là gì?]
81
+ ### 5.2 Cấu trúc các slide
82
+ - **Slide 0 (Hook):** [Mô tả chi tiết ảnh, text, animation lôi kéo]
83
+ - **Slide 1 (Value 1):** [Chức năng 1]
84
+ - **Slide 2 (Personalization):** ...
85
+ - **Slide 3 (CTA):** ...
86
+ ### 5.3 Design patterns đặc thù
87
+ - [Ví dụ: Count-up animation cho điểm số, Stagger card entry]
88
+
89
+ ## 6. Gợi ý tính năng — Mindset xây dựng
90
+ Mỗi tính năng đều phải đáp ứng cấu trúc [Input -> Core Logic -> Actionable Suggestion -> "Why" Explanation].
91
+ [Đư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.]
92
+ - ❌ **Sai:** [Câu chung chung]
93
+ - ✅ **Đúng:** [Câu cá nhân hóa sâu theo db/mệnh/sở thích]
94
+
95
+ ## 7. Design System
96
+ ### 7.1 Palette màu
97
+ | Vai trò | Hex Code | Tên màu |
98
+ |---------|----------|----------|
99
+ | Primary | #Hex | [Tên] |
100
+ | Text/Sub| #Hex | [Tên] |
101
+
102
+ ### 7.2 Animation & Icon Convention
103
+ - [Quy tắc animation (Fade, Spring, Duration)]
104
+ - [Quy tắc icon (PNG thực tế hay SVG tint)]
105
+
106
+ ## 8. Vòng lặp tăng trưởng (Engagement Loop)
107
+ [AI: Vẽ ASCII text flow mô tả vòng lặp giữ chân user]
108
+ ```text
109
+ [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]
110
+ ```
111
+ | Trigger quay lại | Tần suất |
112
+ |-------------------|----------|
113
+ | [Sự kiện/Push] | [Bao lâu]|
114
+
115
+ ## 9. Mô hình kinh doanh (Monetization)
116
+ [AI: Vẽ sơ đồ cây cho Free Tier và Premium Tier]
117
+
118
+ ## 10. Nguyên tắc kỹ thuật
119
+ * **Performance:** [Luật xử lý client side vs server side]
120
+ * **Data Flow:** [Service A -> Service B]
121
+ * **Error Handling:** [Mindset khi API lỗi, rớt mạng, thiếu data]
122
+
123
+ ## 11. Roadmap tính năng
124
+ * **Phase 1 — Nền tảng (MVP):** ...
125
+ * **Phase 2 — Chiều sâu (Depth):** ...
126
+ * **Phase 3 — Tăng trưởng (Growth):** ...
127
+
128
+ ## 12. Điều Không Được Làm (Anti-patterns)
129
+ 1. [Luật 1 - Ví dụ: Không để UI lạnh lẽo công nghệ]
130
+ 2. [Luật 2 - Ví dụ: Không lưu data raw người dùng lên server]
131
+ 3. [Luật 3]
132
+ 4. [Luật 4]
133
+ 5. [Luật 5]