Communitygithub.com

SinghChinmayy/agent-skills

Habilidade para gerar imagens Open Graph para o Catalyst Bridge usando Chrome headless.

O que é agent-skills?

Esta habilidade encapsula todo o pipeline de geração de imagens Open Graph (OG) que anteriormente estava armazenado em `scripts/og/`. Ela fornece um comando reutilizável que pode ser invocado a partir da CLI Antigravity ou de outras automações. A habilidade processa dois layouts de template (A e B) usando Chrome headless, gerando PNGs de 1200×630 px e visualizações de 300 px, além de validar as dimensões. É útil para desenvolvedores que precisam gerar imagens OG consistentes e compatíveis com as diretrizes de design do projeto Catalyst Bridge, suportando customização via variáveis de ambiente. Funciona em conjunto com a CLI Antigravity e assegura conformidade com regras de tipografia, cores e espaçamento definidas no DESIGN.md.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Visão Geral

Esta habilidade encapsula todo o pipeline de geração de imagens OG que anteriormente estava armazenado em scripts/og/. Ela fornece um comando reutilizável que pode ser invocado a partir da CLI Antigravity ou de outras automações.

Arquivos

  • template-a.html – Layout com logotipo no canto superior esquerdo.
  • template-b.html – Layout com logotipo centralizado.
  • generate-og.sh – Script shell que renderiza ambos os templates com Chrome headless, cria PNGs de 1200 × 630 px e visualizações de 300 px, e valida as dimensões.

Uso

agy run og-generator generate

A habilidade colocará os PNGs resultantes em scripts/tmp/og/ (como antes) e, opcionalmente, copiará a variante escolhida para public/og-image.png.

Conformidade com o design

  • Usa a fonte Sora via @font-face referenciando a pasta de recursos somente leitura.
  • Largura do logotipo de 240 px respeita a regra de espaço livre do DESIGN.md.
  • Título com 84 px, domínio com 28 px – atende aos requisitos de destaque visual.
  • Cores e contraste são verificados conforme DESIGN.md (Ivory sobre Harbour Navy, 14.73:1).

Extensibilidade

Execute o script com VARIANT=A ou VARIANT=B para gerar um layout específico, ou modifique os templates dentro desta habilidade para futuras atualizações de marca.

Habilidades Relacionadas