@saulwade/swl-ses 1.5.1 → 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 (133) hide show
  1. package/CLAUDE.md +225 -209
  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 +207 -4
  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 +94 -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 +121 -4
  37. package/habilidades/testing-python/SKILL.md +340 -340
  38. package/habilidades/web-fetcher-routing/SKILL.md +75 -75
  39. package/hooks/check-update.js +31 -3
  40. package/hooks/claudemd-bloat-detector.js +161 -161
  41. package/hooks/lib/agent-routing.js +107 -107
  42. package/hooks/lib/auto-consolidator.js +335 -335
  43. package/hooks/lib/error-classifier.js +308 -308
  44. package/hooks/lib/merkle-audit.js +96 -96
  45. package/hooks/lib/provenance-tracker.js +191 -191
  46. package/hooks/lib/rate-limit-tracker.js +253 -253
  47. package/hooks/lib/resource-quota.js +122 -122
  48. package/hooks/lib/retry-jitter.js +165 -165
  49. package/hooks/lib/security-net.js +201 -201
  50. package/hooks/lib/skill-auditor.js +588 -588
  51. package/hooks/lib/sync-status.js +228 -228
  52. package/hooks/lib/taint-tracker.js +107 -107
  53. package/hooks/lib/text-similarity.js +241 -241
  54. package/hooks/lib/toon-compressor.js +245 -245
  55. package/hooks/registro-turnos.js +209 -209
  56. package/hooks/sugerir-regenerar-inventario.js +170 -170
  57. package/hooks/validar-formato-post-subagente.js +140 -140
  58. package/hooks/validar-memoria-hook.js +218 -218
  59. package/instintos/prompt-appendices.yaml +57 -57
  60. package/manifiestos/agent-output-schemas.json +57 -57
  61. package/manifiestos/modulos.json +1324 -1321
  62. package/manifiestos/skills-lock.json +1114 -1114
  63. package/package.json +2 -2
  64. package/plantillas/auditor-veto-template.md +105 -105
  65. package/plantillas/github-workflows/README.md +47 -47
  66. package/plantillas/github-workflows/release-please.yml +44 -44
  67. package/plantillas/github-workflows/swl-ci.yml +107 -107
  68. package/plantillas/github-workflows/swl-security.yml +51 -51
  69. package/plugin.json +353 -351
  70. package/reglas/analisis-previo-tareas-grandes.md +172 -172
  71. package/reglas/arreglar-al-detectar.md +147 -147
  72. package/reglas/fragmentos-compartidos.md +152 -152
  73. package/reglas/harness-claude-code.md +213 -213
  74. package/reglas/registro-componentes-nuevos.md +192 -0
  75. package/reglas/usar-context7.md +226 -226
  76. package/schemas/diary-entry.schema.json +80 -80
  77. package/scripts/actualizar.js +110 -1
  78. package/scripts/audit-tools/audit-history.js +330 -330
  79. package/scripts/audit-tools/bundle-tracker.js +290 -290
  80. package/scripts/audit-tools/canary-monitor.js +352 -352
  81. package/scripts/audit-tools/code-profiler.js +605 -605
  82. package/scripts/audit-tools/dep-doctor.js +320 -320
  83. package/scripts/audit-tools/env-validator.js +206 -206
  84. package/scripts/audit-tools/lib/fs-walk.js +48 -48
  85. package/scripts/audit-tools/lib/output.js +23 -23
  86. package/scripts/audit-tools/migration-checker.js +392 -392
  87. package/scripts/audit-tools/pentest-scanner.js +1436 -1436
  88. package/scripts/benchmark-memoria.js +167 -167
  89. package/scripts/configurar-branch-protection.js +418 -418
  90. package/scripts/derivar-feature-list.js +489 -489
  91. package/scripts/detectar-aprendizajes-duplicados.js +151 -151
  92. package/scripts/doctor.js +27 -0
  93. package/scripts/field-report.js +199 -199
  94. package/scripts/generar-checklists-consolidados.js +273 -273
  95. package/scripts/generar-inventario.js +420 -420
  96. package/scripts/generar-matriz-lenguajes.js +271 -271
  97. package/scripts/lib/artefactos-python.js +43 -43
  98. package/scripts/lib/benchmark-metrics.js +160 -160
  99. package/scripts/lib/budget-enforcer.js +252 -252
  100. package/scripts/lib/configurar-ci.js +380 -380
  101. package/scripts/lib/contadores-inventario.js +217 -217
  102. package/scripts/lib/detectar-stack-detallado.js +307 -307
  103. package/scripts/lib/diary-entry.js +234 -234
  104. package/scripts/lib/eval-metrics-store.js +218 -218
  105. package/scripts/lib/eval-quality.js +171 -171
  106. package/scripts/lib/eval-schemas.js +144 -144
  107. package/scripts/lib/eval-self-correct.js +106 -106
  108. package/scripts/lib/eval-validator.js +185 -185
  109. package/scripts/lib/expandir-targets.js +71 -71
  110. package/scripts/lib/jaccard-similarity.js +98 -98
  111. package/scripts/lib/longmemeval-runner.js +125 -125
  112. package/scripts/lib/mcp_config.py +127 -0
  113. package/scripts/lib/npm-version.js +261 -261
  114. package/scripts/lib/paquetes-conocidos.js +50 -50
  115. package/scripts/lib/prompt-builder.js +264 -264
  116. package/scripts/lib/rrf-fusion.js +175 -175
  117. package/scripts/lib/scoring-instintos.js +277 -277
  118. package/scripts/lib/semantic-search.js +252 -252
  119. package/scripts/lib/toml-merge.js +204 -204
  120. package/scripts/lib/transformadores/codex.js +375 -375
  121. package/scripts/lib/transformadores/cursor.js +359 -359
  122. package/scripts/limpiar-artefactos-python.js +131 -131
  123. package/scripts/mcp-orchestrator.py +8 -18
  124. package/scripts/mcp-pool-manager.py +12 -23
  125. package/scripts/mcp-server/README.md +170 -170
  126. package/scripts/mcp-server/auth.js +105 -105
  127. package/scripts/mcp-server/cache.js +106 -106
  128. package/scripts/mcp-server/telemetry.js +78 -78
  129. package/scripts/migrar-csv-a-array.js +168 -168
  130. package/scripts/migrar-fase-dominio.js +201 -201
  131. package/scripts/publicar.js +511 -511
  132. package/scripts/run-eval.js +141 -141
  133. 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>