@mytechtoday/augment-extensions 1.3.0 → 1.4.0

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 (232) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +105 -6
  3. package/augment-extensions/domain-rules/software-architecture/README.md +143 -143
  4. package/augment-extensions/domain-rules/software-architecture/examples/banking-layered.md +961 -961
  5. package/augment-extensions/domain-rules/software-architecture/examples/ecommerce-microservices.md +990 -990
  6. package/augment-extensions/domain-rules/software-architecture/examples/iot-eventdriven.md +882 -882
  7. package/augment-extensions/domain-rules/software-architecture/examples/monolith-to-microservices-migration.md +703 -703
  8. package/augment-extensions/domain-rules/software-architecture/examples/serverless-imageprocessing.md +957 -957
  9. package/augment-extensions/domain-rules/software-architecture/examples/trading-eventdriven.md +747 -747
  10. package/augment-extensions/domain-rules/software-architecture/module.json +119 -119
  11. package/augment-extensions/domain-rules/software-architecture/rules/challenges-solutions.md +763 -763
  12. package/augment-extensions/domain-rules/software-architecture/rules/definitions-terminology.md +409 -409
  13. package/augment-extensions/domain-rules/software-architecture/rules/design-principles.md +684 -684
  14. package/augment-extensions/domain-rules/software-architecture/rules/evaluation-testing.md +1381 -1381
  15. package/augment-extensions/domain-rules/software-architecture/rules/event-driven-architecture.md +616 -616
  16. package/augment-extensions/domain-rules/software-architecture/rules/fundamentals.md +306 -306
  17. package/augment-extensions/domain-rules/software-architecture/rules/industry-architectures.md +554 -554
  18. package/augment-extensions/domain-rules/software-architecture/rules/layered-architecture.md +776 -776
  19. package/augment-extensions/domain-rules/software-architecture/rules/microservices-architecture.md +503 -503
  20. package/augment-extensions/domain-rules/software-architecture/rules/modeling-documentation.md +1199 -1199
  21. package/augment-extensions/domain-rules/software-architecture/rules/monolithic-architecture.md +351 -351
  22. package/augment-extensions/domain-rules/software-architecture/rules/principles.md +556 -556
  23. package/augment-extensions/domain-rules/software-architecture/rules/quality-attributes.md +797 -797
  24. package/augment-extensions/domain-rules/software-architecture/rules/scalability-performance.md +1345 -1345
  25. package/augment-extensions/domain-rules/software-architecture/rules/security-architecture.md +1039 -1039
  26. package/augment-extensions/domain-rules/software-architecture/rules/serverless-architecture.md +711 -711
  27. package/augment-extensions/domain-rules/software-architecture/rules/skills-development.md +568 -568
  28. package/augment-extensions/domain-rules/software-architecture/rules/tools-methodologies.md +961 -961
  29. package/augment-extensions/visual-design/CHANGELOG.md +132 -132
  30. package/augment-extensions/visual-design/README.md +255 -255
  31. package/augment-extensions/visual-design/__tests__/README.md +119 -119
  32. package/augment-extensions/visual-design/__tests__/style-selector.test.ts +172 -172
  33. package/augment-extensions/visual-design/__tests__/vendor-styles.test.ts +214 -214
  34. package/augment-extensions/visual-design/domains/other/ai-prompt-helper.ts +157 -157
  35. package/augment-extensions/visual-design/domains/other/dotnet-application.ts +156 -156
  36. package/augment-extensions/visual-design/domains/other/linux-platform.ts +156 -156
  37. package/augment-extensions/visual-design/domains/other/mobile-application.ts +157 -157
  38. package/augment-extensions/visual-design/domains/other/motion-picture.ts +156 -156
  39. package/augment-extensions/visual-design/domains/other/os-application.ts +156 -156
  40. package/augment-extensions/visual-design/domains/other/print-campaigns.ts +158 -158
  41. package/augment-extensions/visual-design/domains/other/web-app.ts +157 -157
  42. package/augment-extensions/visual-design/domains/other/website.ts +161 -161
  43. package/augment-extensions/visual-design/domains/other/windows-platform.ts +156 -156
  44. package/augment-extensions/visual-design/domains/web-page-styles/amazon-cloudscape.ts +506 -506
  45. package/augment-extensions/visual-design/domains/web-page-styles/google-modern.ts +615 -615
  46. package/augment-extensions/visual-design/domains/web-page-styles/microsoft-fluent.ts +531 -531
  47. package/augment-extensions/visual-design/examples/README.md +97 -97
  48. package/augment-extensions/visual-design/examples/ai-prompt-generation.md +233 -233
  49. package/augment-extensions/visual-design/examples/basic-usage.md +216 -216
  50. package/augment-extensions/visual-design/examples/domain-workflows.md +257 -257
  51. package/augment-extensions/visual-design/examples/vendor-comparison.md +247 -247
  52. package/augment-extensions/visual-design/module.json +78 -78
  53. package/augment-extensions/visual-design/style-selector.ts +177 -177
  54. package/augment-extensions/visual-design/types.ts +302 -302
  55. package/augment-extensions/visual-design/visual-design-core.ts +469 -469
  56. package/augment-extensions/workflows/adr-support/README.md +227 -227
  57. package/augment-extensions/workflows/adr-support/__tests__/adr-validator.test.ts +203 -203
  58. package/augment-extensions/workflows/adr-support/adr-validator.ts +162 -162
  59. package/augment-extensions/workflows/adr-support/examples/complete-lifecycle-example.md +449 -449
  60. package/augment-extensions/workflows/adr-support/examples/integration-example.md +580 -580
  61. package/augment-extensions/workflows/adr-support/examples/superseding-example.md +436 -436
  62. package/augment-extensions/workflows/adr-support/module.json +112 -112
  63. package/augment-extensions/workflows/adr-support/rules/adr-creation.md +372 -372
  64. package/augment-extensions/workflows/adr-support/rules/beads-integration.md +443 -443
  65. package/augment-extensions/workflows/adr-support/rules/conflict-detection.md +486 -486
  66. package/augment-extensions/workflows/adr-support/rules/decision-detection.md +362 -362
  67. package/augment-extensions/workflows/adr-support/rules/lifecycle-management.md +427 -427
  68. package/augment-extensions/workflows/adr-support/rules/openspec-integration.md +465 -465
  69. package/augment-extensions/workflows/adr-support/rules/template-selection.md +405 -405
  70. package/augment-extensions/workflows/adr-support/rules/validation-rules.md +543 -543
  71. package/augment-extensions/workflows/adr-support/schemas/adr-config.json +191 -191
  72. package/augment-extensions/workflows/adr-support/schemas/adr-metadata.json +172 -172
  73. package/augment-extensions/workflows/adr-support/templates/business-case.md +235 -235
  74. package/augment-extensions/workflows/adr-support/templates/madr-elaborate.md +197 -197
  75. package/augment-extensions/workflows/adr-support/templates/madr-simple.md +68 -68
  76. package/augment-extensions/workflows/adr-support/templates/nygard.md +84 -84
  77. package/augment-extensions/writing-standards/screenplay/rules/file-organization.md +213 -213
  78. package/augment-extensions/writing-standards/screenplay/utils/__tests__/file-organization.test.ts +169 -169
  79. package/augment-extensions/writing-standards/screenplay/utils/file-organization.ts +165 -165
  80. package/cli/dist/commands/agent.d.ts +37 -0
  81. package/cli/dist/commands/agent.d.ts.map +1 -0
  82. package/cli/dist/commands/agent.js +222 -0
  83. package/cli/dist/commands/agent.js.map +1 -0
  84. package/cli/dist/commands/beads.d.ts +64 -0
  85. package/cli/dist/commands/beads.d.ts.map +1 -0
  86. package/cli/dist/commands/beads.js +377 -0
  87. package/cli/dist/commands/beads.js.map +1 -0
  88. package/cli/dist/commands/change.d.ts +54 -0
  89. package/cli/dist/commands/change.d.ts.map +1 -0
  90. package/cli/dist/commands/change.js +243 -0
  91. package/cli/dist/commands/change.js.map +1 -0
  92. package/cli/dist/commands/clean.d.ts +15 -0
  93. package/cli/dist/commands/clean.d.ts.map +1 -0
  94. package/cli/dist/commands/clean.js +63 -0
  95. package/cli/dist/commands/clean.js.map +1 -0
  96. package/cli/dist/commands/clone.d.ts +15 -0
  97. package/cli/dist/commands/clone.d.ts.map +1 -0
  98. package/cli/dist/commands/clone.js +49 -0
  99. package/cli/dist/commands/clone.js.map +1 -0
  100. package/cli/dist/commands/config.d.ts +33 -0
  101. package/cli/dist/commands/config.d.ts.map +1 -0
  102. package/cli/dist/commands/config.js +166 -0
  103. package/cli/dist/commands/config.js.map +1 -0
  104. package/cli/dist/commands/context.d.ts +38 -0
  105. package/cli/dist/commands/context.d.ts.map +1 -0
  106. package/cli/dist/commands/context.js +205 -0
  107. package/cli/dist/commands/context.js.map +1 -0
  108. package/cli/dist/commands/create.d.ts +18 -0
  109. package/cli/dist/commands/create.d.ts.map +1 -0
  110. package/cli/dist/commands/create.js +178 -0
  111. package/cli/dist/commands/create.js.map +1 -0
  112. package/cli/dist/commands/diff.d.ts +19 -0
  113. package/cli/dist/commands/diff.d.ts.map +1 -0
  114. package/cli/dist/commands/diff.js +104 -0
  115. package/cli/dist/commands/diff.js.map +1 -0
  116. package/cli/dist/commands/doctor.d.ts +14 -0
  117. package/cli/dist/commands/doctor.d.ts.map +1 -0
  118. package/cli/dist/commands/doctor.js +62 -0
  119. package/cli/dist/commands/doctor.js.map +1 -0
  120. package/cli/dist/commands/export.d.ts +28 -0
  121. package/cli/dist/commands/export.d.ts.map +1 -0
  122. package/cli/dist/commands/export.js +135 -0
  123. package/cli/dist/commands/export.js.map +1 -0
  124. package/cli/dist/commands/import.d.ts +23 -0
  125. package/cli/dist/commands/import.d.ts.map +1 -0
  126. package/cli/dist/commands/import.js +118 -0
  127. package/cli/dist/commands/import.js.map +1 -0
  128. package/cli/dist/commands/prompt.d.ts +45 -0
  129. package/cli/dist/commands/prompt.d.ts.map +1 -0
  130. package/cli/dist/commands/prompt.js +223 -0
  131. package/cli/dist/commands/prompt.js.map +1 -0
  132. package/cli/dist/commands/spec.d.ts +57 -0
  133. package/cli/dist/commands/spec.d.ts.map +1 -0
  134. package/cli/dist/commands/spec.js +279 -0
  135. package/cli/dist/commands/spec.js.map +1 -0
  136. package/cli/dist/commands/stats.d.ts +18 -0
  137. package/cli/dist/commands/stats.d.ts.map +1 -0
  138. package/cli/dist/commands/stats.js +85 -0
  139. package/cli/dist/commands/stats.js.map +1 -0
  140. package/cli/dist/commands/task.d.ts +65 -0
  141. package/cli/dist/commands/task.d.ts.map +1 -0
  142. package/cli/dist/commands/task.js +282 -0
  143. package/cli/dist/commands/task.js.map +1 -0
  144. package/cli/dist/commands/template.d.ts +17 -0
  145. package/cli/dist/commands/template.d.ts.map +1 -0
  146. package/cli/dist/commands/template.js +55 -0
  147. package/cli/dist/commands/template.js.map +1 -0
  148. package/cli/dist/utils/agent-config.d.ts +129 -0
  149. package/cli/dist/utils/agent-config.d.ts.map +1 -0
  150. package/cli/dist/utils/agent-config.js +297 -0
  151. package/cli/dist/utils/agent-config.js.map +1 -0
  152. package/cli/dist/utils/auto-sync.js +19 -19
  153. package/cli/dist/utils/beads-graph.d.ts +17 -0
  154. package/cli/dist/utils/beads-graph.d.ts.map +1 -0
  155. package/cli/dist/utils/beads-graph.js +150 -0
  156. package/cli/dist/utils/beads-graph.js.map +1 -0
  157. package/cli/dist/utils/beads-integration.d.ts +112 -0
  158. package/cli/dist/utils/beads-integration.d.ts.map +1 -0
  159. package/cli/dist/utils/beads-integration.js +312 -0
  160. package/cli/dist/utils/beads-integration.js.map +1 -0
  161. package/cli/dist/utils/beads-reporter.d.ts +17 -0
  162. package/cli/dist/utils/beads-reporter.d.ts.map +1 -0
  163. package/cli/dist/utils/beads-reporter.js +160 -0
  164. package/cli/dist/utils/beads-reporter.js.map +1 -0
  165. package/cli/dist/utils/cache-manager.d.ts +55 -0
  166. package/cli/dist/utils/cache-manager.d.ts.map +1 -0
  167. package/cli/dist/utils/cache-manager.js +150 -0
  168. package/cli/dist/utils/cache-manager.js.map +1 -0
  169. package/cli/dist/utils/change-manager.d.ts +70 -0
  170. package/cli/dist/utils/change-manager.d.ts.map +1 -0
  171. package/cli/dist/utils/change-manager.js +412 -0
  172. package/cli/dist/utils/change-manager.js.map +1 -0
  173. package/cli/dist/utils/config-manager-enhanced.d.ts +66 -0
  174. package/cli/dist/utils/config-manager-enhanced.d.ts.map +1 -0
  175. package/cli/dist/utils/config-manager-enhanced.js +77 -0
  176. package/cli/dist/utils/config-manager-enhanced.js.map +1 -0
  177. package/cli/dist/utils/context-manager.d.ts +96 -0
  178. package/cli/dist/utils/context-manager.d.ts.map +1 -0
  179. package/cli/dist/utils/context-manager.js +258 -0
  180. package/cli/dist/utils/context-manager.js.map +1 -0
  181. package/cli/dist/utils/diff-engine.d.ts +78 -0
  182. package/cli/dist/utils/diff-engine.d.ts.map +1 -0
  183. package/cli/dist/utils/diff-engine.js +233 -0
  184. package/cli/dist/utils/diff-engine.js.map +1 -0
  185. package/cli/dist/utils/export-system.d.ts +101 -0
  186. package/cli/dist/utils/export-system.d.ts.map +1 -0
  187. package/cli/dist/utils/export-system.js +289 -0
  188. package/cli/dist/utils/export-system.js.map +1 -0
  189. package/cli/dist/utils/health-checker.d.ts +66 -0
  190. package/cli/dist/utils/health-checker.d.ts.map +1 -0
  191. package/cli/dist/utils/health-checker.js +285 -0
  192. package/cli/dist/utils/health-checker.js.map +1 -0
  193. package/cli/dist/utils/import-system.d.ts +74 -0
  194. package/cli/dist/utils/import-system.d.ts.map +1 -0
  195. package/cli/dist/utils/import-system.js +317 -0
  196. package/cli/dist/utils/import-system.js.map +1 -0
  197. package/cli/dist/utils/module-cloner.d.ts +40 -0
  198. package/cli/dist/utils/module-cloner.d.ts.map +1 -0
  199. package/cli/dist/utils/module-cloner.js +136 -0
  200. package/cli/dist/utils/module-cloner.js.map +1 -0
  201. package/cli/dist/utils/prompt-manager.d.ts +90 -0
  202. package/cli/dist/utils/prompt-manager.d.ts.map +1 -0
  203. package/cli/dist/utils/prompt-manager.js +302 -0
  204. package/cli/dist/utils/prompt-manager.js.map +1 -0
  205. package/cli/dist/utils/spec-manager.d.ts +65 -0
  206. package/cli/dist/utils/spec-manager.d.ts.map +1 -0
  207. package/cli/dist/utils/spec-manager.js +329 -0
  208. package/cli/dist/utils/spec-manager.js.map +1 -0
  209. package/cli/dist/utils/stats-collector.d.ts +74 -0
  210. package/cli/dist/utils/stats-collector.d.ts.map +1 -0
  211. package/cli/dist/utils/stats-collector.js +164 -0
  212. package/cli/dist/utils/stats-collector.js.map +1 -0
  213. package/cli/dist/utils/template-engine.d.ts +47 -0
  214. package/cli/dist/utils/template-engine.d.ts.map +1 -0
  215. package/cli/dist/utils/template-engine.js +204 -0
  216. package/cli/dist/utils/template-engine.js.map +1 -0
  217. package/package.json +12 -3
  218. package/augment-extensions/workflows/openspec/README.md +0 -96
  219. package/augment-extensions/workflows/openspec/examples/complete-change-example.md +0 -244
  220. package/augment-extensions/workflows/openspec/module.json +0 -54
  221. package/augment-extensions/workflows/openspec/rules/best-practices.md +0 -272
  222. package/augment-extensions/workflows/openspec/rules/manual-setup.md +0 -231
  223. package/augment-extensions/workflows/openspec/rules/spec-format.md +0 -236
  224. package/augment-extensions/workflows/openspec/rules/workflow.md +0 -214
  225. package/cli/dist/utils/__tests__/adr-validator.example.d.ts +0 -6
  226. package/cli/dist/utils/__tests__/adr-validator.example.d.ts.map +0 -1
  227. package/cli/dist/utils/__tests__/adr-validator.example.js +0 -148
  228. package/cli/dist/utils/__tests__/adr-validator.example.js.map +0 -1
  229. package/cli/dist/utils/adr-validator.d.ts +0 -65
  230. package/cli/dist/utils/adr-validator.d.ts.map +0 -1
  231. package/cli/dist/utils/adr-validator.js +0 -203
  232. package/cli/dist/utils/adr-validator.js.map +0 -1
package/augment-extensions/visual-design/examples/basic-usage.md CHANGED
@@ -1,216 +1,216 @@
1
- # Basic Usage Example
2
-
3
- ## Overview
4
-
5
- This example demonstrates the fundamental workflow for using the Visual Design module with Augment AI.
6
-
7
- ## Scenario
8
-
9
- **Goal**: Generate a modern landing page design using Google Material 3 Expressive style.
10
-
11
- **Requirements**:
12
- - Clean, modern aesthetic
13
- - Accessible color contrast
14
- - Responsive layout
15
- - Mobile-first approach
16
-
17
- ## Step-by-Step Workflow
18
-
19
- ### Step 1: Query the Module
20
-
21
- ```bash
22
- augx show visual-design
23
- ```
24
-
25
- This loads the core design elements, principles, and vendor styles into the AI context.
26
-
27
- ### Step 2: Select Vendor Style
28
-
29
- The module uses default priority: **google → microsoft → amazon**
30
-
31
- For this example, we'll use Google Modern (Material 3 Expressive):
32
-
33
- ```typescript
34
- import { defaultStyleSelector } from './style-selector';
35
- import { GOOGLE_MODERN } from './domains/web-page-styles/google-modern';
36
-
37
- // Get the default vendor style (Google)
38
- const vendorStyle = defaultStyleSelector.selectVendorStyle();
39
- // Returns: GOOGLE_MODERN
40
-
41
- // Or explicitly request Google
42
- const googleStyle = defaultStyleSelector.selectVendorStyle('google');
43
- ```
44
-
45
- ### Step 3: Apply Design Elements
46
-
47
- #### Color Palette
48
-
49
- ```css
50
- :root {
51
- /* Primary Colors (Material 3 Dynamic Color) */
52
- --color-primary: #6750A4;
53
- --color-on-primary: #FFFFFF;
54
- --color-primary-container: #EADDFF;
55
- --color-on-primary-container: #21005D;
56
-
57
- /* Secondary Colors */
58
- --color-secondary: #625B71;
59
- --color-on-secondary: #FFFFFF;
60
-
61
- /* Neutral Colors */
62
- --color-surface: #FFFBFE;
63
- --color-on-surface: #1C1B1F;
64
- --color-outline: #79747E;
65
-
66
- /* Semantic Colors */
67
- --color-error: #B3261E;
68
- --color-success: #4CAF50;
69
- }
70
- ```
71
-
72
- #### Typography
73
-
74
- ```css
75
- /* Google Sans for headings, Roboto for body */
76
- @import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500&display=swap');
77
-
78
- :root {
79
- --font-heading: 'Google Sans', sans-serif;
80
- --font-body: 'Roboto', sans-serif;
81
-
82
- /* Type Scale */
83
- --font-size-h1: 3.5rem; /* 56px */
84
- --font-size-h2: 2.75rem; /* 44px */
85
- --font-size-h3: 2rem; /* 32px */
86
- --font-size-body: 1rem; /* 16px */
87
- --font-size-caption: 0.875rem; /* 14px */
88
-
89
- /* Line Heights */
90
- --line-height-heading: 1.2;
91
- --line-height-body: 1.5;
92
- }
93
- ```
94
-
95
- #### Layout (Responsive Grid)
96
-
97
- ```css
98
- .container {
99
- max-width: 1200px;
100
- margin: 0 auto;
101
- padding: 0 16px;
102
- }
103
-
104
- .grid {
105
- display: grid;
106
- grid-template-columns: repeat(12, 1fr);
107
- gap: 24px;
108
- }
109
-
110
- /* Responsive breakpoints */
111
- @media (max-width: 600px) {
112
- .grid {
113
- grid-template-columns: repeat(4, 1fr);
114
- gap: 16px;
115
- }
116
- }
117
-
118
- @media (min-width: 601px) and (max-width: 1024px) {
119
- .grid {
120
- grid-template-columns: repeat(8, 1fr);
121
- gap: 20px;
122
- }
123
- }
124
- ```
125
-
126
- ### Step 4: Apply Design Principles
127
-
128
- #### Hierarchy
129
-
130
- ```html
131
- <header>
132
- <h1>Welcome to Our Product</h1>
133
- <p class="subtitle">The best solution for your needs</p>
134
- </header>
135
-
136
- <section>
137
- <h2>Features</h2>
138
- <div class="feature-grid">
139
- <div class="feature-card">
140
- <h3>Fast</h3>
141
- <p>Lightning-fast performance</p>
142
- </div>
143
- </div>
144
- </section>
145
- ```
146
-
147
- #### Contrast (WCAG AA: 4.5:1 for text)
148
-
149
- ```css
150
- /* Ensure sufficient contrast */
151
- .text-on-primary {
152
- color: #FFFFFF; /* White on #6750A4 = 7.2:1 ✓ */
153
- }
154
-
155
- .text-on-surface {
156
- color: #1C1B1F; /* Dark on #FFFBFE = 15.8:1 ✓ */
157
- }
158
- ```
159
-
160
- ### Step 5: Generate Output
161
-
162
- **HTML Structure**:
163
-
164
- ```html
165
- <!DOCTYPE html>
166
- <html lang="en">
167
- <head>
168
- <meta charset="UTF-8">
169
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
170
- <title>Modern Landing Page</title>
171
- <link rel="stylesheet" href="styles.css">
172
- </head>
173
- <body>
174
- <header class="hero">
175
- <div class="container">
176
- <h1>Transform Your Workflow</h1>
177
- <p class="subtitle">Powerful tools for modern teams</p>
178
- <button class="cta-button">Get Started</button>
179
- </div>
180
- </header>
181
-
182
- <main>
183
- <section class="features">
184
- <div class="container">
185
- <h2>Why Choose Us</h2>
186
- <div class="grid">
187
- <div class="feature-card">
188
- <h3>Fast</h3>
189
- <p>Lightning-fast performance</p>
190
- </div>
191
- <!-- More feature cards -->
192
- </div>
193
- </div>
194
- </section>
195
- </main>
196
- </body>
197
- </html>
198
- ```
199
-
200
- ## Result
201
-
202
- A modern, accessible landing page following Google Material 3 Expressive design principles with:
203
- - ✅ Dynamic color theming
204
- - ✅ Proper typography hierarchy
205
- - ✅ Responsive grid layout
206
- - ✅ WCAG AA contrast ratios
207
- - ✅ Mobile-first approach
208
- - ✅ Consistent spacing (8px grid)
209
-
210
- ## Next Steps
211
-
212
- - Explore other vendor styles (Microsoft Fluent 2, Amazon Cloudscape)
213
- - Try different domains (Web-app, Mobile, Print)
214
- - Customize color palettes
215
- - Add motion and elevation
216
-
1
+ # Basic Usage Example
2
+
3
+ ## Overview
4
+
5
+ This example demonstrates the fundamental workflow for using the Visual Design module with Augment AI.
6
+
7
+ ## Scenario
8
+
9
+ **Goal**: Generate a modern landing page design using Google Material 3 Expressive style.
10
+
11
+ **Requirements**:
12
+ - Clean, modern aesthetic
13
+ - Accessible color contrast
14
+ - Responsive layout
15
+ - Mobile-first approach
16
+
17
+ ## Step-by-Step Workflow
18
+
19
+ ### Step 1: Query the Module
20
+
21
+ ```bash
22
+ augx show visual-design
23
+ ```
24
+
25
+ This loads the core design elements, principles, and vendor styles into the AI context.
26
+
27
+ ### Step 2: Select Vendor Style
28
+
29
+ The module uses default priority: **google → microsoft → amazon**
30
+
31
+ For this example, we'll use Google Modern (Material 3 Expressive):
32
+
33
+ ```typescript
34
+ import { defaultStyleSelector } from './style-selector';
35
+ import { GOOGLE_MODERN } from './domains/web-page-styles/google-modern';
36
+
37
+ // Get the default vendor style (Google)
38
+ const vendorStyle = defaultStyleSelector.selectVendorStyle();
39
+ // Returns: GOOGLE_MODERN
40
+
41
+ // Or explicitly request Google
42
+ const googleStyle = defaultStyleSelector.selectVendorStyle('google');
43
+ ```
44
+
45
+ ### Step 3: Apply Design Elements
46
+
47
+ #### Color Palette
48
+
49
+ ```css
50
+ :root {
51
+ /* Primary Colors (Material 3 Dynamic Color) */
52
+ --color-primary: #6750A4;
53
+ --color-on-primary: #FFFFFF;
54
+ --color-primary-container: #EADDFF;
55
+ --color-on-primary-container: #21005D;
56
+
57
+ /* Secondary Colors */
58
+ --color-secondary: #625B71;
59
+ --color-on-secondary: #FFFFFF;
60
+
61
+ /* Neutral Colors */
62
+ --color-surface: #FFFBFE;
63
+ --color-on-surface: #1C1B1F;
64
+ --color-outline: #79747E;
65
+
66
+ /* Semantic Colors */
67
+ --color-error: #B3261E;
68
+ --color-success: #4CAF50;
69
+ }
70
+ ```
71
+
72
+ #### Typography
73
+
74
+ ```css
75
+ /* Google Sans for headings, Roboto for body */
76
+ @import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500&display=swap');
77
+
78
+ :root {
79
+ --font-heading: 'Google Sans', sans-serif;
80
+ --font-body: 'Roboto', sans-serif;
81
+
82
+ /* Type Scale */
83
+ --font-size-h1: 3.5rem; /* 56px */
84
+ --font-size-h2: 2.75rem; /* 44px */
85
+ --font-size-h3: 2rem; /* 32px */
86
+ --font-size-body: 1rem; /* 16px */
87
+ --font-size-caption: 0.875rem; /* 14px */
88
+
89
+ /* Line Heights */
90
+ --line-height-heading: 1.2;
91
+ --line-height-body: 1.5;
92
+ }
93
+ ```
94
+
95
+ #### Layout (Responsive Grid)
96
+
97
+ ```css
98
+ .container {
99
+ max-width: 1200px;
100
+ margin: 0 auto;
101
+ padding: 0 16px;
102
+ }
103
+
104
+ .grid {
105
+ display: grid;
106
+ grid-template-columns: repeat(12, 1fr);
107
+ gap: 24px;
108
+ }
109
+
110
+ /* Responsive breakpoints */
111
+ @media (max-width: 600px) {
112
+ .grid {
113
+ grid-template-columns: repeat(4, 1fr);
114
+ gap: 16px;
115
+ }
116
+ }
117
+
118
+ @media (min-width: 601px) and (max-width: 1024px) {
119
+ .grid {
120
+ grid-template-columns: repeat(8, 1fr);
121
+ gap: 20px;
122
+ }
123
+ }
124
+ ```
125
+
126
+ ### Step 4: Apply Design Principles
127
+
128
+ #### Hierarchy
129
+
130
+ ```html
131
+ <header>
132
+ <h1>Welcome to Our Product</h1>
133
+ <p class="subtitle">The best solution for your needs</p>
134
+ </header>
135
+
136
+ <section>
137
+ <h2>Features</h2>
138
+ <div class="feature-grid">
139
+ <div class="feature-card">
140
+ <h3>Fast</h3>
141
+ <p>Lightning-fast performance</p>
142
+ </div>
143
+ </div>
144
+ </section>
145
+ ```
146
+
147
+ #### Contrast (WCAG AA: 4.5:1 for text)
148
+
149
+ ```css
150
+ /* Ensure sufficient contrast */
151
+ .text-on-primary {
152
+ color: #FFFFFF; /* White on #6750A4 = 7.2:1 ✓ */
153
+ }
154
+
155
+ .text-on-surface {
156
+ color: #1C1B1F; /* Dark on #FFFBFE = 15.8:1 ✓ */
157
+ }
158
+ ```
159
+
160
+ ### Step 5: Generate Output
161
+
162
+ **HTML Structure**:
163
+
164
+ ```html
165
+ <!DOCTYPE html>
166
+ <html lang="en">
167
+ <head>
168
+ <meta charset="UTF-8">
169
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
170
+ <title>Modern Landing Page</title>
171
+ <link rel="stylesheet" href="styles.css">
172
+ </head>
173
+ <body>
174
+ <header class="hero">
175
+ <div class="container">
176
+ <h1>Transform Your Workflow</h1>
177
+ <p class="subtitle">Powerful tools for modern teams</p>
178
+ <button class="cta-button">Get Started</button>
179
+ </div>
180
+ </header>
181
+
182
+ <main>
183
+ <section class="features">
184
+ <div class="container">
185
+ <h2>Why Choose Us</h2>
186
+ <div class="grid">
187
+ <div class="feature-card">
188
+ <h3>Fast</h3>
189
+ <p>Lightning-fast performance</p>
190
+ </div>
191
+ <!-- More feature cards -->
192
+ </div>
193
+ </div>
194
+ </section>
195
+ </main>
196
+ </body>
197
+ </html>
198
+ ```
199
+
200
+ ## Result
201
+
202
+ A modern, accessible landing page following Google Material 3 Expressive design principles with:
203
+ - ✅ Dynamic color theming
204
+ - ✅ Proper typography hierarchy
205
+ - ✅ Responsive grid layout
206
+ - ✅ WCAG AA contrast ratios
207
+ - ✅ Mobile-first approach
208
+ - ✅ Consistent spacing (8px grid)
209
+
210
+ ## Next Steps
211
+
212
+ - Explore other vendor styles (Microsoft Fluent 2, Amazon Cloudscape)
213
+ - Try different domains (Web-app, Mobile, Print)
214
+ - Customize color palettes
215
+ - Add motion and elevation
216
+