name: tool-visual-explainer
description: Genera páginas HTML autocontenidas y bonitas que explican visualmente sistemas, código, planes, datos o análisis. Úsalo cuando necesites compartir un output complejo (diagrama, comparativa, recap de proyecto, plan review, tabla larga) o cuando otra skill (welcome-quick-win, seis-sombreros, marketing-positioning) cierre con material que el usuario querrá compartir por WhatsApp/Skool/email. Output: HTML5 sin dependencias externas, móvil-first, paleta sobria con acento naranja iAmasters.
tool-visual-explainer
Inspirado en la skill visual-explainer de la suite Anthropic + comunidad. Adaptada al patrón iAmasters OS con paleta y branding del repo.
Cuándo se invoca
- Otra skill cierra con un análisis o entregable que el usuario querrá compartir
- Usuario pide "hazme un HTML de esto", "ponlo bonito para compartir", "exporta esto"
- Usuario va a presentar el output a otra persona (cliente, socio, asesor, comunidad)
- Tablas largas (4+ filas, 3+ columnas) — mejor en HTML que ASCII
NO se invoca:
- Para outputs internos que solo lee Claude (sería gasto inútil)
- Cuando el usuario ya está en una herramienta visual (Notion, Figma, etc.)
- Para outputs <200 palabras donde markdown plano basta
Process
Paso 1 · Recibir input
La skill recibe (de otra skill o del usuario directamente):
- Título del documento
- Bloques de contenido: cada bloque tiene tipo (
hero, text, table, list, quote, metric-card, image, code, cta)
- Metadatos opcionales: fecha, autor, versión, branding sí/no
- Destino del archivo: ruta relativa al repo (default
projects/visual/<YYYY-MM-DD>-<titulo>.html)
Si la skill se invoca desde otra (ej. welcome-quick-win), esos campos vienen pre-poblados.
Si la invoca el usuario directamente, pregunta lo mínimo:
¿Qué quieres convertir en HTML compartible?
• Pega el contenido (markdown vale)
• O dime qué archivo/conversación procesamos
Paso 2 · Validar contenido
Antes de generar:
- Sin código JS embebido — el HTML debe funcionar en cualquier viewer (WhatsApp, email, Telegram que NO ejecutan JS)
- Sin dependencias CDN externas — todo inline (CSS embebido, fuentes system)
- Sin imágenes hosteadas en URL externa salvo si el usuario lo pide explícitamente — preferir SVG inline o emojis Unicode
- Verificar que ningún bloque tiene contenido > 5KB (si hay un texto enorme, sugerir resumirlo)
Paso 3 · Generar HTML
Usa este esqueleto base. Es deliberadamente simple — no compitas con sitios webs, prioriza legibilidad y portabilidad.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #1a1a1a;
background: #fafafa;
padding: 24px 16px;
}
.container {
max-width: 720px;
margin: 0 auto;
background: white;
border-radius: 12px;
padding: 32px 24px;
box-shadow: 0 (,,,);
}
{
: solid ;
: ;
: ;
}
{ : ; : ; : ; }
{ : ; : ; }
{
: ;
: ;
: ;
: ;
: solid ;
: ;
}
{ : ; : ; : ; : ; }
{ : ; }
, { : ; : ; }
{ : ; }
{
: solid ;
: ;
: ;
: ;
: ;
: ;
: italic;
}
{
: ;
: collapse;
: ;
: ;
}
, { : ; : left; : solid ; }
{ : ; : ; : ; }
{ : ; }
{
: ;
: solid ;
: ;
: ;
: ;
}
{ : ; : ; }
{ : ; : bold; : ; }
pre, {
: , Monaco, Consolas, monospace;
: ;
: ;
: ;
: ;
}
pre { : ; : auto; }
{
: (, , );
: white;
: ;
: ;
: ;
: center;
: ;
}
{ : white; : underline; }
{
: ;
: ;
: solid ;
: ;
: ;
: center;
}
(: ) {
{ : ; }
{ : ; : ; }
{ : ; }
}
{{ title }}
{{ subtitle }} · {{ date }}
{{ blocks }}
Generado por iAmasters OS · iamastersacademy.com
Paso 4 · Renderizar bloques
Para cada bloque del input, usa estos templates:
| Tipo | HTML |
|---|
text | <h2>{title}</h2><p>{body}</p> |
list | <h2>{title}</h2><ul>{items as <li>}</ul> (o <ol> si numerada) |
table | <h2>{title}</h2><table>{thead + tbody}</table> |
quote | <blockquote>{body}</blockquote> |
metric-card | <div class="metric-card"><div class="label">{label}</div><div class="value">{value}</div></div> |
code | <h2>{title}</h2><pre><code>{body}</code></pre> |
cta | <div class="cta">{body}</div> |
image | <img src="{src}" alt="{alt}" style="max-width:100%;border-radius:6px;"> (preferir SVG inline) |
Paso 5 · Guardar y reportar
Guarda en la ruta indicada (default projects/visual/<YYYY-MM-DD>-<titulo>.html).
Mensaje al usuario:
✓ HTML generado: projects/visual/<archivo>.html
Tamaño: <X KB>
Para compartir:
• Doble-click para abrir en navegador y verificar
• Adjuntar a WhatsApp/Telegram/email funciona directo
• Si lo subes a un servidor web, va sin tocar (HTML+CSS inline)
Paso 6 · Cierre y aprendizaje
Si el usuario reporta que el HTML quedó mal (colores, layout, elementos rotos), append en context/learnings.md bajo ## tool-visual-explainer:
- <fecha>: feedback del usuario sobre [aspecto]. Próxima vez: [ajuste].
Outputs
- Archivo HTML autocontenido en
projects/visual/<YYYY-MM-DD>-<titulo>.html (o ruta indicada)
- Mensaje al usuario con tamaño + instrucciones de compartir
Skills que llama
Ninguna directamente. Esta skill es invocada por otras (welcome-quick-win, seis-sombreros, marketing-positioning, marketing-content-repurposing, etc.) cuando esas necesitan un output compartible.
Edge cases
- Contenido > 100KB: dividir en múltiples HTMLs (uno por sección) o sugerir resumen.
- Tabla con >20 filas: añadir scroll horizontal + considerar paginación visual.
- Idioma del contenido distinto a castellano: respeta el idioma de input. El framework HTML (footer, meta) se mantiene en castellano salvo override.
- Usuario quiere paleta distinta a la naranja iAmasters: aceptar override en input (
brand_color: "#XYZ"). Default mantiene paleta del OS.
- HTML para email: muchos clientes email rompen estilos. Si destino es email, simplificar (pocos colores, sin gradient en CTA, tipografía estándar) y avisar al usuario.
Notas de diseño
- Móvil-first: el HTML se ve más en móviles (compartido por WhatsApp) que en desktop. Probar legibilidad en pantalla 360px ancho.
- Sin JS: aplicaciones de mensajería NO ejecutan JS. Si necesitas interactividad (toggle, accordion), usa
<details> y <summary> (HTML semántico, funciona sin JS).
- Paleta iAmasters: naranja
#ff8c42 (acento principal), morado #b794f4 (citas/secundario), gris #fafafa (fondo). Coherente con README badges.
- Sin tracking: no embebas Google Analytics ni similares. El HTML es del usuario.
