@saulwade/swl-ses 1.5.0 → 1.5.2

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 (134) hide show
  1. package/CLAUDE.md +19 -2
  2. package/README.md +561 -561
  3. package/agentes/arquitecto-swl.md +33 -1
  4. package/agentes/nemesis-auditor-swl.md +59 -19
  5. package/bin/swl-mcp-server.js +214 -214
  6. package/comandos/swl/.evolved.json +22 -22
  7. package/comandos/swl/contribuir.md +233 -233
  8. package/comandos/swl/nemesis.md +230 -56
  9. package/gateway/lib/event-channel.js +191 -191
  10. package/habilidades/backend-production-resilience/SKILL.md +288 -288
  11. package/habilidades/benchmark-memoria/SKILL.md +186 -186
  12. package/habilidades/diagrama-arquitectura/assets/template.html +276 -276
  13. package/habilidades/doubt-driven-review/SKILL.md +171 -171
  14. package/habilidades/doubt-driven-review/recursos/EXAMPLES.md +130 -130
  15. package/habilidades/ejecutar-task-iterativo/SKILL.md +278 -278
  16. package/habilidades/eval-framework/SKILL.md +212 -212
  17. package/habilidades/feynman-auditor-swl/SKILL.md +123 -123
  18. package/habilidades/feynman-auditor-swl/recursos/preguntas-language-agnostic.md +108 -108
  19. package/habilidades/harness-claude-code/SKILL.md +299 -299
  20. package/habilidades/infra-github-actions/SKILL.md +166 -166
  21. package/habilidades/legacy-code-rescue/SKILL.md +267 -267
  22. package/habilidades/manejo-errores/.evolved.json +8 -8
  23. package/habilidades/meta-skills-estandar/SKILL.md +225 -1
  24. package/habilidades/meta-skills-estandar/recursos/convencion-examples.md +93 -93
  25. package/habilidades/meta-skills-estandar/recursos/skills-as-agents.md +163 -163
  26. package/habilidades/nemesis-evaluacion-json/SKILL.md +266 -0
  27. package/habilidades/nemesis-redistribuir/SKILL.md +341 -0
  28. package/habilidades/node-experto/SKILL.md +105 -4
  29. package/habilidades/patrones-python/SKILL.md +229 -229
  30. package/habilidades/patrones-python/recursos/patrones-avanzados.md +469 -469
  31. package/habilidades/planear-fase/SKILL.md +319 -319
  32. package/habilidades/protocolo-revision-swl/SKILL.md +350 -276
  33. package/habilidades/release-semver/.evolved.json +8 -8
  34. package/habilidades/state-inconsistency-auditor-swl/SKILL.md +166 -166
  35. package/habilidades/state-inconsistency-auditor-swl/recursos/coupled-state-patterns.md +147 -147
  36. package/habilidades/tdd-workflow/SKILL.md +150 -4
  37. package/habilidades/testing-python/SKILL.md +340 -340
  38. package/habilidades/verificar-trabajo/SKILL.md +8 -3
  39. package/habilidades/web-fetcher-routing/SKILL.md +75 -75
  40. package/hooks/check-update.js +31 -3
  41. package/hooks/claudemd-bloat-detector.js +161 -161
  42. package/hooks/lib/agent-routing.js +107 -107
  43. package/hooks/lib/auto-consolidator.js +335 -335
  44. package/hooks/lib/error-classifier.js +308 -308
  45. package/hooks/lib/merkle-audit.js +96 -96
  46. package/hooks/lib/provenance-tracker.js +191 -191
  47. package/hooks/lib/rate-limit-tracker.js +253 -253
  48. package/hooks/lib/resource-quota.js +122 -122
  49. package/hooks/lib/retry-jitter.js +165 -165
  50. package/hooks/lib/security-net.js +201 -201
  51. package/hooks/lib/skill-auditor.js +588 -588
  52. package/hooks/lib/sync-status.js +228 -228
  53. package/hooks/lib/taint-tracker.js +107 -107
  54. package/hooks/lib/text-similarity.js +241 -241
  55. package/hooks/lib/toon-compressor.js +245 -245
  56. package/hooks/registro-turnos.js +209 -209
  57. package/hooks/sugerir-regenerar-inventario.js +170 -170
  58. package/hooks/validar-formato-post-subagente.js +140 -140
  59. package/hooks/validar-memoria-hook.js +218 -218
  60. package/instintos/prompt-appendices.yaml +57 -57
  61. package/manifiestos/agent-output-schemas.json +57 -57
  62. package/manifiestos/modulos.json +1324 -1321
  63. package/manifiestos/skills-lock.json +1114 -1114
  64. package/package.json +2 -2
  65. package/plantillas/auditor-veto-template.md +105 -105
  66. package/plantillas/github-workflows/README.md +47 -47
  67. package/plantillas/github-workflows/release-please.yml +44 -44
  68. package/plantillas/github-workflows/swl-ci.yml +107 -107
  69. package/plantillas/github-workflows/swl-security.yml +51 -51
  70. package/plugin.json +353 -351
  71. package/reglas/analisis-previo-tareas-grandes.md +172 -172
  72. package/reglas/arreglar-al-detectar.md +147 -147
  73. package/reglas/fragmentos-compartidos.md +152 -152
  74. package/reglas/harness-claude-code.md +213 -213
  75. package/reglas/registro-componentes-nuevos.md +192 -0
  76. package/reglas/usar-context7.md +226 -226
  77. package/schemas/diary-entry.schema.json +80 -80
  78. package/scripts/actualizar.js +110 -1
  79. package/scripts/audit-tools/audit-history.js +330 -330
  80. package/scripts/audit-tools/bundle-tracker.js +290 -290
  81. package/scripts/audit-tools/canary-monitor.js +352 -352
  82. package/scripts/audit-tools/code-profiler.js +605 -605
  83. package/scripts/audit-tools/dep-doctor.js +320 -320
  84. package/scripts/audit-tools/env-validator.js +206 -206
  85. package/scripts/audit-tools/lib/fs-walk.js +48 -48
  86. package/scripts/audit-tools/lib/output.js +23 -23
  87. package/scripts/audit-tools/migration-checker.js +392 -392
  88. package/scripts/audit-tools/pentest-scanner.js +1436 -1436
  89. package/scripts/benchmark-memoria.js +167 -167
  90. package/scripts/configurar-branch-protection.js +418 -418
  91. package/scripts/derivar-feature-list.js +489 -489
  92. package/scripts/detectar-aprendizajes-duplicados.js +151 -151
  93. package/scripts/doctor.js +58 -4
  94. package/scripts/field-report.js +199 -199
  95. package/scripts/generar-checklists-consolidados.js +273 -273
  96. package/scripts/generar-inventario.js +420 -420
  97. package/scripts/generar-matriz-lenguajes.js +271 -271
  98. package/scripts/lib/artefactos-python.js +43 -43
  99. package/scripts/lib/benchmark-metrics.js +160 -160
  100. package/scripts/lib/budget-enforcer.js +252 -252
  101. package/scripts/lib/configurar-ci.js +380 -380
  102. package/scripts/lib/contadores-inventario.js +217 -217
  103. package/scripts/lib/detectar-stack-detallado.js +307 -307
  104. package/scripts/lib/diary-entry.js +234 -234
  105. package/scripts/lib/eval-metrics-store.js +218 -218
  106. package/scripts/lib/eval-quality.js +171 -171
  107. package/scripts/lib/eval-schemas.js +144 -144
  108. package/scripts/lib/eval-self-correct.js +106 -106
  109. package/scripts/lib/eval-validator.js +185 -185
  110. package/scripts/lib/expandir-targets.js +71 -71
  111. package/scripts/lib/jaccard-similarity.js +98 -98
  112. package/scripts/lib/longmemeval-runner.js +125 -125
  113. package/scripts/lib/mcp_config.py +127 -0
  114. package/scripts/lib/npm-version.js +261 -261
  115. package/scripts/lib/paquetes-conocidos.js +50 -50
  116. package/scripts/lib/prompt-builder.js +264 -264
  117. package/scripts/lib/rrf-fusion.js +175 -175
  118. package/scripts/lib/scoring-instintos.js +277 -277
  119. package/scripts/lib/semantic-search.js +252 -252
  120. package/scripts/lib/toml-merge.js +204 -204
  121. package/scripts/lib/transformadores/codex.js +375 -375
  122. package/scripts/lib/transformadores/cursor.js +359 -359
  123. package/scripts/limpiar-artefactos-python.js +131 -131
  124. package/scripts/mcp-orchestrator.py +8 -18
  125. package/scripts/mcp-pool-manager.py +12 -23
  126. package/scripts/mcp-server/README.md +170 -170
  127. package/scripts/mcp-server/auth.js +105 -105
  128. package/scripts/mcp-server/cache.js +106 -106
  129. package/scripts/mcp-server/telemetry.js +78 -78
  130. package/scripts/migrar-csv-a-array.js +168 -168
  131. package/scripts/migrar-fase-dominio.js +201 -201
  132. package/scripts/publicar.js +511 -511
  133. package/scripts/run-eval.js +141 -141
  134. package/scripts/validar-userland-vacio.js +110 -110
package/habilidades/diagrama-arquitectura/assets/template.html CHANGED
@@ -1,276 +1,276 @@
1
- <!DOCTYPE html>
2
- <html lang="es">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>[NOMBRE DEL PROYECTO] — Diagrama de Arquitectura</title>
7
- <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
8
- <style>
9
- * {
10
- margin: 0;
11
- padding: 0;
12
- box-sizing: border-box;
13
- }
14
-
15
- body {
16
- font-family: 'JetBrains Mono', monospace;
17
- background: #020617;
18
- min-height: 100vh;
19
- padding: 2rem;
20
- color: white;
21
- }
22
-
23
- .container {
24
- max-width: 1200px;
25
- margin: 0 auto;
26
- }
27
-
28
- .header {
29
- margin-bottom: 2rem;
30
- }
31
-
32
- .header-row {
33
- display: flex;
34
- align-items: center;
35
- gap: 1rem;
36
- margin-bottom: 0.5rem;
37
- }
38
-
39
- .pulse-dot {
40
- width: 12px;
41
- height: 12px;
42
- background: #22d3ee;
43
- border-radius: 50%;
44
- animation: pulse 2s infinite;
45
- }
46
-
47
- @keyframes pulse {
48
- 0%, 100% { opacity: 1; }
49
- 50% { opacity: 0.5; }
50
- }
51
-
52
- h1 {
53
- font-size: 1.5rem;
54
- font-weight: 700;
55
- letter-spacing: -0.025em;
56
- }
57
-
58
- .subtitle {
59
- color: #94a3b8;
60
- font-size: 0.875rem;
61
- margin-left: 1.75rem;
62
- }
63
-
64
- .diagram-container {
65
- background: rgba(15, 23, 42, 0.5);
66
- border-radius: 1rem;
67
- border: 1px solid #1e293b;
68
- padding: 1.5rem;
69
- overflow-x: auto;
70
- }
71
-
72
- svg {
73
- width: 100%;
74
- min-width: 900px;
75
- display: block;
76
- }
77
-
78
- .cards {
79
- display: grid;
80
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
81
- gap: 1rem;
82
- margin-top: 2rem;
83
- }
84
-
85
- .card {
86
- background: rgba(15, 23, 42, 0.5);
87
- border-radius: 0.75rem;
88
- border: 1px solid #1e293b;
89
- padding: 1.25rem;
90
- }
91
-
92
- .card-header {
93
- display: flex;
94
- align-items: center;
95
- gap: 0.5rem;
96
- margin-bottom: 0.75rem;
97
- }
98
-
99
- .card-dot {
100
- width: 8px;
101
- height: 8px;
102
- border-radius: 50%;
103
- }
104
-
105
- .card-dot.cyan { background: #22d3ee; }
106
- .card-dot.emerald { background: #34d399; }
107
- .card-dot.violet { background: #a78bfa; }
108
- .card-dot.amber { background: #fbbf24; }
109
- .card-dot.rose { background: #fb7185; }
110
-
111
- .card h3 {
112
- font-size: 0.875rem;
113
- font-weight: 600;
114
- }
115
-
116
- .card ul {
117
- list-style: none;
118
- color: #94a3b8;
119
- font-size: 0.75rem;
120
- }
121
-
122
- .card li {
123
- margin-bottom: 0.375rem;
124
- }
125
-
126
- .footer {
127
- text-align: center;
128
- margin-top: 1.5rem;
129
- color: #475569;
130
- font-size: 0.75rem;
131
- }
132
- </style>
133
- </head>
134
- <body>
135
- <div class="container">
136
- <!-- Encabezado -->
137
- <div class="header">
138
- <div class="header-row">
139
- <div class="pulse-dot"></div>
140
- <h1>[NOMBRE DEL PROYECTO] — Arquitectura</h1>
141
- </div>
142
- <p class="subtitle">[Descripción del subtítulo]</p>
143
- </div>
144
-
145
- <!-- Diagrama principal -->
146
- <div class="diagram-container">
147
- <svg viewBox="0 0 1000 680">
148
- <!-- Definiciones -->
149
- <defs>
150
- <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
151
- <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
152
- </marker>
153
- <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
154
- <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
155
- </pattern>
156
- </defs>
157
-
158
- <!-- Grilla de fondo -->
159
- <rect width="100%" height="100%" fill="url(#grid)" />
160
-
161
- <!-- ===============================================================
162
- COMPONENTES — Copiar y personalizar estos patrones
163
- =============================================================== -->
164
-
165
- <!-- Componente externo/genérico -->
166
- <rect x="30" y="280" width="100" height="50" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/>
167
- <text x="80" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Usuarios</text>
168
- <text x="80" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">Navegador/Móvil</text>
169
-
170
- <!-- Componente de seguridad -->
171
- <rect x="30" y="80" width="100" height="60" rx="6" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1.5"/>
172
- <text x="80" y="105" fill="white" font-size="11" font-weight="600" text-anchor="middle">Auth Provider</text>
173
- <text x="80" y="121" fill="#94a3b8" font-size="9" text-anchor="middle">OAuth 2.0</text>
174
-
175
- <!-- Límite de región/cloud -->
176
- <rect x="160" y="40" width="820" height="620" rx="12" fill="rgba(251, 191, 36, 0.05)" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
177
- <text x="172" y="58" fill="#fbbf24" font-size="10" font-weight="600">Región Cloud</text>
178
-
179
- <!-- Servicio cloud -->
180
- <rect x="200" y="280" width="110" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>
181
- <text x="255" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">CDN</text>
182
- <text x="255" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">CloudFront</text>
183
-
184
- <!-- Backend -->
185
- <rect x="510" y="280" width="110" height="50" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/>
186
- <text x="565" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Server</text>
187
- <text x="565" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">FastAPI :8000</text>
188
-
189
- <!-- Base de datos -->
190
- <rect x="700" y="280" width="120" height="50" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
191
- <text x="760" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Base de datos</text>
192
- <text x="760" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">PostgreSQL</text>
193
-
194
- <!-- Frontend -->
195
- <rect x="200" y="520" width="200" height="110" rx="8" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1.5"/>
196
- <text x="300" y="545" fill="white" font-size="12" font-weight="600" text-anchor="middle">Frontend</text>
197
- <text x="300" y="565" fill="#94a3b8" font-size="9" text-anchor="middle">React + TypeScript</text>
198
-
199
- <!-- ===============================================================
200
- FLECHAS
201
- =============================================================== -->
202
- <line x1="130" y1="305" x2="198" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
203
- <text x="164" y="299" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS</text>
204
-
205
- <line x1="310" y1="305" x2="508" y2="305" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/>
206
- <line x1="620" y1="305" x2="698" y2="305" stroke="#a78bfa" stroke-width="1.5" marker-end="url(#arrowhead)"/>
207
- <text x="655" y="299" fill="#94a3b8" font-size="9">TLS</text>
208
-
209
- <!-- ===============================================================
210
- LEYENDA
211
- =============================================================== -->
212
- <text x="720" y="70" fill="white" font-size="10" font-weight="600">Leyenda</text>
213
-
214
- <rect x="720" y="82" width="16" height="10" rx="2" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1"/>
215
- <text x="742" y="90" fill="#94a3b8" font-size="8">Frontend</text>
216
-
217
- <rect x="720" y="98" width="16" height="10" rx="2" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1"/>
218
- <text x="742" y="106" fill="#94a3b8" font-size="8">Backend</text>
219
-
220
- <rect x="720" y="114" width="16" height="10" rx="2" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1"/>
221
- <text x="742" y="122" fill="#94a3b8" font-size="8">Servicio Cloud</text>
222
-
223
- <rect x="720" y="130" width="16" height="10" rx="2" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1"/>
224
- <text x="742" y="138" fill="#94a3b8" font-size="8">Base de datos</text>
225
-
226
- <rect x="720" y="146" width="16" height="10" rx="2" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1"/>
227
- <text x="742" y="154" fill="#94a3b8" font-size="8">Seguridad</text>
228
- </svg>
229
- </div>
230
-
231
- <!-- Tarjetas informativas -->
232
- <div class="cards">
233
- <div class="card">
234
- <div class="card-header">
235
- <div class="card-dot rose"></div>
236
- <h3>Seguridad</h3>
237
- </div>
238
- <ul>
239
- <li>- Autenticación OAuth 2.0</li>
240
- <li>- TLS en tránsito</li>
241
- <li>- Cifrado en reposo</li>
242
- </ul>
243
- </div>
244
-
245
- <div class="card">
246
- <div class="card-header">
247
- <div class="card-dot amber"></div>
248
- <h3>Infraestructura</h3>
249
- </div>
250
- <ul>
251
- <li>- CDN para activos estáticos</li>
252
- <li>- Auto-scaling horizontal</li>
253
- <li>- Monitoreo centralizado</li>
254
- </ul>
255
- </div>
256
-
257
- <div class="card">
258
- <div class="card-header">
259
- <div class="card-dot violet"></div>
260
- <h3>Datos</h3>
261
- </div>
262
- <ul>
263
- <li>- PostgreSQL principal</li>
264
- <li>- Backups automatizados</li>
265
- <li>- Réplica de lectura</li>
266
- </ul>
267
- </div>
268
- </div>
269
-
270
- <!-- Pie -->
271
- <p class="footer">
272
- [Nombre del proyecto] — Generado con swl-ses
273
- </p>
274
- </div>
275
- </body>
276
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>[NOMBRE DEL PROYECTO] — Diagrama de Arquitectura</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ body {
16
+ font-family: 'JetBrains Mono', monospace;
17
+ background: #020617;
18
+ min-height: 100vh;
19
+ padding: 2rem;
20
+ color: white;
21
+ }
22
+
23
+ .container {
24
+ max-width: 1200px;
25
+ margin: 0 auto;
26
+ }
27
+
28
+ .header {
29
+ margin-bottom: 2rem;
30
+ }
31
+
32
+ .header-row {
33
+ display: flex;
34
+ align-items: center;
35
+ gap: 1rem;
36
+ margin-bottom: 0.5rem;
37
+ }
38
+
39
+ .pulse-dot {
40
+ width: 12px;
41
+ height: 12px;
42
+ background: #22d3ee;
43
+ border-radius: 50%;
44
+ animation: pulse 2s infinite;
45
+ }
46
+
47
+ @keyframes pulse {
48
+ 0%, 100% { opacity: 1; }
49
+ 50% { opacity: 0.5; }
50
+ }
51
+
52
+ h1 {
53
+ font-size: 1.5rem;
54
+ font-weight: 700;
55
+ letter-spacing: -0.025em;
56
+ }
57
+
58
+ .subtitle {
59
+ color: #94a3b8;
60
+ font-size: 0.875rem;
61
+ margin-left: 1.75rem;
62
+ }
63
+
64
+ .diagram-container {
65
+ background: rgba(15, 23, 42, 0.5);
66
+ border-radius: 1rem;
67
+ border: 1px solid #1e293b;
68
+ padding: 1.5rem;
69
+ overflow-x: auto;
70
+ }
71
+
72
+ svg {
73
+ width: 100%;
74
+ min-width: 900px;
75
+ display: block;
76
+ }
77
+
78
+ .cards {
79
+ display: grid;
80
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
81
+ gap: 1rem;
82
+ margin-top: 2rem;
83
+ }
84
+
85
+ .card {
86
+ background: rgba(15, 23, 42, 0.5);
87
+ border-radius: 0.75rem;
88
+ border: 1px solid #1e293b;
89
+ padding: 1.25rem;
90
+ }
91
+
92
+ .card-header {
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 0.5rem;
96
+ margin-bottom: 0.75rem;
97
+ }
98
+
99
+ .card-dot {
100
+ width: 8px;
101
+ height: 8px;
102
+ border-radius: 50%;
103
+ }
104
+
105
+ .card-dot.cyan { background: #22d3ee; }
106
+ .card-dot.emerald { background: #34d399; }
107
+ .card-dot.violet { background: #a78bfa; }
108
+ .card-dot.amber { background: #fbbf24; }
109
+ .card-dot.rose { background: #fb7185; }
110
+
111
+ .card h3 {
112
+ font-size: 0.875rem;
113
+ font-weight: 600;
114
+ }
115
+
116
+ .card ul {
117
+ list-style: none;
118
+ color: #94a3b8;
119
+ font-size: 0.75rem;
120
+ }
121
+
122
+ .card li {
123
+ margin-bottom: 0.375rem;
124
+ }
125
+
126
+ .footer {
127
+ text-align: center;
128
+ margin-top: 1.5rem;
129
+ color: #475569;
130
+ font-size: 0.75rem;
131
+ }
132
+ </style>
133
+ </head>
134
+ <body>
135
+ <div class="container">
136
+ <!-- Encabezado -->
137
+ <div class="header">
138
+ <div class="header-row">
139
+ <div class="pulse-dot"></div>
140
+ <h1>[NOMBRE DEL PROYECTO] — Arquitectura</h1>
141
+ </div>
142
+ <p class="subtitle">[Descripción del subtítulo]</p>
143
+ </div>
144
+
145
+ <!-- Diagrama principal -->
146
+ <div class="diagram-container">
147
+ <svg viewBox="0 0 1000 680">
148
+ <!-- Definiciones -->
149
+ <defs>
150
+ <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
151
+ <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
152
+ </marker>
153
+ <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
154
+ <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
155
+ </pattern>
156
+ </defs>
157
+
158
+ <!-- Grilla de fondo -->
159
+ <rect width="100%" height="100%" fill="url(#grid)" />
160
+
161
+ <!-- ===============================================================
162
+ COMPONENTES — Copiar y personalizar estos patrones
163
+ =============================================================== -->
164
+
165
+ <!-- Componente externo/genérico -->
166
+ <rect x="30" y="280" width="100" height="50" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/>
167
+ <text x="80" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Usuarios</text>
168
+ <text x="80" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">Navegador/Móvil</text>
169
+
170
+ <!-- Componente de seguridad -->
171
+ <rect x="30" y="80" width="100" height="60" rx="6" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1.5"/>
172
+ <text x="80" y="105" fill="white" font-size="11" font-weight="600" text-anchor="middle">Auth Provider</text>
173
+ <text x="80" y="121" fill="#94a3b8" font-size="9" text-anchor="middle">OAuth 2.0</text>
174
+
175
+ <!-- Límite de región/cloud -->
176
+ <rect x="160" y="40" width="820" height="620" rx="12" fill="rgba(251, 191, 36, 0.05)" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
177
+ <text x="172" y="58" fill="#fbbf24" font-size="10" font-weight="600">Región Cloud</text>
178
+
179
+ <!-- Servicio cloud -->
180
+ <rect x="200" y="280" width="110" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>
181
+ <text x="255" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">CDN</text>
182
+ <text x="255" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">CloudFront</text>
183
+
184
+ <!-- Backend -->
185
+ <rect x="510" y="280" width="110" height="50" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/>
186
+ <text x="565" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Server</text>
187
+ <text x="565" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">FastAPI :8000</text>
188
+
189
+ <!-- Base de datos -->
190
+ <rect x="700" y="280" width="120" height="50" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
191
+ <text x="760" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Base de datos</text>
192
+ <text x="760" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">PostgreSQL</text>
193
+
194
+ <!-- Frontend -->
195
+ <rect x="200" y="520" width="200" height="110" rx="8" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1.5"/>
196
+ <text x="300" y="545" fill="white" font-size="12" font-weight="600" text-anchor="middle">Frontend</text>
197
+ <text x="300" y="565" fill="#94a3b8" font-size="9" text-anchor="middle">React + TypeScript</text>
198
+
199
+ <!-- ===============================================================
200
+ FLECHAS
201
+ =============================================================== -->
202
+ <line x1="130" y1="305" x2="198" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
203
+ <text x="164" y="299" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS</text>
204
+
205
+ <line x1="310" y1="305" x2="508" y2="305" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/>
206
+ <line x1="620" y1="305" x2="698" y2="305" stroke="#a78bfa" stroke-width="1.5" marker-end="url(#arrowhead)"/>
207
+ <text x="655" y="299" fill="#94a3b8" font-size="9">TLS</text>
208
+
209
+ <!-- ===============================================================
210
+ LEYENDA
211
+ =============================================================== -->
212
+ <text x="720" y="70" fill="white" font-size="10" font-weight="600">Leyenda</text>
213
+
214
+ <rect x="720" y="82" width="16" height="10" rx="2" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1"/>
215
+ <text x="742" y="90" fill="#94a3b8" font-size="8">Frontend</text>
216
+
217
+ <rect x="720" y="98" width="16" height="10" rx="2" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1"/>
218
+ <text x="742" y="106" fill="#94a3b8" font-size="8">Backend</text>
219
+
220
+ <rect x="720" y="114" width="16" height="10" rx="2" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1"/>
221
+ <text x="742" y="122" fill="#94a3b8" font-size="8">Servicio Cloud</text>
222
+
223
+ <rect x="720" y="130" width="16" height="10" rx="2" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1"/>
224
+ <text x="742" y="138" fill="#94a3b8" font-size="8">Base de datos</text>
225
+
226
+ <rect x="720" y="146" width="16" height="10" rx="2" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1"/>
227
+ <text x="742" y="154" fill="#94a3b8" font-size="8">Seguridad</text>
228
+ </svg>
229
+ </div>
230
+
231
+ <!-- Tarjetas informativas -->
232
+ <div class="cards">
233
+ <div class="card">
234
+ <div class="card-header">
235
+ <div class="card-dot rose"></div>
236
+ <h3>Seguridad</h3>
237
+ </div>
238
+ <ul>
239
+ <li>- Autenticación OAuth 2.0</li>
240
+ <li>- TLS en tránsito</li>
241
+ <li>- Cifrado en reposo</li>
242
+ </ul>
243
+ </div>
244
+
245
+ <div class="card">
246
+ <div class="card-header">
247
+ <div class="card-dot amber"></div>
248
+ <h3>Infraestructura</h3>
249
+ </div>
250
+ <ul>
251
+ <li>- CDN para activos estáticos</li>
252
+ <li>- Auto-scaling horizontal</li>
253
+ <li>- Monitoreo centralizado</li>
254
+ </ul>
255
+ </div>
256
+
257
+ <div class="card">
258
+ <div class="card-header">
259
+ <div class="card-dot violet"></div>
260
+ <h3>Datos</h3>
261
+ </div>
262
+ <ul>
263
+ <li>- PostgreSQL principal</li>
264
+ <li>- Backups automatizados</li>
265
+ <li>- Réplica de lectura</li>
266
+ </ul>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Pie -->
271
+ <p class="footer">
272
+ [Nombre del proyecto] — Generado con swl-ses
273
+ </p>
274
+ </div>
275
+ </body>
276
+ </html>