Modo Producción (QA + Fix)
Skill especializado en revisión de calidad y corrección rápida de apps/landings antes de presentar, grabar o publicar. Aplica un checklist fijo y ejecuta correcciones mínimas de alto impacto.
Cuándo usar este skill
- Cuando ya tenés algo generado (landing/app) y querés dejarlo "presentable"
- Cuando algo funciona "a medias" (móvil raro, imágenes rotas, botones sin acción, espaciados feos)
- Antes de enseñarlo a un cliente, grabarlo o publicarlo
- Cuando el usuario diga "revisá esto antes de publicar" o "dejalo listo para producción"
- Después de terminar desarrollo y antes de deploy
Inputs necesarios
Regla: Si falta alguno de estos inputs, PREGUNTAR antes de revisar.
| Input |
Descripción |
Obligatorio |
| Archivo principal |
Ruta del archivo (ej: index.html, src/App.tsx) |
✅ Sí |
| Objetivo de revisión |
"Lista para enseñar" o "Lista para publicar" |
✅ Sí |
| Restricciones |
No cambiar branding / copy / estructura / etc. |
✅ Sí |
Diferencia entre objetivos
| Objetivo |
Nivel de exigencia |
Foco |
| Lista para enseñar |
Funcional + presentable |
Que no haya errores visibles en demo |
| Lista para publicar |
Producción completa |
SEO, accesibilidad, performance, mobile |
Checklist de Calidad (orden fijo)
A) Funciona y se ve ✅
| # |
Verificación |
Crítico |
| A1 |
Abre la preview / localhost sin errores en consola |
🔴 Sí |
| A2 |
Imágenes cargan y no hay rutas rotas |
🔴 Sí |
| A3 |
Tipografías y estilos se aplican correctamente |
🔴 Sí |
| A4 |
Links y botones funcionan (no hay 404) |
🔴 Sí |
| A5 |
No hay errores de JavaScript en consola |
🔴 Sí |
B) Responsive (móvil primero) 📱
| # |
Verificación |
Crítico |
| B1 |
Se ve bien en móvil (no se corta contenido) |
🔴 Sí |
| B2 |
No hay scroll horizontal |
🔴 Sí |
| B3 |
Botones y textos tienen tamaños legibles (min 16px) |
🟡 Media |
| B4 |
Secciones con espaciado coherente |
🟡 Media |
| B5 |
Imágenes escalan correctamente |
🟡 Media |
C) Copy y UX básica ✍️
| # |
Verificación |
Crítico |
| C1 |
Titular claro y coherente con la propuesta |
🟡 Media |
| C2 |
CTAs consistentes (mismo verbo, misma intención) |
🟡 Media |
| C3 |
No hay texto "placeholder" tipo lorem ipsum |
🔴 Sí |
| C4 |
Información de contacto correcta |
🔴 Sí |
| C5 |
Sin typos evidentes |
🟡 Media |
D) Accesibilidad mínima ♿
| # |
Verificación |
Crítico |
| D1 |
Contraste razonable en textos (4.5:1 mínimo) |
🟡 Media |
| D2 |
Imágenes con atributo alt |
🟡 Media |
| D3 |
Estructura de headings (h1, h2, h3) lógica |
🟡 Media |
| D4 |
Formularios con labels asociados |
🟡 Media |
E) SEO básico (solo para "publicar") 🔍
| # |
Verificación |
Crítico |
| E1 |
Title tag presente y descriptivo |
🔴 Sí |
| E2 |
Meta description presente |
🟡 Media |
| E3 |
Un solo h1 por página |
🟡 Media |
| E4 |
URLs amigables (sin caracteres raros) |
🟡 Media |
Workflow
Paso 1: Diagnóstico rápido
- Abrir el proyecto/archivo
- Ejecutar checklist completo
- Generar lista de 5–10 problemas priorizados por criticidad (🔴 primero)
Paso 2: Plan de arreglos
- Listar máximo 8 cambios con formato:
- Qué: descripción del cambio
- Por qué: problema que resuelve
- Dónde: archivo y línea aproximada
Paso 3: Aplicar cambios
- Modificar archivos necesarios
- Aplicar correcciones de menor a mayor impacto
- Mantener cambios mínimos (no refactorizar todo)
Paso 4: Validación
- Volver a abrir preview
- Verificar checklist de nuevo
- Confirmar que no se rompió nada
Paso 5: Resumen final
- Listar cambios hechos
- Indicar qué queda opcional para mejorar después
Instrucciones
Reglas obligatorias
| Regla |
Razón |
| No cambiar estilo de marca si existe skill de marca activo |
Consistencia |
| No rehacer todo: corregir lo mínimo |
Velocidad + bajo riesgo |
| Si hay conflicto "bonito" vs "claro" → priorizar claridad |
UX > estética |
| Máximo 8 cambios por pasada |
Evitar romper cosas |
| Siempre validar después de cambios |
Detectar regresiones |
Prioridad de correcciones
1. 🔴 Errores críticos (app no funciona, errores JS, 404)
2. 🔴 Problemas de mobile (scroll horizontal, contenido cortado)
3. 🟡 UX/Copy (placeholders, typos, CTAs inconsistentes)
4. 🟡 Accesibilidad (contraste, alts, headings)
5. 🟢 Mejoras opcionales (optimizaciones, pulido visual)
Manejo de errores
- Si hay demasiados problemas (>15) → priorizar solo 🔴 críticos primero
- Si un cambio rompe otra cosa → revertir y buscar alternativa
- Si las restricciones impiden arreglar algo crítico → notificar al usuario
Output (formato exacto)
## 🔍 Diagnóstico
### Problemas encontrados (priorizados)
| # | Problema | Categoría | Criticidad | Archivo |
| --- | ------------- | --------- | ---------- | --------------- |
| 1 | [Descripción] | A/B/C/D/E | 🔴/🟡/🟢 | [archivo:línea] |
| 2 | [Descripción] | A/B/C/D/E | 🔴/🟡/🟢 | [archivo:línea] |
| ... | ... | ... | ... | ... |
**Total**: X problemas (Y críticos, Z medios)
---
## 🔧 Plan de Arreglos
| # | Qué cambio | Por qué | Dónde |
| --- | ---------- | ----------------------- | --------------- |
| 1 | [Cambio] | [Problema que resuelve] | [archivo:línea] |
| 2 | [Cambio] | [Problema que resuelve] | [archivo:línea] |
| ... | ... | ... | ... |
---
## ✅ Cambios Aplicados
1. ✅ [Cambio 1] - [archivo]
2. ✅ [Cambio 2] - [archivo]
3. ✅ [Cambio 3] - [archivo]
...
---
## 📊 Resultado
### Estado: ✅ OK para [enseñar/publicar] | ⚠️ Requiere más trabajo
### Checklist post-fix
| Categoría | Estado |
| ------------------- | -------- |
| A) Funciona y se ve | ✅/⚠️/❌ |
| B) Responsive | ✅/⚠️/❌ |
| C) Copy y UX | ✅/⚠️/❌ |
| D) Accesibilidad | ✅/⚠️/❌ |
| E) SEO (si aplica) | ✅/⚠️/❌ |
### Mejoras opcionales (para después)
- [ ] [Mejora 1]
- [ ] [Mejora 2]
- [ ] [Mejora 3]
---
## 📝 Notas
[Observaciones adicionales, advertencias o recomendaciones]
1---2name: modo-produccion3description: Revisa una app/landing, detecta problemas típicos, propone mejoras y aplica correcciones con un checklist fijo para dejarlo listo para enseñar o publicar.4---5
6# Modo Producción (QA + Fix)
7
8Skill especializado en revisión de calidad y corrección rápida de apps/landings antes de presentar, grabar o publicar. Aplica un checklist fijo y ejecuta correcciones mínimas de alto impacto.
9
10## Cuándo usar este skill
11
12- Cuando ya tenés algo generado (landing/app) y querés dejarlo "presentable"
13- Cuando algo funciona "a medias" (móvil raro, imágenes rotas, botones sin acción, espaciados feos)
14- Antes de enseñarlo a un cliente, grabarlo o publicarlo
15- Cuando el usuario diga "revisá esto antes de publicar" o "dejalo listo para producción"
16- Después de terminar desarrollo y antes de deploy
17
18## Inputs necesarios
19
20> **Regla**: Si falta alguno de estos inputs, PREGUNTAR antes de revisar.
21
22| Input | Descripción | Obligatorio |
23| ------------------------ | -------------------------------------------------- | ----------- |
24| **Archivo principal** | Ruta del archivo (ej: `index.html`, `src/App.tsx`) | ✅ Sí |
25| **Objetivo de revisión** | "Lista para enseñar" o "Lista para publicar" | ✅ Sí |
26| **Restricciones** | No cambiar branding / copy / estructura / etc. | ✅ Sí |
27
28### Diferencia entre objetivos
29
30| Objetivo | Nivel de exigencia | Foco |
31| ----------------------- | ----------------------- | --------------------------------------- |
32| **Lista para enseñar** | Funcional + presentable | Que no haya errores visibles en demo |
33| **Lista para publicar** | Producción completa | SEO, accesibilidad, performance, mobile |
34
35## Checklist de Calidad (orden fijo)
36
37### A) Funciona y se ve ✅
38
39| # | Verificación | Crítico |
40| --- | -------------------------------------------------- | ------- |
41| A1 | Abre la preview / localhost sin errores en consola | 🔴 Sí |
42| A2 | Imágenes cargan y no hay rutas rotas | 🔴 Sí |
43| A3 | Tipografías y estilos se aplican correctamente | 🔴 Sí |
44| A4 | Links y botones funcionan (no hay 404) | 🔴 Sí |
45| A5 | No hay errores de JavaScript en consola | 🔴 Sí |
46
47### B) Responsive (móvil primero) 📱
48
49| # | Verificación | Crítico |
50| --- | --------------------------------------------------- | -------- |
51| B1 | Se ve bien en móvil (no se corta contenido) | 🔴 Sí |
52| B2 | No hay scroll horizontal | 🔴 Sí |
53| B3 | Botones y textos tienen tamaños legibles (min 16px) | 🟡 Media |
54| B4 | Secciones con espaciado coherente | 🟡 Media |
55| B5 | Imágenes escalan correctamente | 🟡 Media |
56
57### C) Copy y UX básica ✍️
58
59| # | Verificación | Crítico |
60| --- | ------------------------------------------------ | -------- |
61| C1 | Titular claro y coherente con la propuesta | 🟡 Media |
62| C2 | CTAs consistentes (mismo verbo, misma intención) | 🟡 Media |
63| C3 | No hay texto "placeholder" tipo lorem ipsum | 🔴 Sí |
64| C4 | Información de contacto correcta | 🔴 Sí |
65| C5 | Sin typos evidentes | 🟡 Media |
66
67### D) Accesibilidad mínima ♿
68
69| # | Verificación | Crítico |
70| --- | -------------------------------------------- | -------- |
71| D1 | Contraste razonable en textos (4.5:1 mínimo) | 🟡 Media |
72| D2 | Imágenes con atributo alt | 🟡 Media |
73| D3 | Estructura de headings (h1, h2, h3) lógica | 🟡 Media |
74| D4 | Formularios con labels asociados | 🟡 Media |
75
76### E) SEO básico (solo para "publicar") 🔍
77
78| # | Verificación | Crítico |
79| --- | ------------------------------------- | -------- |
80| E1 | Title tag presente y descriptivo | 🔴 Sí |
81| E2 | Meta description presente | 🟡 Media |
82| E3 | Un solo h1 por página | 🟡 Media |
83| E4 | URLs amigables (sin caracteres raros) | 🟡 Media |
84
85## Workflow
86
87### Paso 1: Diagnóstico rápido
88
891. Abrir el proyecto/archivo
902. Ejecutar checklist completo
913. Generar lista de 5–10 problemas priorizados por criticidad (🔴 primero)
92
93### Paso 2: Plan de arreglos
94
954. Listar máximo 8 cambios con formato:
96 - **Qué**: descripción del cambio
97 - **Por qué**: problema que resuelve
98 - **Dónde**: archivo y línea aproximada
99
100### Paso 3: Aplicar cambios
101
1025. Modificar archivos necesarios
1036. Aplicar correcciones de menor a mayor impacto
1047. Mantener cambios mínimos (no refactorizar todo)
105
106### Paso 4: Validación
107
1088. Volver a abrir preview
1099. Verificar checklist de nuevo
11010. Confirmar que no se rompió nada
111
112### Paso 5: Resumen final
113
11411. Listar cambios hechos
11512. Indicar qué queda opcional para mejorar después
116
117## Instrucciones
118
119### Reglas obligatorias
120
121| Regla | Razón |
122| ---------------------------------------------------------- | ----------------------- |
123| No cambiar estilo de marca si existe skill de marca activo | Consistencia |
124| No rehacer todo: corregir lo mínimo | Velocidad + bajo riesgo |
125| Si hay conflicto "bonito" vs "claro" → priorizar claridad | UX > estética |
126| Máximo 8 cambios por pasada | Evitar romper cosas |
127| Siempre validar después de cambios | Detectar regresiones |
128
129### Prioridad de correcciones
130
131```
1321. 🔴 Errores críticos (app no funciona, errores JS, 404)
1332. 🔴 Problemas de mobile (scroll horizontal, contenido cortado)
1343. 🟡 UX/Copy (placeholders, typos, CTAs inconsistentes)
1354. 🟡 Accesibilidad (contraste, alts, headings)
1365. 🟢 Mejoras opcionales (optimizaciones, pulido visual)
137```
138
139### Manejo de errores
140
141- Si hay demasiados problemas (>15) → priorizar solo 🔴 críticos primero
142- Si un cambio rompe otra cosa → revertir y buscar alternativa
143- Si las restricciones impiden arreglar algo crítico → notificar al usuario
144
145## Output (formato exacto)
146
147```markdown
148## 🔍 Diagnóstico
149
150### Problemas encontrados (priorizados)
151
152| # | Problema | Categoría | Criticidad | Archivo |
153| --- | ------------- | --------- | ---------- | --------------- |
154| 1 | [Descripción] | A/B/C/D/E | 🔴/🟡/🟢 | [archivo:línea] |
155| 2 | [Descripción] | A/B/C/D/E | 🔴/🟡/🟢 | [archivo:línea] |
156| ... | ... | ... | ... | ... |
157
158**Total**: X problemas (Y críticos, Z medios)
159
160---
161
162## 🔧 Plan de Arreglos
163
164| # | Qué cambio | Por qué | Dónde |
165| --- | ---------- | ----------------------- | --------------- |
166| 1 | [Cambio] | [Problema que resuelve] | [archivo:línea] |
167| 2 | [Cambio] | [Problema que resuelve] | [archivo:línea] |
168| ... | ... | ... | ... |
169
170---
171
172## ✅ Cambios Aplicados
173
1741. ✅ [Cambio 1] - [archivo]
1752. ✅ [Cambio 2] - [archivo]
1763. ✅ [Cambio 3] - [archivo]
177 ...
178
179---
180
181## 📊 Resultado
182
183### Estado: ✅ OK para [enseñar/publicar] | ⚠️ Requiere más trabajo
184
185### Checklist post-fix
186
187| Categoría | Estado |
188| ------------------- | -------- |
189| A) Funciona y se ve | ✅/⚠️/❌ |
190| B) Responsive | ✅/⚠️/❌ |
191| C) Copy y UX | ✅/⚠️/❌ |
192| D) Accesibilidad | ✅/⚠️/❌ |
193| E) SEO (si aplica) | ✅/⚠️/❌ |
194
195### Mejoras opcionales (para después)
196
197- [ ] [Mejora 1]
198- [ ] [Mejora 2]
199- [ ] [Mejora 3]
200
201---
202
203## 📝 Notas
204
205[Observaciones adicionales, advertencias o recomendaciones]
206```