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]