Communitygithub.com

SinghChinmayy/agent-skills

Fähigkeit zum Generieren von Open-Graph-Bildern für Catalyst Bridge mittels Headless Chrome.

Was ist agent-skills?

Diese Fähigkeit kapselt die gesamte OG-Bildgenerierungs-Pipeline, die zuvor in `scripts/og/` gespeichert war. Sie stellt einen wiederverwendbaren Befehl bereit, der über die Antigravity CLI oder andere Automatisierungen aufgerufen werden kann. Die Fähigkeit unterstützt zwei Layout-Vorlagen (`template-a.html` mit Logo oben links und `template-b.html` mit zentriertem Logo) und verwendet ein Shell-Skript (`generate-og.sh`), das beide Vorlagen mit Headless Chrome rendert, 1200×630 px PNGs sowie 300 px Vorschauen erstellt und die Abmessungen validiert. Entwickler können die generierten Bilder in `scripts/tmp/og/` finden und die gewünschte Variante optional nach `public/og-image.png` kopieren. Die Fähigkeit ist nützlich für alle, die automatisch OG-konforme Social-Media-Vorschaubilder für Catalyst Bridge erstellen müssen, und sie ist vollständig designkonform, inklusive der Verwendung der Sora-Schriftart, eines Logos mit 240 px Breite und kontrastreichen Farben (Elfenbein auf Harbour Navy, Kontrastverhältnis 14.73:1). Sie lässt sich leicht erweitern, indem man die Vorlagen oder die Umgebungsvariable `VARIANT` anpasst.

Funktioniert mit~Claude Code~Codex CLI~Cursor✓Antigravity
npx skills add https://github.com/SinghChinmayy/agent-skills/tree/HEAD/skills/frontend/og-generator
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Übersicht

Diese Fähigkeit kapselt die gesamte OG‑Bild‑Generierungspipeline, die zuvor in scripts/og/ abgelegt war. Sie stellt einen wiederverwendbaren Befehl bereit, der über die Antigravity CLI oder andere Automatisierungen aufgerufen werden kann.

Dateien

  • template-a.html – Layout mit Logo oben links.
  • template-b.html – Layout mit zentriertem Logo.
  • generate-og.sh – Shell‑Skript, das beide Vorlagen mit Headless Chrome rendert, 1200 × 630 px PNGs und 300 px Vorschauen erstellt und die Abmessungen validiert.

Verwendung

agy run og-generator generate

Die Fähigkeit legt die resultierenden PNGs in scripts/tmp/og/ ab (wie bisher) und kopiert optional die gewählte Variante nach public/og-image.png.

Design‑Konformität

  • Verwendet die Sora‑Schriftart via @font-face unter Verweis auf den schreibgeschützten Ressourcenordner.
  • Die Logobreite von 240 px respektiert die Freiraumregel aus DESIGN.md.
  • Überschrift 84 px, Domain 28 px – entspricht den visuellen Hervorhebungsanforderungen.
  • Farben und Kontrast werden gegen DESIGN.md geprüft (Elfenbein auf Harbour Navy, 14.73:1).

Erweiterbarkeit

Führen Sie das Skript mit VARIANT=A oder VARIANT=B aus, um ein bestimmtes Layout zu generieren, oder passen Sie die Vorlagen innerhalb dieser Fähigkeit für zukünftige Branding‑Updates an.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community