aios-core 2.2.1 → 2.3.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/.aios-core/.session/current-session.json +14 -14
- package/.aios-core/cli/commands/migrate/validate.js +1 -1
- package/.aios-core/core/docs/session-update-pattern.md +17 -10
- package/.aios-core/core/elicitation/elicitation-engine.js +11 -6
- package/.aios-core/core/elicitation/session-manager.js +2 -1
- package/.aios-core/core/registry/registry-schema.json +166 -166
- package/.aios-core/core/registry/service-registry.json +6585 -6585
- package/.aios-core/core-config.yaml +12 -1
- package/.aios-core/data/agent-config-requirements.yaml +5 -5
- package/.aios-core/development/agents/devops.md +12 -0
- package/.aios-core/development/scripts/squad/README.md +112 -0
- package/.aios-core/development/scripts/squad/index.js +41 -0
- package/.aios-core/development/scripts/squad/squad-loader.js +359 -0
- package/.aios-core/development/scripts/squad/squad-validator.js +685 -0
- package/.aios-core/development/tasks/add-mcp.md +11 -5
- package/.aios-core/development/tasks/search-mcp.md +309 -0
- package/.aios-core/development/tasks/setup-mcp-docker.md +11 -8
- package/.aios-core/development/tasks/squad-creator-validate.md +151 -0
- package/.aios-core/docs/standards/AGENT-PERSONALIZATION-STANDARD-V1.md +3 -3
- package/.aios-core/index.d.ts +7 -7
- package/.aios-core/index.js +1 -1
- package/.aios-core/infrastructure/scripts/batch-creator.js +1 -1
- package/.aios-core/infrastructure/scripts/component-generator.js +1 -1
- package/.aios-core/infrastructure/templates/coderabbit.yaml.template +279 -279
- package/.aios-core/infrastructure/templates/github-workflows/ci.yml.template +169 -169
- package/.aios-core/infrastructure/templates/github-workflows/pr-automation.yml.template +330 -330
- package/.aios-core/infrastructure/templates/github-workflows/release.yml.template +196 -196
- package/.aios-core/infrastructure/templates/gitignore/gitignore-aios-base.tmpl +63 -63
- package/.aios-core/infrastructure/templates/gitignore/gitignore-brownfield-merge.tmpl +18 -18
- package/.aios-core/infrastructure/templates/gitignore/gitignore-node.tmpl +85 -85
- package/.aios-core/infrastructure/templates/gitignore/gitignore-python.tmpl +145 -145
- package/.aios-core/infrastructure/tests/utilities-audit-results.json +500 -500
- package/.aios-core/infrastructure/tools/README.md +1 -1
- package/.aios-core/install-manifest.yaml +4 -1
- package/.aios-core/manifests/schema/manifest-schema.json +190 -190
- package/.aios-core/manifests/workers.csv +203 -203
- package/.aios-core/package.json +102 -102
- package/.aios-core/product/templates/activation-instructions-template.md +7 -7
- package/.aios-core/product/templates/adr.hbs +125 -125
- package/.aios-core/product/templates/component-react-tmpl.tsx +98 -98
- package/.aios-core/product/templates/dbdr.hbs +241 -241
- package/.aios-core/product/templates/engine/schemas/adr.schema.json +102 -102
- package/.aios-core/product/templates/engine/schemas/dbdr.schema.json +205 -205
- package/.aios-core/product/templates/engine/schemas/epic.schema.json +175 -175
- package/.aios-core/product/templates/engine/schemas/pmdr.schema.json +175 -175
- package/.aios-core/product/templates/engine/schemas/prd-v2.schema.json +300 -300
- package/.aios-core/product/templates/engine/schemas/prd.schema.json +152 -152
- package/.aios-core/product/templates/engine/schemas/story.schema.json +222 -222
- package/.aios-core/product/templates/engine/schemas/task.schema.json +154 -154
- package/.aios-core/product/templates/epic.hbs +212 -212
- package/.aios-core/product/templates/eslintrc-security.json +32 -32
- package/.aios-core/product/templates/github-actions-cd.yml +212 -212
- package/.aios-core/product/templates/github-actions-ci.yml +172 -172
- package/.aios-core/product/templates/pmdr.hbs +186 -186
- package/.aios-core/product/templates/prd-v2.0.hbs +216 -216
- package/.aios-core/product/templates/prd.hbs +201 -201
- package/.aios-core/product/templates/shock-report-tmpl.html +502 -502
- package/.aios-core/product/templates/story.hbs +263 -263
- package/.aios-core/product/templates/task.hbs +170 -170
- package/.aios-core/product/templates/tmpl-comment-on-examples.sql +158 -158
- package/.aios-core/product/templates/tmpl-migration-script.sql +91 -91
- package/.aios-core/product/templates/tmpl-rls-granular-policies.sql +104 -104
- package/.aios-core/product/templates/tmpl-rls-kiss-policy.sql +10 -10
- package/.aios-core/product/templates/tmpl-rls-roles.sql +135 -135
- package/.aios-core/product/templates/tmpl-rls-simple.sql +77 -77
- package/.aios-core/product/templates/tmpl-rls-tenant.sql +152 -152
- package/.aios-core/product/templates/tmpl-rollback-script.sql +77 -77
- package/.aios-core/product/templates/tmpl-seed-data.sql +140 -140
- package/.aios-core/product/templates/tmpl-smoke-test.sql +16 -16
- package/.aios-core/product/templates/tmpl-staging-copy-merge.sql +139 -139
- package/.aios-core/product/templates/tmpl-stored-proc.sql +140 -140
- package/.aios-core/product/templates/tmpl-trigger.sql +152 -152
- package/.aios-core/product/templates/tmpl-view-materialized.sql +133 -133
- package/.aios-core/product/templates/tmpl-view.sql +177 -177
- package/.aios-core/product/templates/token-exports-css-tmpl.css +240 -240
- package/.aios-core/quality/schemas/quality-metrics.schema.json +233 -233
- package/.aios-core/schemas/squad-schema.json +185 -0
- package/.aios-core/scripts/README.md +90 -322
- package/.aios-core/scripts/migrate-framework-docs.sh +300 -300
- package/.claude/rules/mcp-usage.md +116 -100
- package/LICENSE +48 -48
- package/README.md +3 -4
- package/bin/aios-init.js +11 -6
- package/bin/aios.js +2 -1
- package/package.json +2 -3
- package/packages/installer/package.json +39 -39
- package/packages/installer/tests/integration/environment-configuration.test.js +2 -2
- package/packages/installer/tests/unit/env-template.test.js +4 -3
- package/templates/squad/LICENSE +21 -21
- package/templates/squad/README.md +37 -37
- package/templates/squad/agents/example-agent.yaml +36 -36
- package/templates/squad/package.json +19 -19
- package/templates/squad/squad.yaml +25 -25
- package/templates/squad/tasks/example-task.yaml +46 -46
- package/templates/squad/templates/example-template.md +24 -24
- package/templates/squad/tests/example-agent.test.js +53 -53
- package/templates/squad/workflows/example-workflow.yaml +54 -54
- package/tools/diagnose-npx-issue.ps1 +96 -96
- package/tools/quick-diagnose.cmd +85 -85
- package/tools/quick-diagnose.ps1 +117 -117
- package/.aios-core/core/data/agent-config-requirements.yaml +0 -368
- package/.aios-core/core/data/aios-kb.md +0 -924
- package/.aios-core/core/data/workflow-patterns.yaml +0 -267
- package/.aios-core/product/templates/1mcp-config.yaml +0 -225
- package/.aios-core/scripts/context-detector.js +0 -226
- package/.aios-core/scripts/elicitation-engine.js +0 -385
- package/.aios-core/scripts/elicitation-session-manager.js +0 -300
- package/.claude/CLAUDE.md +0 -221
|
@@ -1,502 +1,502 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Design System Shock Report - {{PROJECT_NAME}}</title>
|
|
7
|
-
<style>
|
|
8
|
-
/* Self-contained CSS - zero external dependencies */
|
|
9
|
-
* {
|
|
10
|
-
margin: 0;
|
|
11
|
-
padding: 0;
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
body {
|
|
16
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
17
|
-
line-height: 1.6;
|
|
18
|
-
color: #1a1a1a;
|
|
19
|
-
background: #f5f5f5;
|
|
20
|
-
padding: 20px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.container {
|
|
24
|
-
max-width: 1200px;
|
|
25
|
-
margin: 0 auto;
|
|
26
|
-
background: white;
|
|
27
|
-
padding: 40px;
|
|
28
|
-
border-radius: 8px;
|
|
29
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
h1 {
|
|
33
|
-
font-size: 2.5rem;
|
|
34
|
-
margin-bottom: 10px;
|
|
35
|
-
color: #dc2626;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
h2 {
|
|
39
|
-
font-size: 1.8rem;
|
|
40
|
-
margin: 40px 0 20px;
|
|
41
|
-
padding-bottom: 10px;
|
|
42
|
-
border-bottom: 3px solid #dc2626;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
h3 {
|
|
46
|
-
font-size: 1.3rem;
|
|
47
|
-
margin: 30px 0 15px;
|
|
48
|
-
color: #374151;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.subtitle {
|
|
52
|
-
font-size: 1.2rem;
|
|
53
|
-
color: #6b7280;
|
|
54
|
-
margin-bottom: 30px;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.stats-grid {
|
|
58
|
-
display: grid;
|
|
59
|
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
60
|
-
gap: 20px;
|
|
61
|
-
margin: 30px 0;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.stat-card {
|
|
65
|
-
padding: 20px;
|
|
66
|
-
background: #fef2f2;
|
|
67
|
-
border-left: 4px solid #dc2626;
|
|
68
|
-
border-radius: 4px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.stat-card.good {
|
|
72
|
-
background: #f0fdf4;
|
|
73
|
-
border-left-color: #16a34a;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.stat-label {
|
|
77
|
-
font-size: 0.9rem;
|
|
78
|
-
color: #6b7280;
|
|
79
|
-
text-transform: uppercase;
|
|
80
|
-
letter-spacing: 0.05em;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.stat-value {
|
|
84
|
-
font-size: 2.5rem;
|
|
85
|
-
font-weight: bold;
|
|
86
|
-
color: #dc2626;
|
|
87
|
-
margin: 10px 0;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.stat-card.good .stat-value {
|
|
91
|
-
color: #16a34a;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.stat-detail {
|
|
95
|
-
font-size: 0.95rem;
|
|
96
|
-
color: #4b5563;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.horror-show {
|
|
100
|
-
background: #fef2f2;
|
|
101
|
-
padding: 30px;
|
|
102
|
-
border-radius: 8px;
|
|
103
|
-
margin: 30px 0;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.pattern-grid {
|
|
107
|
-
display: grid;
|
|
108
|
-
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
109
|
-
gap: 15px;
|
|
110
|
-
margin: 20px 0;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.pattern-item {
|
|
114
|
-
padding: 15px;
|
|
115
|
-
background: white;
|
|
116
|
-
border: 2px solid #e5e7eb;
|
|
117
|
-
border-radius: 4px;
|
|
118
|
-
text-align: center;
|
|
119
|
-
font-size: 0.85rem;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.pattern-preview {
|
|
123
|
-
width: 100%;
|
|
124
|
-
height: 40px;
|
|
125
|
-
margin-bottom: 10px;
|
|
126
|
-
border-radius: 4px;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.consolidation-preview {
|
|
130
|
-
background: #f0fdf4;
|
|
131
|
-
padding: 30px;
|
|
132
|
-
border-radius: 8px;
|
|
133
|
-
margin: 30px 0;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.comparison {
|
|
137
|
-
display: flex;
|
|
138
|
-
align-items: center;
|
|
139
|
-
justify-content: center;
|
|
140
|
-
gap: 30px;
|
|
141
|
-
margin: 20px 0;
|
|
142
|
-
font-size: 1.5rem;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.comparison .before {
|
|
146
|
-
color: #dc2626;
|
|
147
|
-
font-weight: bold;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.comparison .after {
|
|
151
|
-
color: #16a34a;
|
|
152
|
-
font-weight: bold;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.comparison .arrow {
|
|
156
|
-
font-size: 2rem;
|
|
157
|
-
color: #6b7280;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.roi-calculator {
|
|
161
|
-
background: #eff6ff;
|
|
162
|
-
padding: 30px;
|
|
163
|
-
border-radius: 8px;
|
|
164
|
-
margin: 30px 0;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.cost-row {
|
|
168
|
-
display: flex;
|
|
169
|
-
justify-content: space-between;
|
|
170
|
-
padding: 15px;
|
|
171
|
-
border-bottom: 1px solid #e5e7eb;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.cost-row:last-child {
|
|
175
|
-
border-bottom: none;
|
|
176
|
-
font-weight: bold;
|
|
177
|
-
font-size: 1.2rem;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.cost-label {
|
|
181
|
-
color: #4b5563;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.cost-value {
|
|
185
|
-
color: #1e40af;
|
|
186
|
-
font-weight: 600;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.cost-row:last-child .cost-value {
|
|
190
|
-
color: #16a34a;
|
|
191
|
-
font-size: 1.5rem;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.timeline {
|
|
195
|
-
margin: 30px 0;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.timeline-item {
|
|
199
|
-
display: flex;
|
|
200
|
-
gap: 20px;
|
|
201
|
-
margin-bottom: 20px;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
.timeline-marker {
|
|
205
|
-
flex-shrink: 0;
|
|
206
|
-
width: 40px;
|
|
207
|
-
height: 40px;
|
|
208
|
-
background: #dc2626;
|
|
209
|
-
color: white;
|
|
210
|
-
border-radius: 50%;
|
|
211
|
-
display: flex;
|
|
212
|
-
align-items: center;
|
|
213
|
-
justify-content: center;
|
|
214
|
-
font-weight: bold;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
.timeline-marker.complete {
|
|
218
|
-
background: #16a34a;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.timeline-content {
|
|
222
|
-
flex: 1;
|
|
223
|
-
padding: 10px 0;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.timeline-title {
|
|
227
|
-
font-weight: 600;
|
|
228
|
-
margin-bottom: 5px;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
.timeline-desc {
|
|
232
|
-
color: #6b7280;
|
|
233
|
-
font-size: 0.9rem;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.chart {
|
|
237
|
-
width: 100%;
|
|
238
|
-
height: 300px;
|
|
239
|
-
margin: 30px 0;
|
|
240
|
-
position: relative;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.chart-bar {
|
|
244
|
-
position: absolute;
|
|
245
|
-
bottom: 0;
|
|
246
|
-
width: 45%;
|
|
247
|
-
background: linear-gradient(to top, #dc2626, #f87171);
|
|
248
|
-
border-radius: 4px 4px 0 0;
|
|
249
|
-
transition: height 0.3s;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.chart-bar.before {
|
|
253
|
-
left: 5%;
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
.chart-bar.after {
|
|
257
|
-
right: 5%;
|
|
258
|
-
background: linear-gradient(to top, #16a34a, #4ade80);
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.chart-label {
|
|
262
|
-
position: absolute;
|
|
263
|
-
bottom: -30px;
|
|
264
|
-
width: 100%;
|
|
265
|
-
text-align: center;
|
|
266
|
-
font-weight: 600;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.chart-value {
|
|
270
|
-
position: absolute;
|
|
271
|
-
top: -30px;
|
|
272
|
-
width: 100%;
|
|
273
|
-
text-align: center;
|
|
274
|
-
font-weight: bold;
|
|
275
|
-
font-size: 1.2rem;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
@media print {
|
|
279
|
-
body {
|
|
280
|
-
background: white;
|
|
281
|
-
padding: 0;
|
|
282
|
-
}
|
|
283
|
-
.container {
|
|
284
|
-
box-shadow: none;
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
@media (max-width: 768px) {
|
|
289
|
-
.container {
|
|
290
|
-
padding: 20px;
|
|
291
|
-
}
|
|
292
|
-
h1 {
|
|
293
|
-
font-size: 1.8rem;
|
|
294
|
-
}
|
|
295
|
-
.stats-grid {
|
|
296
|
-
grid-template-columns: 1fr;
|
|
297
|
-
}
|
|
298
|
-
.comparison {
|
|
299
|
-
flex-direction: column;
|
|
300
|
-
gap: 10px;
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
</style>
|
|
304
|
-
</head>
|
|
305
|
-
<body>
|
|
306
|
-
<div class="container">
|
|
307
|
-
<!-- Header -->
|
|
308
|
-
<h1>🔍 Design System Shock Report</h1>
|
|
309
|
-
<p class="subtitle">Let me show you the horror show you've created</p>
|
|
310
|
-
<p><strong>Project:</strong> {{PROJECT_NAME}}<br>
|
|
311
|
-
<strong>Scanned:</strong> {{SCAN_DATE}}<br>
|
|
312
|
-
<strong>Path:</strong> {{SCAN_PATH}}<br>
|
|
313
|
-
<strong>Files Analyzed:</strong> {{TOTAL_FILES}}</p>
|
|
314
|
-
|
|
315
|
-
<!-- Executive Summary Stats -->
|
|
316
|
-
<h2>📊 Executive Summary</h2>
|
|
317
|
-
<div class="stats-grid">
|
|
318
|
-
<div class="stat-card">
|
|
319
|
-
<div class="stat-label">Unique Patterns Found</div>
|
|
320
|
-
<div class="stat-value">{{TOTAL_PATTERNS}}</div>
|
|
321
|
-
<div class="stat-detail">Across {{PATTERN_CATEGORIES}} categories</div>
|
|
322
|
-
</div>
|
|
323
|
-
<div class="stat-card">
|
|
324
|
-
<div class="stat-label">Total Usage Instances</div>
|
|
325
|
-
<div class="stat-value">{{TOTAL_INSTANCES}}</div>
|
|
326
|
-
<div class="stat-detail">{{REDUNDANCY_FACTOR}}x redundancy factor</div>
|
|
327
|
-
</div>
|
|
328
|
-
<div class="stat-card">
|
|
329
|
-
<div class="stat-label">Monthly Waste</div>
|
|
330
|
-
<div class="stat-value">${{MONTHLY_WASTE}}</div>
|
|
331
|
-
<div class="stat-detail">${{ANNUAL_WASTE}}/year in maintenance</div>
|
|
332
|
-
</div>
|
|
333
|
-
<div class="stat-card good">
|
|
334
|
-
<div class="stat-label">Potential Savings</div>
|
|
335
|
-
<div class="stat-value">${{ANNUAL_SAVINGS}}</div>
|
|
336
|
-
<div class="stat-detail">After consolidation</div>
|
|
337
|
-
</div>
|
|
338
|
-
</div>
|
|
339
|
-
|
|
340
|
-
<!-- Horror Show Section -->
|
|
341
|
-
<h2>😱 The Horror Show</h2>
|
|
342
|
-
<div class="horror-show">
|
|
343
|
-
<h3>{{PATTERN_TYPE_1}} Variations ({{PATTERN_COUNT_1}} unique)</h3>
|
|
344
|
-
<p>You have {{PATTERN_COUNT_1}} different {{PATTERN_TYPE_1}} implementations when you should have {{CONSOLIDATED_COUNT_1}}.</p>
|
|
345
|
-
<div class="pattern-grid">
|
|
346
|
-
{{#EACH_PATTERN_1}}
|
|
347
|
-
<div class="pattern-item">
|
|
348
|
-
<div class="pattern-preview" style="background: {{PATTERN_COLOR}}; {{PATTERN_STYLE}}"></div>
|
|
349
|
-
<div>{{PATTERN_NAME}}</div>
|
|
350
|
-
<div style="color: #6b7280; font-size: 0.75rem;">Used {{USAGE_COUNT}} times</div>
|
|
351
|
-
</div>
|
|
352
|
-
{{/EACH_PATTERN_1}}
|
|
353
|
-
</div>
|
|
354
|
-
|
|
355
|
-
<h3 style="margin-top: 40px;">{{PATTERN_TYPE_2}} Variations ({{PATTERN_COUNT_2}} unique)</h3>
|
|
356
|
-
<p>{{PATTERN_COUNT_2}} different colors detected. Industry standard: 10-15 tokens.</p>
|
|
357
|
-
<div class="pattern-grid">
|
|
358
|
-
{{#EACH_PATTERN_2}}
|
|
359
|
-
<div class="pattern-item">
|
|
360
|
-
<div class="pattern-preview" style="background: {{COLOR_VALUE}};"></div>
|
|
361
|
-
<div>{{COLOR_HEX}}</div>
|
|
362
|
-
<div style="color: #6b7280; font-size: 0.75rem;">{{USAGE_PERCENTAGE}}% usage</div>
|
|
363
|
-
</div>
|
|
364
|
-
{{/EACH_PATTERN_2}}
|
|
365
|
-
</div>
|
|
366
|
-
</div>
|
|
367
|
-
|
|
368
|
-
<!-- Consolidation Preview -->
|
|
369
|
-
<h2>✨ Consolidated Future State</h2>
|
|
370
|
-
<div class="consolidation-preview">
|
|
371
|
-
<h3>What Your System Should Look Like</h3>
|
|
372
|
-
|
|
373
|
-
<div class="comparison">
|
|
374
|
-
<span class="before">{{TOTAL_PATTERNS}} patterns</span>
|
|
375
|
-
<span class="arrow">→</span>
|
|
376
|
-
<span class="after">{{CONSOLIDATED_PATTERNS}} patterns</span>
|
|
377
|
-
</div>
|
|
378
|
-
|
|
379
|
-
<div class="comparison">
|
|
380
|
-
<span style="font-size: 1.2rem;">Reduction: <strong style="color: #16a34a;">{{REDUCTION_PERCENTAGE}}%</strong></span>
|
|
381
|
-
</div>
|
|
382
|
-
|
|
383
|
-
<div class="chart">
|
|
384
|
-
<div class="chart-bar before" style="height: {{BEFORE_HEIGHT}}%;">
|
|
385
|
-
<div class="chart-value">{{TOTAL_PATTERNS}}</div>
|
|
386
|
-
<div class="chart-label">Before</div>
|
|
387
|
-
</div>
|
|
388
|
-
<div class="chart-bar after" style="height: {{AFTER_HEIGHT}}%;">
|
|
389
|
-
<div class="chart-value">{{CONSOLIDATED_PATTERNS}}</div>
|
|
390
|
-
<div class="chart-label">After</div>
|
|
391
|
-
</div>
|
|
392
|
-
</div>
|
|
393
|
-
|
|
394
|
-
<h3 style="margin-top: 40px;">Recommended Minimal Set</h3>
|
|
395
|
-
<div class="pattern-grid">
|
|
396
|
-
{{#EACH_CONSOLIDATED_PATTERN}}
|
|
397
|
-
<div class="pattern-item" style="border-color: #16a34a;">
|
|
398
|
-
<div class="pattern-preview" style="{{CONSOLIDATED_STYLE}}"></div>
|
|
399
|
-
<div><strong>{{CONSOLIDATED_NAME}}</strong></div>
|
|
400
|
-
<div style="color: #16a34a; font-size: 0.75rem;">Replaces {{REPLACES_COUNT}} variations</div>
|
|
401
|
-
</div>
|
|
402
|
-
{{/EACH_CONSOLIDATED_PATTERN}}
|
|
403
|
-
</div>
|
|
404
|
-
</div>
|
|
405
|
-
|
|
406
|
-
<!-- ROI Calculator -->
|
|
407
|
-
<h2>💰 Cost Analysis & ROI</h2>
|
|
408
|
-
<div class="roi-calculator">
|
|
409
|
-
<h3>Monthly Maintenance Costs</h3>
|
|
410
|
-
<div class="cost-row">
|
|
411
|
-
<span class="cost-label">Current: {{TOTAL_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
|
|
412
|
-
<span class="cost-value">${{MONTHLY_COST_BEFORE}}</span>
|
|
413
|
-
</div>
|
|
414
|
-
<div class="cost-row">
|
|
415
|
-
<span class="cost-label">After: {{CONSOLIDATED_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
|
|
416
|
-
<span class="cost-value">${{MONTHLY_COST_AFTER}}</span>
|
|
417
|
-
</div>
|
|
418
|
-
<div class="cost-row">
|
|
419
|
-
<span class="cost-label">Monthly Savings</span>
|
|
420
|
-
<span class="cost-value">${{MONTHLY_SAVINGS}}</span>
|
|
421
|
-
</div>
|
|
422
|
-
|
|
423
|
-
<h3 style="margin-top: 30px;">Annual Projection</h3>
|
|
424
|
-
<div class="cost-row">
|
|
425
|
-
<span class="cost-label">Annual Maintenance Waste (Current)</span>
|
|
426
|
-
<span class="cost-value">${{ANNUAL_WASTE}}</span>
|
|
427
|
-
</div>
|
|
428
|
-
<div class="cost-row">
|
|
429
|
-
<span class="cost-label">Annual Maintenance Cost (After)</span>
|
|
430
|
-
<span class="cost-value">${{ANNUAL_COST_AFTER}}</span>
|
|
431
|
-
</div>
|
|
432
|
-
<div class="cost-row">
|
|
433
|
-
<span class="cost-label">Implementation Investment</span>
|
|
434
|
-
<span class="cost-value">${{IMPLEMENTATION_COST}}</span>
|
|
435
|
-
</div>
|
|
436
|
-
<div class="cost-row">
|
|
437
|
-
<span class="cost-label">Annual Savings</span>
|
|
438
|
-
<span class="cost-value">${{ANNUAL_SAVINGS}}</span>
|
|
439
|
-
</div>
|
|
440
|
-
|
|
441
|
-
<h3 style="margin-top: 30px;">ROI Metrics</h3>
|
|
442
|
-
<div class="cost-row">
|
|
443
|
-
<span class="cost-label">ROI Ratio</span>
|
|
444
|
-
<span class="cost-value">{{ROI_RATIO}}x</span>
|
|
445
|
-
</div>
|
|
446
|
-
<div class="cost-row">
|
|
447
|
-
<span class="cost-label">Breakeven Timeline</span>
|
|
448
|
-
<span class="cost-value">{{BREAKEVEN_DAYS}} days</span>
|
|
449
|
-
</div>
|
|
450
|
-
<div class="cost-row">
|
|
451
|
-
<span class="cost-label">3-Year Total Savings</span>
|
|
452
|
-
<span class="cost-value">${{THREE_YEAR_SAVINGS}}</span>
|
|
453
|
-
</div>
|
|
454
|
-
</div>
|
|
455
|
-
|
|
456
|
-
<!-- Migration Timeline -->
|
|
457
|
-
<h2>🗓️ Estimated Migration Timeline</h2>
|
|
458
|
-
<div class="timeline">
|
|
459
|
-
<div class="timeline-item">
|
|
460
|
-
<div class="timeline-marker">1</div>
|
|
461
|
-
<div class="timeline-content">
|
|
462
|
-
<div class="timeline-title">Phase 1: Foundation ({{PHASE_1_DURATION}})</div>
|
|
463
|
-
<div class="timeline-desc">Deploy token system, no visual changes. Zero risk.</div>
|
|
464
|
-
</div>
|
|
465
|
-
</div>
|
|
466
|
-
<div class="timeline-item">
|
|
467
|
-
<div class="timeline-marker">2</div>
|
|
468
|
-
<div class="timeline-content">
|
|
469
|
-
<div class="timeline-title">Phase 2: High-Impact Patterns ({{PHASE_2_DURATION}})</div>
|
|
470
|
-
<div class="timeline-desc">Replace top 3 most-used components. Immediate ROI.</div>
|
|
471
|
-
</div>
|
|
472
|
-
</div>
|
|
473
|
-
<div class="timeline-item">
|
|
474
|
-
<div class="timeline-marker">3</div>
|
|
475
|
-
<div class="timeline-content">
|
|
476
|
-
<div class="timeline-title">Phase 3: Long-Tail Cleanup ({{PHASE_3_DURATION}})</div>
|
|
477
|
-
<div class="timeline-desc">Consolidate remaining patterns. Medium risk.</div>
|
|
478
|
-
</div>
|
|
479
|
-
</div>
|
|
480
|
-
<div class="timeline-item">
|
|
481
|
-
<div class="timeline-marker">4</div>
|
|
482
|
-
<div class="timeline-content">
|
|
483
|
-
<div class="timeline-title">Phase 4: Enforcement ({{PHASE_4_DURATION}})</div>
|
|
484
|
-
<div class="timeline-desc">CI/CD validation prevents regression. Low risk.</div>
|
|
485
|
-
</div>
|
|
486
|
-
</div>
|
|
487
|
-
</div>
|
|
488
|
-
|
|
489
|
-
<div style="background: #eff6ff; padding: 20px; border-radius: 8px; margin-top: 30px;">
|
|
490
|
-
<p style="font-size: 1.1rem;"><strong>Total Estimated Timeline:</strong> {{TOTAL_DURATION}}</p>
|
|
491
|
-
<p style="color: #6b7280; margin-top: 10px;">Phased approach minimizes disruption. Each phase completes independently.</p>
|
|
492
|
-
</div>
|
|
493
|
-
|
|
494
|
-
<!-- Footer -->
|
|
495
|
-
<div style="margin-top: 60px; padding-top: 30px; border-top: 2px solid #e5e7eb; color: #6b7280; font-size: 0.9rem;">
|
|
496
|
-
<p><strong>Generated by Brad (Design System Architect)</strong></p>
|
|
497
|
-
<p>🤖 Generated with <a href="https://claude.com/claude-code" style="color: #2563eb;">Claude Code</a></p>
|
|
498
|
-
<p>For questions about this report, activate Brad: <code>*agent design-system</code></p>
|
|
499
|
-
</div>
|
|
500
|
-
</div>
|
|
501
|
-
</body>
|
|
502
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Design System Shock Report - {{PROJECT_NAME}}</title>
|
|
7
|
+
<style>
|
|
8
|
+
/* Self-contained CSS - zero external dependencies */
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
17
|
+
line-height: 1.6;
|
|
18
|
+
color: #1a1a1a;
|
|
19
|
+
background: #f5f5f5;
|
|
20
|
+
padding: 20px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.container {
|
|
24
|
+
max-width: 1200px;
|
|
25
|
+
margin: 0 auto;
|
|
26
|
+
background: white;
|
|
27
|
+
padding: 40px;
|
|
28
|
+
border-radius: 8px;
|
|
29
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
h1 {
|
|
33
|
+
font-size: 2.5rem;
|
|
34
|
+
margin-bottom: 10px;
|
|
35
|
+
color: #dc2626;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
h2 {
|
|
39
|
+
font-size: 1.8rem;
|
|
40
|
+
margin: 40px 0 20px;
|
|
41
|
+
padding-bottom: 10px;
|
|
42
|
+
border-bottom: 3px solid #dc2626;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
h3 {
|
|
46
|
+
font-size: 1.3rem;
|
|
47
|
+
margin: 30px 0 15px;
|
|
48
|
+
color: #374151;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.subtitle {
|
|
52
|
+
font-size: 1.2rem;
|
|
53
|
+
color: #6b7280;
|
|
54
|
+
margin-bottom: 30px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.stats-grid {
|
|
58
|
+
display: grid;
|
|
59
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
60
|
+
gap: 20px;
|
|
61
|
+
margin: 30px 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.stat-card {
|
|
65
|
+
padding: 20px;
|
|
66
|
+
background: #fef2f2;
|
|
67
|
+
border-left: 4px solid #dc2626;
|
|
68
|
+
border-radius: 4px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.stat-card.good {
|
|
72
|
+
background: #f0fdf4;
|
|
73
|
+
border-left-color: #16a34a;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.stat-label {
|
|
77
|
+
font-size: 0.9rem;
|
|
78
|
+
color: #6b7280;
|
|
79
|
+
text-transform: uppercase;
|
|
80
|
+
letter-spacing: 0.05em;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.stat-value {
|
|
84
|
+
font-size: 2.5rem;
|
|
85
|
+
font-weight: bold;
|
|
86
|
+
color: #dc2626;
|
|
87
|
+
margin: 10px 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.stat-card.good .stat-value {
|
|
91
|
+
color: #16a34a;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.stat-detail {
|
|
95
|
+
font-size: 0.95rem;
|
|
96
|
+
color: #4b5563;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.horror-show {
|
|
100
|
+
background: #fef2f2;
|
|
101
|
+
padding: 30px;
|
|
102
|
+
border-radius: 8px;
|
|
103
|
+
margin: 30px 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.pattern-grid {
|
|
107
|
+
display: grid;
|
|
108
|
+
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
109
|
+
gap: 15px;
|
|
110
|
+
margin: 20px 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.pattern-item {
|
|
114
|
+
padding: 15px;
|
|
115
|
+
background: white;
|
|
116
|
+
border: 2px solid #e5e7eb;
|
|
117
|
+
border-radius: 4px;
|
|
118
|
+
text-align: center;
|
|
119
|
+
font-size: 0.85rem;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.pattern-preview {
|
|
123
|
+
width: 100%;
|
|
124
|
+
height: 40px;
|
|
125
|
+
margin-bottom: 10px;
|
|
126
|
+
border-radius: 4px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.consolidation-preview {
|
|
130
|
+
background: #f0fdf4;
|
|
131
|
+
padding: 30px;
|
|
132
|
+
border-radius: 8px;
|
|
133
|
+
margin: 30px 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.comparison {
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
justify-content: center;
|
|
140
|
+
gap: 30px;
|
|
141
|
+
margin: 20px 0;
|
|
142
|
+
font-size: 1.5rem;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.comparison .before {
|
|
146
|
+
color: #dc2626;
|
|
147
|
+
font-weight: bold;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.comparison .after {
|
|
151
|
+
color: #16a34a;
|
|
152
|
+
font-weight: bold;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.comparison .arrow {
|
|
156
|
+
font-size: 2rem;
|
|
157
|
+
color: #6b7280;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.roi-calculator {
|
|
161
|
+
background: #eff6ff;
|
|
162
|
+
padding: 30px;
|
|
163
|
+
border-radius: 8px;
|
|
164
|
+
margin: 30px 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.cost-row {
|
|
168
|
+
display: flex;
|
|
169
|
+
justify-content: space-between;
|
|
170
|
+
padding: 15px;
|
|
171
|
+
border-bottom: 1px solid #e5e7eb;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.cost-row:last-child {
|
|
175
|
+
border-bottom: none;
|
|
176
|
+
font-weight: bold;
|
|
177
|
+
font-size: 1.2rem;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.cost-label {
|
|
181
|
+
color: #4b5563;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.cost-value {
|
|
185
|
+
color: #1e40af;
|
|
186
|
+
font-weight: 600;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.cost-row:last-child .cost-value {
|
|
190
|
+
color: #16a34a;
|
|
191
|
+
font-size: 1.5rem;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.timeline {
|
|
195
|
+
margin: 30px 0;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.timeline-item {
|
|
199
|
+
display: flex;
|
|
200
|
+
gap: 20px;
|
|
201
|
+
margin-bottom: 20px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.timeline-marker {
|
|
205
|
+
flex-shrink: 0;
|
|
206
|
+
width: 40px;
|
|
207
|
+
height: 40px;
|
|
208
|
+
background: #dc2626;
|
|
209
|
+
color: white;
|
|
210
|
+
border-radius: 50%;
|
|
211
|
+
display: flex;
|
|
212
|
+
align-items: center;
|
|
213
|
+
justify-content: center;
|
|
214
|
+
font-weight: bold;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.timeline-marker.complete {
|
|
218
|
+
background: #16a34a;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.timeline-content {
|
|
222
|
+
flex: 1;
|
|
223
|
+
padding: 10px 0;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.timeline-title {
|
|
227
|
+
font-weight: 600;
|
|
228
|
+
margin-bottom: 5px;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.timeline-desc {
|
|
232
|
+
color: #6b7280;
|
|
233
|
+
font-size: 0.9rem;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.chart {
|
|
237
|
+
width: 100%;
|
|
238
|
+
height: 300px;
|
|
239
|
+
margin: 30px 0;
|
|
240
|
+
position: relative;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.chart-bar {
|
|
244
|
+
position: absolute;
|
|
245
|
+
bottom: 0;
|
|
246
|
+
width: 45%;
|
|
247
|
+
background: linear-gradient(to top, #dc2626, #f87171);
|
|
248
|
+
border-radius: 4px 4px 0 0;
|
|
249
|
+
transition: height 0.3s;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.chart-bar.before {
|
|
253
|
+
left: 5%;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.chart-bar.after {
|
|
257
|
+
right: 5%;
|
|
258
|
+
background: linear-gradient(to top, #16a34a, #4ade80);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.chart-label {
|
|
262
|
+
position: absolute;
|
|
263
|
+
bottom: -30px;
|
|
264
|
+
width: 100%;
|
|
265
|
+
text-align: center;
|
|
266
|
+
font-weight: 600;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.chart-value {
|
|
270
|
+
position: absolute;
|
|
271
|
+
top: -30px;
|
|
272
|
+
width: 100%;
|
|
273
|
+
text-align: center;
|
|
274
|
+
font-weight: bold;
|
|
275
|
+
font-size: 1.2rem;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
@media print {
|
|
279
|
+
body {
|
|
280
|
+
background: white;
|
|
281
|
+
padding: 0;
|
|
282
|
+
}
|
|
283
|
+
.container {
|
|
284
|
+
box-shadow: none;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
@media (max-width: 768px) {
|
|
289
|
+
.container {
|
|
290
|
+
padding: 20px;
|
|
291
|
+
}
|
|
292
|
+
h1 {
|
|
293
|
+
font-size: 1.8rem;
|
|
294
|
+
}
|
|
295
|
+
.stats-grid {
|
|
296
|
+
grid-template-columns: 1fr;
|
|
297
|
+
}
|
|
298
|
+
.comparison {
|
|
299
|
+
flex-direction: column;
|
|
300
|
+
gap: 10px;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
</style>
|
|
304
|
+
</head>
|
|
305
|
+
<body>
|
|
306
|
+
<div class="container">
|
|
307
|
+
<!-- Header -->
|
|
308
|
+
<h1>🔍 Design System Shock Report</h1>
|
|
309
|
+
<p class="subtitle">Let me show you the horror show you've created</p>
|
|
310
|
+
<p><strong>Project:</strong> {{PROJECT_NAME}}<br>
|
|
311
|
+
<strong>Scanned:</strong> {{SCAN_DATE}}<br>
|
|
312
|
+
<strong>Path:</strong> {{SCAN_PATH}}<br>
|
|
313
|
+
<strong>Files Analyzed:</strong> {{TOTAL_FILES}}</p>
|
|
314
|
+
|
|
315
|
+
<!-- Executive Summary Stats -->
|
|
316
|
+
<h2>📊 Executive Summary</h2>
|
|
317
|
+
<div class="stats-grid">
|
|
318
|
+
<div class="stat-card">
|
|
319
|
+
<div class="stat-label">Unique Patterns Found</div>
|
|
320
|
+
<div class="stat-value">{{TOTAL_PATTERNS}}</div>
|
|
321
|
+
<div class="stat-detail">Across {{PATTERN_CATEGORIES}} categories</div>
|
|
322
|
+
</div>
|
|
323
|
+
<div class="stat-card">
|
|
324
|
+
<div class="stat-label">Total Usage Instances</div>
|
|
325
|
+
<div class="stat-value">{{TOTAL_INSTANCES}}</div>
|
|
326
|
+
<div class="stat-detail">{{REDUNDANCY_FACTOR}}x redundancy factor</div>
|
|
327
|
+
</div>
|
|
328
|
+
<div class="stat-card">
|
|
329
|
+
<div class="stat-label">Monthly Waste</div>
|
|
330
|
+
<div class="stat-value">${{MONTHLY_WASTE}}</div>
|
|
331
|
+
<div class="stat-detail">${{ANNUAL_WASTE}}/year in maintenance</div>
|
|
332
|
+
</div>
|
|
333
|
+
<div class="stat-card good">
|
|
334
|
+
<div class="stat-label">Potential Savings</div>
|
|
335
|
+
<div class="stat-value">${{ANNUAL_SAVINGS}}</div>
|
|
336
|
+
<div class="stat-detail">After consolidation</div>
|
|
337
|
+
</div>
|
|
338
|
+
</div>
|
|
339
|
+
|
|
340
|
+
<!-- Horror Show Section -->
|
|
341
|
+
<h2>😱 The Horror Show</h2>
|
|
342
|
+
<div class="horror-show">
|
|
343
|
+
<h3>{{PATTERN_TYPE_1}} Variations ({{PATTERN_COUNT_1}} unique)</h3>
|
|
344
|
+
<p>You have {{PATTERN_COUNT_1}} different {{PATTERN_TYPE_1}} implementations when you should have {{CONSOLIDATED_COUNT_1}}.</p>
|
|
345
|
+
<div class="pattern-grid">
|
|
346
|
+
{{#EACH_PATTERN_1}}
|
|
347
|
+
<div class="pattern-item">
|
|
348
|
+
<div class="pattern-preview" style="background: {{PATTERN_COLOR}}; {{PATTERN_STYLE}}"></div>
|
|
349
|
+
<div>{{PATTERN_NAME}}</div>
|
|
350
|
+
<div style="color: #6b7280; font-size: 0.75rem;">Used {{USAGE_COUNT}} times</div>
|
|
351
|
+
</div>
|
|
352
|
+
{{/EACH_PATTERN_1}}
|
|
353
|
+
</div>
|
|
354
|
+
|
|
355
|
+
<h3 style="margin-top: 40px;">{{PATTERN_TYPE_2}} Variations ({{PATTERN_COUNT_2}} unique)</h3>
|
|
356
|
+
<p>{{PATTERN_COUNT_2}} different colors detected. Industry standard: 10-15 tokens.</p>
|
|
357
|
+
<div class="pattern-grid">
|
|
358
|
+
{{#EACH_PATTERN_2}}
|
|
359
|
+
<div class="pattern-item">
|
|
360
|
+
<div class="pattern-preview" style="background: {{COLOR_VALUE}};"></div>
|
|
361
|
+
<div>{{COLOR_HEX}}</div>
|
|
362
|
+
<div style="color: #6b7280; font-size: 0.75rem;">{{USAGE_PERCENTAGE}}% usage</div>
|
|
363
|
+
</div>
|
|
364
|
+
{{/EACH_PATTERN_2}}
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
<!-- Consolidation Preview -->
|
|
369
|
+
<h2>✨ Consolidated Future State</h2>
|
|
370
|
+
<div class="consolidation-preview">
|
|
371
|
+
<h3>What Your System Should Look Like</h3>
|
|
372
|
+
|
|
373
|
+
<div class="comparison">
|
|
374
|
+
<span class="before">{{TOTAL_PATTERNS}} patterns</span>
|
|
375
|
+
<span class="arrow">→</span>
|
|
376
|
+
<span class="after">{{CONSOLIDATED_PATTERNS}} patterns</span>
|
|
377
|
+
</div>
|
|
378
|
+
|
|
379
|
+
<div class="comparison">
|
|
380
|
+
<span style="font-size: 1.2rem;">Reduction: <strong style="color: #16a34a;">{{REDUCTION_PERCENTAGE}}%</strong></span>
|
|
381
|
+
</div>
|
|
382
|
+
|
|
383
|
+
<div class="chart">
|
|
384
|
+
<div class="chart-bar before" style="height: {{BEFORE_HEIGHT}}%;">
|
|
385
|
+
<div class="chart-value">{{TOTAL_PATTERNS}}</div>
|
|
386
|
+
<div class="chart-label">Before</div>
|
|
387
|
+
</div>
|
|
388
|
+
<div class="chart-bar after" style="height: {{AFTER_HEIGHT}}%;">
|
|
389
|
+
<div class="chart-value">{{CONSOLIDATED_PATTERNS}}</div>
|
|
390
|
+
<div class="chart-label">After</div>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<h3 style="margin-top: 40px;">Recommended Minimal Set</h3>
|
|
395
|
+
<div class="pattern-grid">
|
|
396
|
+
{{#EACH_CONSOLIDATED_PATTERN}}
|
|
397
|
+
<div class="pattern-item" style="border-color: #16a34a;">
|
|
398
|
+
<div class="pattern-preview" style="{{CONSOLIDATED_STYLE}}"></div>
|
|
399
|
+
<div><strong>{{CONSOLIDATED_NAME}}</strong></div>
|
|
400
|
+
<div style="color: #16a34a; font-size: 0.75rem;">Replaces {{REPLACES_COUNT}} variations</div>
|
|
401
|
+
</div>
|
|
402
|
+
{{/EACH_CONSOLIDATED_PATTERN}}
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
|
|
406
|
+
<!-- ROI Calculator -->
|
|
407
|
+
<h2>💰 Cost Analysis & ROI</h2>
|
|
408
|
+
<div class="roi-calculator">
|
|
409
|
+
<h3>Monthly Maintenance Costs</h3>
|
|
410
|
+
<div class="cost-row">
|
|
411
|
+
<span class="cost-label">Current: {{TOTAL_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
|
|
412
|
+
<span class="cost-value">${{MONTHLY_COST_BEFORE}}</span>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="cost-row">
|
|
415
|
+
<span class="cost-label">After: {{CONSOLIDATED_PATTERNS}} patterns × {{HOURS_PER_PATTERN}}h/month × ${{HOURLY_RATE}}/hour</span>
|
|
416
|
+
<span class="cost-value">${{MONTHLY_COST_AFTER}}</span>
|
|
417
|
+
</div>
|
|
418
|
+
<div class="cost-row">
|
|
419
|
+
<span class="cost-label">Monthly Savings</span>
|
|
420
|
+
<span class="cost-value">${{MONTHLY_SAVINGS}}</span>
|
|
421
|
+
</div>
|
|
422
|
+
|
|
423
|
+
<h3 style="margin-top: 30px;">Annual Projection</h3>
|
|
424
|
+
<div class="cost-row">
|
|
425
|
+
<span class="cost-label">Annual Maintenance Waste (Current)</span>
|
|
426
|
+
<span class="cost-value">${{ANNUAL_WASTE}}</span>
|
|
427
|
+
</div>
|
|
428
|
+
<div class="cost-row">
|
|
429
|
+
<span class="cost-label">Annual Maintenance Cost (After)</span>
|
|
430
|
+
<span class="cost-value">${{ANNUAL_COST_AFTER}}</span>
|
|
431
|
+
</div>
|
|
432
|
+
<div class="cost-row">
|
|
433
|
+
<span class="cost-label">Implementation Investment</span>
|
|
434
|
+
<span class="cost-value">${{IMPLEMENTATION_COST}}</span>
|
|
435
|
+
</div>
|
|
436
|
+
<div class="cost-row">
|
|
437
|
+
<span class="cost-label">Annual Savings</span>
|
|
438
|
+
<span class="cost-value">${{ANNUAL_SAVINGS}}</span>
|
|
439
|
+
</div>
|
|
440
|
+
|
|
441
|
+
<h3 style="margin-top: 30px;">ROI Metrics</h3>
|
|
442
|
+
<div class="cost-row">
|
|
443
|
+
<span class="cost-label">ROI Ratio</span>
|
|
444
|
+
<span class="cost-value">{{ROI_RATIO}}x</span>
|
|
445
|
+
</div>
|
|
446
|
+
<div class="cost-row">
|
|
447
|
+
<span class="cost-label">Breakeven Timeline</span>
|
|
448
|
+
<span class="cost-value">{{BREAKEVEN_DAYS}} days</span>
|
|
449
|
+
</div>
|
|
450
|
+
<div class="cost-row">
|
|
451
|
+
<span class="cost-label">3-Year Total Savings</span>
|
|
452
|
+
<span class="cost-value">${{THREE_YEAR_SAVINGS}}</span>
|
|
453
|
+
</div>
|
|
454
|
+
</div>
|
|
455
|
+
|
|
456
|
+
<!-- Migration Timeline -->
|
|
457
|
+
<h2>🗓️ Estimated Migration Timeline</h2>
|
|
458
|
+
<div class="timeline">
|
|
459
|
+
<div class="timeline-item">
|
|
460
|
+
<div class="timeline-marker">1</div>
|
|
461
|
+
<div class="timeline-content">
|
|
462
|
+
<div class="timeline-title">Phase 1: Foundation ({{PHASE_1_DURATION}})</div>
|
|
463
|
+
<div class="timeline-desc">Deploy token system, no visual changes. Zero risk.</div>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
<div class="timeline-item">
|
|
467
|
+
<div class="timeline-marker">2</div>
|
|
468
|
+
<div class="timeline-content">
|
|
469
|
+
<div class="timeline-title">Phase 2: High-Impact Patterns ({{PHASE_2_DURATION}})</div>
|
|
470
|
+
<div class="timeline-desc">Replace top 3 most-used components. Immediate ROI.</div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
<div class="timeline-item">
|
|
474
|
+
<div class="timeline-marker">3</div>
|
|
475
|
+
<div class="timeline-content">
|
|
476
|
+
<div class="timeline-title">Phase 3: Long-Tail Cleanup ({{PHASE_3_DURATION}})</div>
|
|
477
|
+
<div class="timeline-desc">Consolidate remaining patterns. Medium risk.</div>
|
|
478
|
+
</div>
|
|
479
|
+
</div>
|
|
480
|
+
<div class="timeline-item">
|
|
481
|
+
<div class="timeline-marker">4</div>
|
|
482
|
+
<div class="timeline-content">
|
|
483
|
+
<div class="timeline-title">Phase 4: Enforcement ({{PHASE_4_DURATION}})</div>
|
|
484
|
+
<div class="timeline-desc">CI/CD validation prevents regression. Low risk.</div>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
|
|
489
|
+
<div style="background: #eff6ff; padding: 20px; border-radius: 8px; margin-top: 30px;">
|
|
490
|
+
<p style="font-size: 1.1rem;"><strong>Total Estimated Timeline:</strong> {{TOTAL_DURATION}}</p>
|
|
491
|
+
<p style="color: #6b7280; margin-top: 10px;">Phased approach minimizes disruption. Each phase completes independently.</p>
|
|
492
|
+
</div>
|
|
493
|
+
|
|
494
|
+
<!-- Footer -->
|
|
495
|
+
<div style="margin-top: 60px; padding-top: 30px; border-top: 2px solid #e5e7eb; color: #6b7280; font-size: 0.9rem;">
|
|
496
|
+
<p><strong>Generated by Brad (Design System Architect)</strong></p>
|
|
497
|
+
<p>🤖 Generated with <a href="https://claude.com/claude-code" style="color: #2563eb;">Claude Code</a></p>
|
|
498
|
+
<p>For questions about this report, activate Brad: <code>*agent design-system</code></p>
|
|
499
|
+
</div>
|
|
500
|
+
</div>
|
|
501
|
+
</body>
|
|
502
|
+
</html>
|