Communitygithub.com

SinghChinmayy/agent-skills

Habilidad para generar imágenes Open Graph para Catalyst Bridge usando Chrome sin interfaz gráfica.

¿Qué es agent-skills?

Esta habilidad encapsula el pipeline completo de generación de imágenes OG (Open Graph) que anteriormente residía en `scripts/og/`. Proporciona un comando reutilizable que puede invocarse desde la CLI de Antigravity u otras automatizaciones. Soporta la renderización de dos diseños de plantilla HTML (variante A y B) usando Chrome en modo headless, produciendo imágenes PNG de 1200×630 px y vistas previas de 300 px. La habilidad valida las dimensiones de salida y, de manera opcional, copia la variante seleccionada a `public/og-image.png`. Está diseñada para cumplir con las guías de diseño visual de Catalyst Bridge, incluyendo el uso de la fuente Sora, un ancho de logo de 240 px y una relación de contraste de color verificada de 14.73:1. Ofrece flexibilidad mediante variables de entorno (`VARIANT`) y es fácilmente extensible para futuras actualizaciones de marca.

Compatible con~Claude Code~Codex CLI~Cursor✓Antigravity
npx skills add https://github.com/SinghChinmayy/agent-skills/tree/HEAD/skills/frontend/og-generator

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Resumen

Esta habilidad encapsula el pipeline completo de generación de imágenes OG que anteriormente residía en scripts/og/. Proporciona un comando reutilizable que puede invocarse desde la CLI de Antigravity u otras automatizaciones.

Archivos

  • template-a.html – Diseño con el logotipo en la esquina superior izquierda.
  • template-b.html – Diseño con el logotipo centrado.
  • generate-og.sh – Script de shell que renderiza ambas plantillas con Chrome sin interfaz gráfica, crea imágenes PNG de 1200×630 px y vistas previas de 300 px, y valida las dimensiones.

Uso

agy run og-generator generate

La habilidad colocará los PNG resultantes en scripts/tmp/og/ (igual que antes) y, de manera opcional, copiará la variante elegida a public/og-image.png.

Cumplimiento del diseño

  • Utiliza la fuente Sora mediante @font-face haciendo referencia a la carpeta de recursos de solo lectura.
  • El ancho del logotipo de 240 px respeta la regla de espacio libre de DESIGN.md.
  • Título 84 px, dominio 28 px: coincide con los requisitos de prominencia visual.
  • Los colores y el contraste se verifican contra DESIGN.md (Marfil sobre Azul Puerto, 14.73:1).

Extensibilidad

Ejecute el script con VARIANT=A o VARIANT=B para generar un diseño específico, o modifique las plantillas dentro de esta habilidad para futuras actualizaciones de marca.

Skills relacionados