🌱 Empieza aquí · QC visual de entregables

¿Alguna vez tu asistente te dijo "quedó listo", abriste el archivo y el texto se salía, la fuente se veía fea o en el celular había que hacer scroll de lado para leer? Esta semilla le enseña a tu asistente a no darte nada por listo sin mirarlo de verdad primero: antes de entregarte una página HTML, un PDF, una imagen o un carrusel, toma una captura del archivo final —una en computadora y otra en teléfono—, la revisa contra un checklist, y si algo falla lo arregla y vuelve a mirar. Solo cuando pasa limpio te lo pasa. Menos "creo que se ve bien", más "lo revisé y aquí está la prueba".

Para instalarla

Abre esta carpeta con Claude Code o Cowork y dile a tu asistente:

"Siembra esta semilla 🌱"

Con eso basta de tu parte. Tu asistente hace el resto y al final te dice cómo comprobar que quedó. Vas a ver algunas palabras en inglés en la pantalla; ni caso, él te guía.

¿Otras formas de pedírselo? "instala esta semilla", "activa el QC visual", "haz el setup de esto". Te entiende igual.

Para el asistente que siembra 🤖

Este componente es una skill (habilidad): un método que el asistente carga y aplica al generar un entregable visible. No es un programa ejecutable ni un hook (gancho de automatización): no lleva chmod, no lleva entrada en settings.json y no ejecuta ningún script propio. Se "siembra" colocando el archivo del método donde tu plataforma cargue habilidades.

0. Verifica el requisito de captura (antes de sembrar)

El valor de esta skill depende de poder capturar el render real. Confirma que el entorno tiene una de estas herramientas (o avísale a la persona que la validación será manual, sin captura):

• Un MCP de automatización de navegador (por ejemplo chrome-devtools o Playwright), para HTML e imágenes.
• Una utilidad para rasterizar PDFs (por ejemplo pdftoppm), para PDFs.

En Claude Code, el MCP chrome-devtools suele estar disponible como plugin; si no lo está, sugiérele a la persona activarlo. Si no hay ninguna herramienta de captura, la skill sigue instalable y útil como checklist a mano, pero dilo con claridad.

1. Copia la habilidad a su lugar

El kernel trae un archivo:

• kernel/SKILL.md — el método en sí (el pipeline de QC visual).

Claude Code (macOS / Linux / Windows con Git Bash):

mkdir -p "$HOME/.claude/skills/visual-qa-deliverable"
cp kernel/SKILL.md "$HOME/.claude/skills/visual-qa-deliverable/SKILL.md"

Las carpetas dentro de ~/.claude/skills/ se cargan como habilidades disponibles. El asistente la invoca cuando detecta que acaba de generar un entregable visible o cuando le piden "revisa cómo se ve".

Cowork: coloca la carpeta visual-qa-deliverable/ (con SKILL.md dentro) en la ruta de habilidades de tu proyecto si la soporta. Si no, guarda SKILL.md dentro del proyecto y agrega en el archivo de instrucciones (CLAUDE.md) una línea que apunte a él: "Antes de declarar listo cualquier entregable visible, aplica el método de visual-qa-deliverable/SKILL.md: captura el render y revísalo contra su checklist." Recuerda que Cowork necesita, además, un MCP de navegador configurado para la captura.

Codex: esta skill no encaja de fábrica en Codex, porque su bucle depende de capturar screenshots e inspeccionarlos visualmente. Si aun así la quieres ahí, pega el contenido de SKILL.md dentro de AGENTS.md y úsalo como checklist manual (sin el paso automático de captura).

2. Verificación post-siembra (obligatoria)

a) El archivo quedó colocado (ejemplo Claude Code):

ls -la "$HOME/.claude/skills/visual-qa-deliverable/SKILL.md"; echo "exit=$?"

Salida esperada: una línea que lista el archivo (con su tamaño) y exit=0. Si sale No such file or directory, la copia no se hizo; repite el paso 1.

b) El método se aplica (prueba de comportamiento, en una conversación nueva): Pídele a tu asistente que genere un entregable visible pequeño —por ejemplo, "hazme una página HTML de una tarjeta de presentación"— y observa qué hace al terminar. La conducta correcta es que, antes de decir "listo", capture el render en escritorio y en móvil y te reporte que pasó (o no) el checklist, con los hallazgos y su arreglo. Si en vez de eso te dice "listo" sin haber mirado nada, el método no se cargó: revisa que SKILL.md esté en la carpeta de habilidades.

Cuando ambas partes pasen, avísale a la persona en una línea qué gana con esto.

✅ ¿Cómo sé que funcionó?

De ahora en adelante, cuando tu asistente esté por entregarte algo que se ve con los ojos —un reporte, un PDF, una imagen, un carrusel—, primero lo va a mirar de verdad: lo captura en computadora y en celular, lo revisa contra su checklist, y si encuentra un defecto lo arregla antes de dártelo. Vas a notar que te llegan menos sorpresas al abrir los archivos y que, cuando algo no se puede arreglar en tres intentos, te avisa en lugar de entregártelo roto. Es como tener a alguien revisando tu trabajo antes de que salga por la puerta. 🌱