🌱 Empieza aquí · Reporte HTML editorial

Esta semilla le enseña a tu asistente a convertir lo que platicaste con él —o un tema que le pidas investigar— en un reporte HTML de una sola página: elegante, fácil de escanear, que se ve bien en la computadora y en el celular, y que muestra todo su contenido aunque el visor no ejecute JavaScript (por ejemplo, cuando abres el archivo desde el visor de documentos de una app de mensajería). Todo el estilo queda dentro del propio archivo, así que no depende de internet para verse bien.

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 coloca los archivos donde van y al final te dice cómo comprobar que quedó funcionando. 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", "pon a funcionar el generador de reportes HTML", "haz el setup de esto". Te entiende igual.

Para el asistente que siembra 🤖

Este componente es un skill (habilidad): un método que se activa cuando el usuario pide un reporte HTML. Se "siembra" colocando la carpeta kernel/ en el lugar donde tu plataforma carga las habilidades, renombrada como html-report.

1. Coloca la habilidad donde tu plataforma la lea

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

mkdir -p "$HOME/.claude/skills/html-report"
cp -R kernel/. "$HOME/.claude/skills/html-report/"

Cowork: copia la carpeta kernel/ dentro de la carpeta de habilidades de tu proyecto, renombrada como html-report (por ejemplo .claude/skills/html-report/). Si tu proyecto usa un archivo de instrucciones (CLAUDE.md), agrega una línea que apunte a la habilidad: "Cuando pida un reporte HTML, sigue el método de html-report/SKILL.md."

Dentro de kernel/ viajan cinco archivos que deben quedar juntos: SKILL.md (el método), plantilla-base.html (el esqueleto), tokens-marca.ejemplo.css (los colores y la tipografía), biblioteca-componentes.md (los bloques reutilizables) y checklist-diseno.md (el criterio de calidad).

2. Aterriza la marca (recomendado, opcional)

Abre tokens-marca.ejemplo.css (ya copiado dentro de la carpeta de la habilidad) y reemplaza los colores de ejemplo por los de la marca de la persona; ajusta la tipografía si tiene una fuente propia (deja siempre el respaldo del sistema al final). Con eso, todos los reportes salen con su identidad. Si no hay marca definida, los valores de ejemplo funcionan igual.

También conviene preguntar dónde quiere guardar sus reportes (una carpeta suya) y usarla como destino; el método deja ese destino como algo que se define en el momento.

3. Verificación post-siembra (obligatoria)

a) Los archivos quedaron colocados (ejemplo Claude Code):

ls -la "$HOME/.claude/skills/html-report/SKILL.md" "$HOME/.claude/skills/html-report/plantilla-base.html"; echo "exit=$?"

Salida esperada: las dos líneas listando los archivos (con su tamaño) y exit=0. Si sale No such file or directory, la copia no se hizo; repite el paso 1.

b) La habilidad produce el resultado (prueba de comportamiento): pídele a tu asistente algo como "toma este par de párrafos y hazme un reporte HTML" (dale un texto corto). Debe generar un solo archivo .html y, al abrirlo, tienes que ver el contenido completo. Comprueba lo clave del método con este chequeo rápido —el reporte debe verse aunque no corra el JavaScript:

# Cuenta cuántos "trozos ocultos por defecto" hay (debe ser 0):
grep -nE 'opacity:[[:space:]]*0([^.0-9]|$)' "<RUTA-DEL-HTML-GENERADO>" | grep -v anim | wc -l
# Confirma que el estilo va embebido (debe encontrar al menos un bloque <style>):
grep -c "<style" "<RUTA-DEL-HTML-GENERADO>"

La primera cuenta debe dar 0 (nada nace invisible esperando al JavaScript) y la segunda debe dar 1 o más (el estilo está dentro del archivo, no traído de fuera). El grep -v anim deja pasar el único caso legítimo: la regla de animación que solo se activa después de que el JavaScript la habilita, así que sin JavaScript nada se oculta. Si la primera da más de 0, el reporte se rompería en un visor sin JavaScript; pídele a tu asistente que aplique la "mejora progresiva" del método (Paso 7 del SKILL.md).

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

✅ ¿Cómo sé que funcionó?

Cada vez que le pidas a tu asistente "pásame esto en bonito" o "hazme un reporte de X", en lugar de un texto plano vas a recibir una página HTML lista para leer o compartir: con su portada, su índice, sus secciones ordenadas y, si pediste investigación, sus fuentes al pie. Se verá bien en tu compu y en tu celular, y cuando la mandes por mensajería, quien la abra verá el reporte completo, no solo la portada. Eso es todo. 🌱