Og Image
Generate a branded 1200x630 Open Graph / social share image (PNG) from an SVG template using sharp — no design tool needed. Produces the card that shows when a link is shared on LinkedIn, X/Twitter, Slack, Discord, iMessage. Use when a site has a blank/missing/ugly link preview, needs a proper og:image, or the user wants a generated social card matching their brand. Pairs with the seo-kit skill (…
Install
$ agentstack add skill-yahiasherif002-claude-skills-og-image ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-yahiasherif002-claude-skills-og-image) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
OG Image Generator
Generates a proper 1200×630 PNG social-share card from an SVG template, rasterized with sharp. No Figma/Photoshop needed, fully reproducible, and regenerable whenever the text changes.
Why
Social crawlers need a real raster image at an absolute URL for rich previews. A relative path or a square favicon gives blank/tiny previews. This builds a real branded 1200×630 card.
What it produces
scripts/gen-og.mjs— edits the config at the top (name, role, subline, footer), runs
node scripts/gen-og.mjs, and writes public/og-image.png (1200×630).
- A dark "IDE/terminal" themed card by default (window dots, gradient name, mono subtext) —
restyle the SVG freely.
How to use it
- Copy
references/gen-og.mjsinto the project'sscripts/. npm i -D sharp.- Edit the
CONFIGconstants at the top (name, role, subline, footer text, colors). - Run
node scripts/gen-og.mjs→ writespublic/og-image.png. Add an npm script
"gen:og": "node scripts/gen-og.mjs" for convenience.
- Wire the meta tags (or use the seo-kit skill) with an absolute URL:
```html
```
Notes
- Fonts: SVG text renders with fonts installed on the build machine. The template uses
Consolas, monospace and Segoe UI, Arial, sans-serif (safe on Windows/most CI). For a custom font, install it on the build env or embed it as base64 in the SVG.
- Absolute URL is mandatory for OG/Twitter images, and LinkedIn caches hard — re-scrape via
the Post Inspector after deploying.
- Verify the card at https://www.opengraph.xyz.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: Yahiasherif002
- Source: Yahiasherif002/claude-skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.