ai-spector 0.1.1
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.
- package/README.md +169 -0
- package/_templates/basic_design/db-design-template.md +177 -0
- package/_templates/basic_design/detail-api-template.md +278 -0
- package/_templates/basic_design/detail-screen-template.md +281 -0
- package/_templates/basic_design/list-api-template.md +130 -0
- package/_templates/basic_design/list-screen-template.md +242 -0
- package/_templates/detail_design/common/architecture-overview-template.md +302 -0
- package/_templates/detail_design/common/deployment-infrastructure-template.md +461 -0
- package/_templates/detail_design/common/error-handling-patterns-template.md +460 -0
- package/_templates/detail_design/common/integration-patterns-template.md +410 -0
- package/_templates/detail_design/common/performance-standards-template.md +406 -0
- package/_templates/detail_design/common/security-patterns-template.md +395 -0
- package/_templates/detail_design/feature-detail-design-template.md +773 -0
- package/_templates/detail_design/feature-list-template.md +39 -0
- package/_templates/srs/1-introduction.md +58 -0
- package/_templates/srs/2-overall-description.md +91 -0
- package/_templates/srs/3-use-case-detail-template.md +142 -0
- package/_templates/srs/3-use-cases.md +53 -0
- package/_templates/srs/4-system-feature-detail-template.md +131 -0
- package/_templates/srs/4-system-features-list-template.md +39 -0
- package/_templates/srs/5-data-requirements.md +59 -0
- package/_templates/srs/6-external-interfaces.md +56 -0
- package/_templates/srs/7-quality-attributes.md +74 -0
- package/_templates/srs/8-internationalization.md +36 -0
- package/_templates/srs/9-other-requirements.md +46 -0
- package/assets/cursor/commands/analyze.md +39 -0
- package/assets/cursor/commands/generate-detail-design.md +35 -0
- package/assets/cursor/commands/generate-srs.md +38 -0
- package/assets/cursor/skills/spec-writer/SKILL.md +33 -0
- package/assets/workflow/config/analyze.graphify.json +36 -0
- package/assets/workflow/config/completeness-rules.detail-design.json +57 -0
- package/assets/workflow/config/completeness-rules.srs.json +72 -0
- package/assets/workflow/config/dag.detail-design.json +64 -0
- package/assets/workflow/config/dag.srs.json +87 -0
- package/assets/workflow/state/state.template.json +26 -0
- package/assets/workflow/templates/basic_design/db-design-template.md +177 -0
- package/assets/workflow/templates/basic_design/detail-api-template.md +278 -0
- package/assets/workflow/templates/basic_design/detail-screen-template.md +281 -0
- package/assets/workflow/templates/basic_design/list-api-template.md +130 -0
- package/assets/workflow/templates/basic_design/list-screen-template.md +242 -0
- package/assets/workflow/templates/detail_design/common/architecture-overview-template.md +302 -0
- package/assets/workflow/templates/detail_design/common/deployment-infrastructure-template.md +461 -0
- package/assets/workflow/templates/detail_design/common/error-handling-patterns-template.md +460 -0
- package/assets/workflow/templates/detail_design/common/integration-patterns-template.md +410 -0
- package/assets/workflow/templates/detail_design/common/performance-standards-template.md +406 -0
- package/assets/workflow/templates/detail_design/common/security-patterns-template.md +395 -0
- package/assets/workflow/templates/detail_design/feature-detail-design-template.md +773 -0
- package/assets/workflow/templates/detail_design/feature-list-template.md +39 -0
- package/assets/workflow/templates/srs/1-introduction.md +58 -0
- package/assets/workflow/templates/srs/2-overall-description.md +91 -0
- package/assets/workflow/templates/srs/3-use-case-detail-template.md +142 -0
- package/assets/workflow/templates/srs/3-use-cases.md +53 -0
- package/assets/workflow/templates/srs/4-system-feature-detail-template.md +131 -0
- package/assets/workflow/templates/srs/4-system-features-list-template.md +39 -0
- package/assets/workflow/templates/srs/5-data-requirements.md +59 -0
- package/assets/workflow/templates/srs/6-external-interfaces.md +56 -0
- package/assets/workflow/templates/srs/7-quality-attributes.md +74 -0
- package/assets/workflow/templates/srs/8-internationalization.md +36 -0
- package/assets/workflow/templates/srs/9-other-requirements.md +46 -0
- package/bin/spec-writer.js +56 -0
- package/package.json +25 -0
- package/src/cli/helpers/fs.js +50 -0
- package/src/cli/init.js +178 -0
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
# Screen Detail:
|
|
2
|
+
|
|
3
|
+
> This document provides detailed layout, component, and interaction specifications for each screen. For the screen map and design system, see the Screen Map (List Screen) document. Use one section per screen; duplicate the structure below for each screen in the Screen Index.
|
|
4
|
+
|
|
5
|
+
**Source Requirements:** SRS Section 6.1 (User Interfaces)
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 1. Screen:
|
|
10
|
+
|
|
11
|
+
**Purpose:**
|
|
12
|
+
|
|
13
|
+
> Describe the purpose of this screen and what users can accomplish.
|
|
14
|
+
|
|
15
|
+
**User Role:**
|
|
16
|
+
|
|
17
|
+
**Source Requirements:** SRS Section <X.X> -
|
|
18
|
+
|
|
19
|
+
### 1.1 Visual Wireframe
|
|
20
|
+
|
|
21
|
+
> Use ASCII art or grid-based layout to show the visual structure. You can also reference an image file or Figma link.
|
|
22
|
+
|
|
23
|
+
**Option 1: ASCII Wireframe**
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
┌─────────────────────────────────────────────────────────┐
|
|
27
|
+
│ [Logo] [User Menu] [Notifications] │ ← Header (60px)
|
|
28
|
+
├──────────┬───────────────────────────────────────────────┤
|
|
29
|
+
│ │ │
|
|
30
|
+
│ Nav │ Main Content Area │
|
|
31
|
+
│ Menu │ ┌─────────────────┐ │
|
|
32
|
+
│ │ │ Card/Component │ │
|
|
33
|
+
│ Item 1 │ │ │ │
|
|
34
|
+
│ Item 2 │ └─────────────────┘ │
|
|
35
|
+
│ Item 3 │ ┌─────────────────┐ │
|
|
36
|
+
│ │ │ Card/Component │ │
|
|
37
|
+
│ │ │ │ │
|
|
38
|
+
│ │ └─────────────────┘ │
|
|
39
|
+
│ │ │
|
|
40
|
+
├──────────┴───────────────────────────────────────────────┤
|
|
41
|
+
│ Footer Content │ ← Footer (40px)
|
|
42
|
+
└─────────────────────────────────────────────────────────┘
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
**Option 2: Grid Layout Description**
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
┌─────────────────────────────────────────────────────────┐
|
|
49
|
+
│ HEADER (100% width, 60px height) │
|
|
50
|
+
│ [Logo: 200px] [Spacer] [User Menu: 150px] [Notif: 50px] │
|
|
51
|
+
├─────────────────────────────────────────────────────────┤
|
|
52
|
+
│ SIDEBAR │ MAIN CONTENT (flex: 1) │
|
|
53
|
+
│ (250px) │ ┌───────────────────────────────────────────┐ │
|
|
54
|
+
│ │ │ STATS CARDS (3 columns, equal width) │ │
|
|
55
|
+
│ Nav │ │ [Card 1] [Card 2] [Card 3] │ │
|
|
56
|
+
│ Menu │ └───────────────────────────────────────────┘ │
|
|
57
|
+
│ │ ┌───────────────────────────────────────────┐ │
|
|
58
|
+
│ Item 1 │ │ TABLE/LIST (full width) │ │
|
|
59
|
+
│ Item 2 │ │ [Row 1] [Row 2] [Row 3] │ │
|
|
60
|
+
│ │ └───────────────────────────────────────────┘ │
|
|
61
|
+
└─────────┴───────────────────────────────────────────────┘
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
**Option 3: Image Reference**
|
|
65
|
+
|
|
66
|
+
> **Wireframe Image:** `[screens/screen-name-wireframe.png]` or `[Figma Link]`
|
|
67
|
+
>
|
|
68
|
+
> **High-Fidelity Mockup:** `[screens/screen-name-mockup.png]` or `[Figma Link]`
|
|
69
|
+
|
|
70
|
+
### 1.2 Layout Structure
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
| Component | Position | Width/Height | Description |
|
|
74
|
+
| ---------------- | --------------- | ------------ | ----------- |
|
|
75
|
+
| **Header** | Top | 100% × 60px | |
|
|
76
|
+
| **Navigation** | <Left/Side/Top> | 250px × auto | |
|
|
77
|
+
| **Main Content** | Center | flex: 1 | |
|
|
78
|
+
| **Sidebar** | <Right/Left> | 300px × auto | |
|
|
79
|
+
| **Footer** | Bottom | 100% × 40px | |
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
### 1.3 Component Details
|
|
83
|
+
|
|
84
|
+
**Header:**
|
|
85
|
+
|
|
86
|
+
- Logo:
|
|
87
|
+
- User menu:
|
|
88
|
+
- Notifications:
|
|
89
|
+
|
|
90
|
+
**Main Content Area:**
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
| Component | Description | Visual Style |
|
|
94
|
+
| ------------------ | ----------- | ------------ |
|
|
95
|
+
| **Component Name** | Description | Style notes |
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
**Key Components:**
|
|
99
|
+
|
|
100
|
+
**Component Name:**
|
|
101
|
+
|
|
102
|
+
- **Purpose:** What it does
|
|
103
|
+
- **Visual Representation:**
|
|
104
|
+
```
|
|
105
|
+
┌─────────────────────────────┐
|
|
106
|
+
│ [Icon] Title Text │
|
|
107
|
+
│ ─────────────────────────── │
|
|
108
|
+
│ Content area │
|
|
109
|
+
│ [Button] [Button] │
|
|
110
|
+
└─────────────────────────────┘
|
|
111
|
+
```
|
|
112
|
+
- **Elements:**
|
|
113
|
+
- <Element 1>: (Position: <top/left/right>, Size: )
|
|
114
|
+
- <Element 2>: (Position: <top/left/right>, Size: )
|
|
115
|
+
- **Visual Style:**
|
|
116
|
+
- Background:
|
|
117
|
+
- Border: <1px solid color>
|
|
118
|
+
- Padding: <16px>
|
|
119
|
+
- Margin: <8px>
|
|
120
|
+
- Border radius: <4px>
|
|
121
|
+
- **Dimensions:** <Width × Height>
|
|
122
|
+
- **Interaction:**
|
|
123
|
+
|
|
124
|
+
### 1.4 User Interactions
|
|
125
|
+
|
|
126
|
+
**Primary Actions:**
|
|
127
|
+
|
|
128
|
+
- <Action 1>:
|
|
129
|
+
- <Action 2>:
|
|
130
|
+
|
|
131
|
+
**Navigation Flow:**
|
|
132
|
+
|
|
133
|
+
- From this screen, users can navigate to:
|
|
134
|
+
- <Screen/Page>:
|
|
135
|
+
- <Screen/Page>:
|
|
136
|
+
|
|
137
|
+
**Form Layout (if applicable):**
|
|
138
|
+
|
|
139
|
+
```
|
|
140
|
+
┌─────────────────────────────────────┐
|
|
141
|
+
│ Form Title │
|
|
142
|
+
│ ─────────────────────────────────── │
|
|
143
|
+
│ [Label] │
|
|
144
|
+
│ ┌─────────────────────────────────┐ │
|
|
145
|
+
│ │ Input Field │ │
|
|
146
|
+
│ └─────────────────────────────────┘ │
|
|
147
|
+
│ [Label] │
|
|
148
|
+
│ ┌─────────────────────────────────┐ │
|
|
149
|
+
│ │ Dropdown/Select │ │
|
|
150
|
+
│ └─────────────────────────────────┘ │
|
|
151
|
+
│ │
|
|
152
|
+
│ [Cancel] [Submit Button] │
|
|
153
|
+
└─────────────────────────────────────┘
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
**Form Interactions:**
|
|
157
|
+
|
|
158
|
+
- :
|
|
159
|
+
- :
|
|
160
|
+
|
|
161
|
+
### 1.5 Field Validation and Default Data
|
|
162
|
+
|
|
163
|
+
> This section documents validation rules and default values for all input fields on this screen.
|
|
164
|
+
>
|
|
165
|
+
> **Note:** If this screen has no input fields or forms, this section can be omitted or marked as "N/A - No input fields on this screen."
|
|
166
|
+
|
|
167
|
+
**Field Validation and Default Data:**
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
| Field Name | Field Type | Required | Default Value | Default Source | Validation Rules | Error Messages | Notes |
|
|
171
|
+
| ---------- | --------------------------------- | -------- | -------------------------- | --------------------------------------- | ---------------- | -------------- | ----- |
|
|
172
|
+
| | <Text/Email/Number/Date/Dropdown> | <Yes/No> | <Default value or "Empty"> | <Auto-generated/System/User preference> | | | |
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
**Detailed Field Information:**
|
|
176
|
+
|
|
177
|
+
**:**
|
|
178
|
+
|
|
179
|
+
- **Type:**
|
|
180
|
+
- **Required:** <Yes/No>
|
|
181
|
+
- **Default Value:** <Value or "Empty">
|
|
182
|
+
- **Default Source:**
|
|
183
|
+
- **Min Length:** characters
|
|
184
|
+
- **Max Length:** characters
|
|
185
|
+
- **Pattern/Format:**
|
|
186
|
+
- **Custom Validation:**
|
|
187
|
+
- **Error Messages:**
|
|
188
|
+
- Required: ""
|
|
189
|
+
- Format: ""
|
|
190
|
+
- Custom: ""
|
|
191
|
+
- **Real-time Validation:** <Yes/No - validates on blur/on change>
|
|
192
|
+
- **Dependencies:**
|
|
193
|
+
- **Notes:**
|
|
194
|
+
|
|
195
|
+
**(Dropdown):**
|
|
196
|
+
|
|
197
|
+
- **Type:** Dropdown/Select
|
|
198
|
+
- **Required:** <Yes/No>
|
|
199
|
+
- **Default Value:**
|
|
200
|
+
- **Default Source:** <System/First option/User preference>
|
|
201
|
+
- **Options Source:** <Static list/Dynamic from API/User selection>
|
|
202
|
+
- **Options:**
|
|
203
|
+
- : -
|
|
204
|
+
- : -
|
|
205
|
+
- **Dependencies:**
|
|
206
|
+
- **Validation Rules:**
|
|
207
|
+
- **Error Messages:**
|
|
208
|
+
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
## 2. Screen:
|
|
212
|
+
|
|
213
|
+
**Purpose:**
|
|
214
|
+
|
|
215
|
+
> Describe the purpose of this screen.
|
|
216
|
+
|
|
217
|
+
**User Role:**
|
|
218
|
+
|
|
219
|
+
**Source Requirements:** SRS Section <X.X>
|
|
220
|
+
|
|
221
|
+
### 2.1 Visual Wireframe
|
|
222
|
+
|
|
223
|
+
```
|
|
224
|
+
┌─────────────────────────────────────────────────────────┐
|
|
225
|
+
│ [Screen Layout - Use ASCII art or reference image] │
|
|
226
|
+
└─────────────────────────────────────────────────────────┘
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
**Wireframe Image:** `[screens/screen-name-wireframe.png]` or `[Figma Link]`
|
|
230
|
+
|
|
231
|
+
### 2.2 Layout Structure
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
| Component | Position | Width/Height | Description |
|
|
235
|
+
| --------- | -------- | ------------ | ----------- |
|
|
236
|
+
| | | | |
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
### 2.3 Component Details
|
|
240
|
+
|
|
241
|
+
**:**
|
|
242
|
+
|
|
243
|
+
- **Purpose:**
|
|
244
|
+
- **Visual Representation:**
|
|
245
|
+
```
|
|
246
|
+
┌─────────────────────────────┐
|
|
247
|
+
│ Component Layout │
|
|
248
|
+
└─────────────────────────────┘
|
|
249
|
+
```
|
|
250
|
+
- **Elements:**
|
|
251
|
+
- <Element 1>
|
|
252
|
+
- <Element 2>
|
|
253
|
+
- **Visual Style:**
|
|
254
|
+
- **Dimensions:** <Width × Height>
|
|
255
|
+
- **Interaction:**
|
|
256
|
+
|
|
257
|
+
### 2.4 User Interactions
|
|
258
|
+
|
|
259
|
+
**Primary Actions:**
|
|
260
|
+
|
|
261
|
+
- <Action 1>
|
|
262
|
+
- <Action 2>
|
|
263
|
+
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
## 3. Screen:
|
|
267
|
+
|
|
268
|
+
**Purpose:**
|
|
269
|
+
|
|
270
|
+
> Describe the purpose of this screen.
|
|
271
|
+
|
|
272
|
+
**User Role:**
|
|
273
|
+
|
|
274
|
+
### 3.1 Visual Wireframe
|
|
275
|
+
|
|
276
|
+
### 3.2 Layout Structure
|
|
277
|
+
|
|
278
|
+
---
|
|
279
|
+
|
|
280
|
+
> Repeat the same section structure (Screen name → Wireframe → Layout → Component Details → User Interactions → Field Validation if applicable) for each additional screen in the Screen Index.
|
|
281
|
+
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# API List:
|
|
2
|
+
|
|
3
|
+
> This document provides the API overview, authentication, and a summary list of all endpoints. For detailed request/response specifications per endpoint, see the Detail API document.
|
|
4
|
+
|
|
5
|
+
**Source Requirements:** SRS Section 4 (System Features), Section 6.2 (Software Interfaces)
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 1. API Overview
|
|
10
|
+
|
|
11
|
+
**Base URL:** `<https://api.example.com/v1>`
|
|
12
|
+
|
|
13
|
+
**API Version:** `v1.0`
|
|
14
|
+
|
|
15
|
+
**Protocol:** `HTTPS`
|
|
16
|
+
|
|
17
|
+
**Authentication:** <JWT/OAuth2/API Key>
|
|
18
|
+
|
|
19
|
+
**Content Type:** `application/json`
|
|
20
|
+
|
|
21
|
+
**Source Requirements:**
|
|
22
|
+
|
|
23
|
+
- SRS Section 4:
|
|
24
|
+
- SRS Section 6.2:
|
|
25
|
+
- SRS Section 7.3:
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## 2. Authentication
|
|
30
|
+
|
|
31
|
+
**Method:** <JWT Bearer Token / OAuth2 / API Key>
|
|
32
|
+
|
|
33
|
+
**How to Authenticate:**
|
|
34
|
+
|
|
35
|
+
> Describe the authentication flow.
|
|
36
|
+
|
|
37
|
+
**Token Format:**
|
|
38
|
+
|
|
39
|
+
> Describe token structure if applicable.
|
|
40
|
+
|
|
41
|
+
**Example:**
|
|
42
|
+
|
|
43
|
+
```http
|
|
44
|
+
Authorization: Bearer <token>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
**Token Expiration:**
|
|
48
|
+
|
|
49
|
+
> Describe token expiration and refresh mechanism.
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## 3. Endpoint Summary
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
| Method | Endpoint | Description | Authentication |
|
|
57
|
+
| -------- | ---------------- | ----------- | -------------- |
|
|
58
|
+
| `POST` | `/resource` | | Required |
|
|
59
|
+
| `GET` | `/resource` | | Required |
|
|
60
|
+
| `GET` | `/resource/{id}` | | Required |
|
|
61
|
+
| `PUT` | `/resource/{id}` | | Required |
|
|
62
|
+
| `DELETE` | `/resource/{id}` | | Required |
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
> Add one row per endpoint. For detailed specifications (request/response schemas, path/query params), see the Detail API document.
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## 4. Pagination
|
|
70
|
+
|
|
71
|
+
**Query Parameters:**
|
|
72
|
+
|
|
73
|
+
- `page`: Page number (default: 1)
|
|
74
|
+
- `per_page`: Items per page (default: 20, max: 100)
|
|
75
|
+
|
|
76
|
+
**Response Format:**
|
|
77
|
+
|
|
78
|
+
```json
|
|
79
|
+
{
|
|
80
|
+
"data": [...],
|
|
81
|
+
"pagination": {
|
|
82
|
+
"page": 1,
|
|
83
|
+
"per_page": 20,
|
|
84
|
+
"total": 100,
|
|
85
|
+
"total_pages": 5
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## 5. Filtering and Sorting
|
|
93
|
+
|
|
94
|
+
**Query Parameters:**
|
|
95
|
+
|
|
96
|
+
- `filter[field]`: Filter by field value
|
|
97
|
+
- `sort`: Sort field and direction (e.g., `created_at:desc`)
|
|
98
|
+
|
|
99
|
+
**Examples:**
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
GET /resource?filter[status]=active&sort=created_at:desc
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
## 6. OpenAPI / Specification Reference
|
|
108
|
+
|
|
109
|
+
> Reference or include link to OpenAPI/Swagger specification file.
|
|
110
|
+
|
|
111
|
+
**Location:** `<api-spec.yaml>`
|
|
112
|
+
|
|
113
|
+
**Note:** For detailed endpoint specifications, see the Detail API document.
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## 7. Notes
|
|
118
|
+
|
|
119
|
+
**API Versioning Strategy:**
|
|
120
|
+
|
|
121
|
+
> Describe versioning approach.
|
|
122
|
+
|
|
123
|
+
**Deprecation Policy:**
|
|
124
|
+
|
|
125
|
+
> Describe how deprecated endpoints are handled.
|
|
126
|
+
|
|
127
|
+
**Testing:**
|
|
128
|
+
|
|
129
|
+
> Reference API testing documentation or Postman collection.
|
|
130
|
+
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
# Screen Map: <Project Name>
|
|
2
|
+
|
|
3
|
+
> This document provides the design system overview, screen map (navigation flow), screen index, and common UI building blocks. For detailed layout and interactions per screen, see the Detail Screen document for each screen.
|
|
4
|
+
|
|
5
|
+
**Source Requirements:** SRS Section 6.1 (User Interfaces)
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 1. Design System Overview
|
|
10
|
+
|
|
11
|
+
**Color Palette:**
|
|
12
|
+
- Primary: <Color>
|
|
13
|
+
- Secondary: <Color>
|
|
14
|
+
- Accent: <Color>
|
|
15
|
+
- Background: <Color>
|
|
16
|
+
- Text: <Color>
|
|
17
|
+
|
|
18
|
+
**Typography:**
|
|
19
|
+
- Headings: <Font family, sizes>
|
|
20
|
+
- Body: <Font family, sizes>
|
|
21
|
+
- Buttons: <Font family, sizes>
|
|
22
|
+
|
|
23
|
+
**Spacing:**
|
|
24
|
+
- Base unit: <8px/4px>
|
|
25
|
+
- Component spacing: <Guidelines>
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## 2. Screen Map (Navigation Flow)
|
|
30
|
+
|
|
31
|
+
> This diagram shows the relationships and navigation flow between all screens in the application.
|
|
32
|
+
|
|
33
|
+
**Mermaid Flowchart:**
|
|
34
|
+
```mermaid
|
|
35
|
+
flowchart TD
|
|
36
|
+
A[Login] --> B[Dashboard]
|
|
37
|
+
B --> C[Screen 1]
|
|
38
|
+
B --> D[Screen 2]
|
|
39
|
+
B --> E[Screen 3]
|
|
40
|
+
B --> F[Screen 4]
|
|
41
|
+
C --> G[Screen 5]
|
|
42
|
+
D --> G
|
|
43
|
+
E --> G
|
|
44
|
+
F --> G
|
|
45
|
+
G --> B
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
**Detailed Navigation Map:**
|
|
49
|
+
```
|
|
50
|
+
┌─────────────────────────────────────────────────────────────────┐
|
|
51
|
+
│ Screen Relationship Map │
|
|
52
|
+
└─────────────────────────────────────────────────────────────────┘
|
|
53
|
+
|
|
54
|
+
Entry Point: Login Screen
|
|
55
|
+
│
|
|
56
|
+
├─→ Dashboard (Main Hub)
|
|
57
|
+
│ │
|
|
58
|
+
│ ├─→ Screen 1 (via Navigation Menu)
|
|
59
|
+
│ │ ├─→ Screen 1A (via Action Button)
|
|
60
|
+
│ │ └─→ Screen 1B (via Action Button)
|
|
61
|
+
│ │
|
|
62
|
+
│ ├─→ Screen 2 (via Navigation Menu)
|
|
63
|
+
│ │ └─→ Screen 2A (via Modal/Detail View)
|
|
64
|
+
│ │
|
|
65
|
+
│ ├─→ Screen 3 (via Navigation Menu)
|
|
66
|
+
│ │
|
|
67
|
+
│ └─→ Screen 4 (via Navigation Menu)
|
|
68
|
+
│ └─→ Screen 4A (via Action Button)
|
|
69
|
+
│
|
|
70
|
+
└─→ [Other Entry Points]
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
**Navigation Patterns:**
|
|
74
|
+
- **Primary Navigation:** <Menu type - Sidebar/Top Nav/Bottom Nav>
|
|
75
|
+
- **Secondary Navigation:** <Breadcrumbs/Back buttons>
|
|
76
|
+
- **Modal/Overlay Screens:** <List screens that appear as modals>
|
|
77
|
+
- **Deep Links:** <Screens accessible via direct URL>
|
|
78
|
+
|
|
79
|
+
**User Role-Based Navigation:**
|
|
80
|
+
- **<Role 1>:** <List accessible screens>
|
|
81
|
+
- **<Role 2>:** <List accessible screens>
|
|
82
|
+
- **<Role 3>:** <List accessible screens>
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## 3. Quick Reference: Common UI Elements
|
|
87
|
+
|
|
88
|
+
> Use these ASCII patterns as building blocks when describing components in detail screens.
|
|
89
|
+
|
|
90
|
+
**Card Component:**
|
|
91
|
+
```
|
|
92
|
+
┌─────────────────────────────┐
|
|
93
|
+
│ [Icon] Title │
|
|
94
|
+
│ ─────────────────────────── │
|
|
95
|
+
│ Content text here │
|
|
96
|
+
│ [Action Button] │
|
|
97
|
+
└─────────────────────────────┘
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
**Button:**
|
|
101
|
+
```
|
|
102
|
+
┌──────────────┐
|
|
103
|
+
│ Button Text │
|
|
104
|
+
└──────────────┘
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
**Input Field:**
|
|
108
|
+
```
|
|
109
|
+
┌──────────────────────────────┐
|
|
110
|
+
│ Label │
|
|
111
|
+
│ ┌──────────────────────────┐ │
|
|
112
|
+
│ │ Input text here │ │
|
|
113
|
+
│ └──────────────────────────┘ │
|
|
114
|
+
└──────────────────────────────┘
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
**Table/List:**
|
|
118
|
+
```
|
|
119
|
+
┌──────┬──────────┬──────────┐
|
|
120
|
+
│ Col1 │ Col2 │ Col3 │
|
|
121
|
+
├──────┼──────────┼──────────┤
|
|
122
|
+
│ Data │ Data │ Data │
|
|
123
|
+
│ Data │ Data │ Data │
|
|
124
|
+
└──────┴──────────┴──────────┘
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
**Modal/Dialog:**
|
|
128
|
+
```
|
|
129
|
+
┌─────────────────────┐
|
|
130
|
+
│ [X] Modal Title │
|
|
131
|
+
├─────────────────────┤
|
|
132
|
+
│ │
|
|
133
|
+
│ Modal Content │
|
|
134
|
+
│ │
|
|
135
|
+
│ [Cancel] [OK] │
|
|
136
|
+
└─────────────────────┘
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
---
|
|
140
|
+
|
|
141
|
+
## 4. Screen Index
|
|
142
|
+
|
|
143
|
+
| Screen | Section (Detail Screen) | User Role | Purpose |
|
|
144
|
+
|--------|-------------------------|-----------|---------|
|
|
145
|
+
| <Screen 1> | 5 | <Role> | <Purpose> |
|
|
146
|
+
| <Screen 2> | 6 | <Role> | <Purpose> |
|
|
147
|
+
| <Screen 3> | 7 | <Role> | <Purpose> |
|
|
148
|
+
|
|
149
|
+
> Each screen has a corresponding section in the Detail Screen document with wireframe, layout, and interactions.
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## 5. Responsive Design Considerations
|
|
154
|
+
|
|
155
|
+
**Breakpoints:**
|
|
156
|
+
- Mobile: <Width>
|
|
157
|
+
- Tablet: <Width>
|
|
158
|
+
- Desktop: <Width>
|
|
159
|
+
|
|
160
|
+
**Mobile Adaptations:**
|
|
161
|
+
- <Adaptation 1>
|
|
162
|
+
- <Adaptation 2>
|
|
163
|
+
|
|
164
|
+
**Tablet Adaptations:**
|
|
165
|
+
- <Adaptation 1>
|
|
166
|
+
- <Adaptation 2>
|
|
167
|
+
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
## 6. Common UI Patterns
|
|
171
|
+
|
|
172
|
+
**Buttons:**
|
|
173
|
+
- Primary: <Style>
|
|
174
|
+
- Secondary: <Style>
|
|
175
|
+
- Danger: <Style>
|
|
176
|
+
|
|
177
|
+
**Forms:**
|
|
178
|
+
- Input fields: <Style>
|
|
179
|
+
- Validation messages: <Style>
|
|
180
|
+
- Submit buttons: <Style>
|
|
181
|
+
|
|
182
|
+
**Tables/Lists:**
|
|
183
|
+
- Row style: <Style>
|
|
184
|
+
- Hover state: <Style>
|
|
185
|
+
- Selection: <Style>
|
|
186
|
+
|
|
187
|
+
**Modals/Dialogs:**
|
|
188
|
+
- Size: <Dimensions>
|
|
189
|
+
- Overlay: <Style>
|
|
190
|
+
- Close button: <Position>
|
|
191
|
+
|
|
192
|
+
---
|
|
193
|
+
|
|
194
|
+
## 7. Accessibility Considerations
|
|
195
|
+
|
|
196
|
+
**Keyboard Navigation:**
|
|
197
|
+
- <Requirement 1>
|
|
198
|
+
- <Requirement 2>
|
|
199
|
+
|
|
200
|
+
**Screen Reader Support:**
|
|
201
|
+
- <Requirement 1>
|
|
202
|
+
- <Requirement 2>
|
|
203
|
+
|
|
204
|
+
**Color Contrast:**
|
|
205
|
+
- <Requirement>
|
|
206
|
+
|
|
207
|
+
---
|
|
208
|
+
|
|
209
|
+
## 8. Visual Resources
|
|
210
|
+
|
|
211
|
+
**Design Tools:**
|
|
212
|
+
> Reference tools used (Figma, Axure, Uizard, etc.)
|
|
213
|
+
|
|
214
|
+
**Wireframe Files:**
|
|
215
|
+
- Low-fidelity: `<path/to/wireframe.png>` or `<Figma Link>`
|
|
216
|
+
- High-fidelity: `<path/to/mockup.png>` or `<Figma Link>`
|
|
217
|
+
|
|
218
|
+
**Prototype Links:**
|
|
219
|
+
> Add links to interactive prototypes when available.
|
|
220
|
+
- Interactive prototype: `<Figma/InVision/Other Link>`
|
|
221
|
+
|
|
222
|
+
**Image Placeholders:**
|
|
223
|
+
> For markdown documents, you can reference images:
|
|
224
|
+
```markdown
|
|
225
|
+

|
|
226
|
+

|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
---
|
|
230
|
+
|
|
231
|
+
## 9. Notes
|
|
232
|
+
|
|
233
|
+
**Visual Guidelines:**
|
|
234
|
+
> Tips for creating better visual mockups:
|
|
235
|
+
- Use consistent spacing (8px grid system)
|
|
236
|
+
- Show actual content examples, not just "Lorem ipsum"
|
|
237
|
+
- Include error states and empty states
|
|
238
|
+
- Show hover/active states for interactive elements
|
|
239
|
+
|
|
240
|
+
**Future Enhancements:**
|
|
241
|
+
- <Enhancement 1>
|
|
242
|
+
- <Enhancement 2>
|