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.
Files changed (63) hide show
  1. package/README.md +169 -0
  2. package/_templates/basic_design/db-design-template.md +177 -0
  3. package/_templates/basic_design/detail-api-template.md +278 -0
  4. package/_templates/basic_design/detail-screen-template.md +281 -0
  5. package/_templates/basic_design/list-api-template.md +130 -0
  6. package/_templates/basic_design/list-screen-template.md +242 -0
  7. package/_templates/detail_design/common/architecture-overview-template.md +302 -0
  8. package/_templates/detail_design/common/deployment-infrastructure-template.md +461 -0
  9. package/_templates/detail_design/common/error-handling-patterns-template.md +460 -0
  10. package/_templates/detail_design/common/integration-patterns-template.md +410 -0
  11. package/_templates/detail_design/common/performance-standards-template.md +406 -0
  12. package/_templates/detail_design/common/security-patterns-template.md +395 -0
  13. package/_templates/detail_design/feature-detail-design-template.md +773 -0
  14. package/_templates/detail_design/feature-list-template.md +39 -0
  15. package/_templates/srs/1-introduction.md +58 -0
  16. package/_templates/srs/2-overall-description.md +91 -0
  17. package/_templates/srs/3-use-case-detail-template.md +142 -0
  18. package/_templates/srs/3-use-cases.md +53 -0
  19. package/_templates/srs/4-system-feature-detail-template.md +131 -0
  20. package/_templates/srs/4-system-features-list-template.md +39 -0
  21. package/_templates/srs/5-data-requirements.md +59 -0
  22. package/_templates/srs/6-external-interfaces.md +56 -0
  23. package/_templates/srs/7-quality-attributes.md +74 -0
  24. package/_templates/srs/8-internationalization.md +36 -0
  25. package/_templates/srs/9-other-requirements.md +46 -0
  26. package/assets/cursor/commands/analyze.md +39 -0
  27. package/assets/cursor/commands/generate-detail-design.md +35 -0
  28. package/assets/cursor/commands/generate-srs.md +38 -0
  29. package/assets/cursor/skills/spec-writer/SKILL.md +33 -0
  30. package/assets/workflow/config/analyze.graphify.json +36 -0
  31. package/assets/workflow/config/completeness-rules.detail-design.json +57 -0
  32. package/assets/workflow/config/completeness-rules.srs.json +72 -0
  33. package/assets/workflow/config/dag.detail-design.json +64 -0
  34. package/assets/workflow/config/dag.srs.json +87 -0
  35. package/assets/workflow/state/state.template.json +26 -0
  36. package/assets/workflow/templates/basic_design/db-design-template.md +177 -0
  37. package/assets/workflow/templates/basic_design/detail-api-template.md +278 -0
  38. package/assets/workflow/templates/basic_design/detail-screen-template.md +281 -0
  39. package/assets/workflow/templates/basic_design/list-api-template.md +130 -0
  40. package/assets/workflow/templates/basic_design/list-screen-template.md +242 -0
  41. package/assets/workflow/templates/detail_design/common/architecture-overview-template.md +302 -0
  42. package/assets/workflow/templates/detail_design/common/deployment-infrastructure-template.md +461 -0
  43. package/assets/workflow/templates/detail_design/common/error-handling-patterns-template.md +460 -0
  44. package/assets/workflow/templates/detail_design/common/integration-patterns-template.md +410 -0
  45. package/assets/workflow/templates/detail_design/common/performance-standards-template.md +406 -0
  46. package/assets/workflow/templates/detail_design/common/security-patterns-template.md +395 -0
  47. package/assets/workflow/templates/detail_design/feature-detail-design-template.md +773 -0
  48. package/assets/workflow/templates/detail_design/feature-list-template.md +39 -0
  49. package/assets/workflow/templates/srs/1-introduction.md +58 -0
  50. package/assets/workflow/templates/srs/2-overall-description.md +91 -0
  51. package/assets/workflow/templates/srs/3-use-case-detail-template.md +142 -0
  52. package/assets/workflow/templates/srs/3-use-cases.md +53 -0
  53. package/assets/workflow/templates/srs/4-system-feature-detail-template.md +131 -0
  54. package/assets/workflow/templates/srs/4-system-features-list-template.md +39 -0
  55. package/assets/workflow/templates/srs/5-data-requirements.md +59 -0
  56. package/assets/workflow/templates/srs/6-external-interfaces.md +56 -0
  57. package/assets/workflow/templates/srs/7-quality-attributes.md +74 -0
  58. package/assets/workflow/templates/srs/8-internationalization.md +36 -0
  59. package/assets/workflow/templates/srs/9-other-requirements.md +46 -0
  60. package/bin/spec-writer.js +56 -0
  61. package/package.json +25 -0
  62. package/src/cli/helpers/fs.js +50 -0
  63. 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
+ ![Screen Name Wireframe](screens/screen-name-wireframe.png)
226
+ ![Screen Name Mockup](screens/screen-name-mockup.png)
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>