og-image

Imagen OG

Cada archivo que utiliza esta habilidad vive en su propia carpeta, junto a este SKILL.md, y las rutas aquí son relativas a esa carpeta. No necesita nada de otras habilidades u otras carpetas, así que no vayas a buscarlas. A menos que el usuario nombre otro lugar, guarda todo lo que crea en out/og-image/ dentro del proyecto actual.

Una tarjeta para compartir vende el producto en el medio segundo en que alguien se desplaza junto a un enlace. La fórmula: marca, un título corto y el producto real debajo, recortado por el borde inferior. Nada más.

Estilo de referencia (ver references/):

• control-panel.png — marca centrada en la parte superior, un título de una línea muy grande, luego la ventana de la aplicación (barra lateral, encabezado, lista) comenzando aproximadamente a un tercio de la altura, sangrando por la parte inferior, con un panel de detalles flotante a la derecha.
• pulse.png — misma composición construida a partir del diseño real de Pulse: barra lateral con iconos de proyecto, encabezado de búsqueda, página de proyecto con pestañas, filas de feed y el carril de actividad.

Reglas

1. Producto real, nunca inventado. Muestra la aplicación tal como se entrega hoy. Usa solo pantallas, pestañas, etiquetas, estados y funcionalidades que existan en el código. Sin métricas, gráficos o funcionalidades inventadas, incluso si el texto de la página de inicio habla de ellos. Si una demostración de marketing en el sitio muestra algo que la aplicación no tiene, no copies esa demostración.
2. El mensaje proviene del sitio actual. Toma el eslogan y el contenido de muestra de la página de inicio en vivo (su héroe, sus datos de demostración) a menos que el usuario dé un título. Si el usuario da un título, úsalo textualmente (un punto final está bien para un titular; pregunta si no estás seguro).
3. Parece vivo, no generado. Los datos de demostración deben leerse como la semana de un equipo real:
   • Personas de aspecto real con las fotos de avatar del proyecto si las incluye (por ejemplo, public/landing/people); usa los nombres que el usuario solicite.
   • Las entidades tienen iconos o imágenes, no letras simples (por ejemplo, avatares de proyecto como mosaicos de iconos coloreados con los acentos del tema del producto).
   • Las cuadrículas de actividad, gráficos y conteos siguen ritmos reales: ocupado de lunes a viernes con variación, fines de semana mayormente vacíos con algún día ligero, la semana actual cortada hasta hoy, etiquetas de mes donde realmente comienzan los meses. Nunca un patrón uniforme o obviamente repetitivo.
   • Horas relativas, ID, ramas y estados en los formatos que usa la aplicación.
4. El texto lidera. El título es el elemento más grande y oscuro de la tarjeta y legible en tamaño de miniatura (~60-72px en una tarjeta de 1200px, una línea, seguimiento ajustado, la fuente de visualización del producto). El producto se encuentra debajo y nunca se superpone a él.
5. Solo el estilo del producto. Fondo, fuentes, colores, radios, sombras de los tokens del proyecto. Un brillo muy suave acentuado detrás del título está bien; sin nuevas paletas, degradados ni imágenes de stock.

Pasos

1. Descubrir

• Lee el componente de la página de inicio/aterrizaje y el README para obtener el eslogan, el nombre del producto y el contenido de muestra.
• Encuentra el shell real de la aplicación (diseño, barra lateral, encabezado) y la pantalla principal (rutas + componentes). Anota los nombres de clase exactos, tamaños de texto, etiquetas de pestañas, tonos de chips de estado, estados vacíos/cargando que debes evitar.
• Encuentra tokens (CSS global / tema), fuentes, biblioteca de iconos, componente de marca, activos de avatar.
• Verifica lo que ya existe: una ruta/imagen OG existente, meta og:image en la raíz o el encabezado de la página, configuración de WEB_URL/URL del sitio.

2. Construir una ruta de renderizado

Construye la tarjeta como una página real en el stack del proyecto para que use las fuentes, tokens y componentes reales (no un SVG dibujado a mano, no una captura de pantalla de producción con datos privados):

• Una ruta, por ejemplo /og/<pagina> (TanStack routes/og.<pagina>.tsx, Next app/og/<pagina>/page.tsx, etc.), noindex, sin cromo de aplicación.
• Un componente (por ejemplo, og-image.tsx junto a la página de aterrizaje a la que pertenece) que renderiza un marco fijo de 1200×630 con data-og-frame en la raíz y overflow-hidden.
• Diseño:
  • Marca centrada, ~48px desde la parte superior.
  • Título centrado debajo.
  • Ventana de aplicación comenzando ~200–240px desde la parte superior, ~60px desde la izquierda, más ancha que el espacio restante para que sangre por el borde derecho o inferior. Esquinas superiores redondeadas, borde fino, sombra del producto.
• Dentro de la ventana, reconstruye la pantalla real como una réplica estática: shell (barra lateral + encabezado) más la pantalla principal. Copia el marcado y las clases de los componentes reales; cita los archivos fuente en un comentario de encabezado. Solo props estáticas, sin consultas, sin temporizadores.
• Para ajustar un diseño de tamaño completo en la tarjeta, coloca la ventana en su ancho natural (por ejemplo, 1200px) y redúcela con zoom (0.85–0.95). zoom también escala top/left en el mismo elemento, así que divide los desplazamientos previstos por el factor de zoom.
• Reutiliza primitivas de demostración existentes de la página de aterrizaje (avatares, insignias de origen, colores de calor) cuando coincidan con la aplicación real.

3. Capturar

Inicia el servidor de desarrollo (o reutiliza uno), luego:

node <carpeta de esta habilidad>/scripts/capture.mjs \
  --url http://localhost:<puerto>/og/<pagina> \
  --out out/og-image/og-<pagina>.png

Abre una ventana de 1200×630 a 2x (→ 2400×1260), prefiere movimiento reducido, oculta superposiciones de desarrollo (herramientas de desarrollo de TanStack/Next/Vite/Astro, tostadores), espera fuentes y captura [data-og-frame]. Usa --hide para cualquier otra superposición y --wait si las imágenes cargan lentamente.

Problemas comunes:

• Colisiones de puerto: verifica que el puerto realmente esté sirviendo esta aplicación (lsof -iTCP:<puerto> -sTCP:LISTEN, y mira el título de la página). Otra aplicación local en [::1]:<puerto> puede responder silenciosamente a localhost. Elige un puerto libre si es necesario.
• Un servidor de desarrollo en segundo plano iniciado desde una sesión de agente muere con la sesión. Desvincúlalo (nohup … & disown) si el usuario necesita seguir previsualizando.
• No ocultes superposiciones con reglas amplias :has() / body > div; pueden ocultar la raíz de la aplicación y agotar el tiempo de espera de la captura.

4. Mirarlo

Abre el PNG y revísalo como un diseñador, a tamaño completo e imaginándolo a 500px de ancho:

• Título en una línea, nada superpuesto, espacio generoso sobre la ventana.
• Sin insignias de herramientas de desarrollo, cursores, tostadas, esqueletos de carga ni animaciones a medio reproducir.
• Nada recortado de manera incómoda (una etiqueta cortada a media palabra en un borde lateral, un chip medio oculto). El sangrado inferior/derecho es intencional; los bordes izquierdo y superior de la ventana son completamente visibles.
• Los datos parecen reales (regla 3). Itera hasta que lo hagan, luego copia el PNG final en public/.

5. Conectar las metaetiquetas

En la página a la que pertenece la imagen (o la raíz para una tarjeta de todo el sitio):

• og:type, og:title, og:description
• og:image — URL absoluta, construida a partir de la configuración de URL del sitio (por ejemplo, ${WEB_URL}/og-<pagina>.png)
• og:image:width 2400, og:image:height 1260, og:image:alt describiendo el título + lo que muestra la captura del producto
• twitter:card = summary_large_image, twitter:title, twitter:description, twitter:image

Verifica que las etiquetas aparezcan en el HTML servido (curl -s <pagina> | grep og:image) y que la URL del PNG devuelva 200 image/png.

Salida

Informa al usuario:

• dónde viven el PNG y la ruta/componente de renderizado
• cómo regenerar: el comando de captura anterior
• qué muestra la imagen y qué pantallas/componentes reales replica
• cualquier cosa que no provenga de datos reales (nombres de muestra, proyectos), y que la variable de entorno de la URL del sitio debe apuntar al dominio de producción para que los rastreadores puedan resolver la imagen