MohamedAbdallah-14/og-image
skills/og-image/SKILL.md
Generate an Open Graph / Twitter Card social unfurler image — 1200×630 JPEG/PNG, <5MB, with deterministic typography. Defaults to Satori + @resvg/resvg-js template rendering (no diffusion). Diffusion is optional and only for the hero art layer composited behind the template.
$ install --global
skillsauthnpx skillsauth add MohamedAbdallah-14/prompt-to-asset og-imageInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 22, 2026, 2:07 AM115.4s1 file scanned
SKILL.md
- name:
- og-image
- description:
- Generate an Open Graph / Twitter Card social unfurler image — 1200×630 JPEG/PNG, <5MB, with deterministic typography. Defaults to Satori + @resvg/resvg-js template rendering (no diffusion). Diffusion is optional and only for the hero art layer composited behind the template.
- trigger_phrases:
- [og image, open graph image, social card, twitter card, link preview]
OG image generation
Spec
- Dimensions: 1200×630 (OG 1.91:1) primary. Optional: 1080×1080 square (Instagram), 2:1 Twitter Card
summary_large_image. - Format: PNG or JPEG, <5MB, served over absolute HTTPS URL, no auth headers.
- Text: Deterministic — use Satori + real fonts. Never sample typography from a diffusion model for OG cards; headlines get garbled (see logo skill § 3-word rule).
- Headline: ≤8 words, 64–96pt. Subheadline: ≤15 words, 28–36pt.
- Contrast: WCAG AA min 4.5:1 (Slack/Discord render inside their own color backgrounds).
Architecture
Default: template-based, no diffusion. The OG engine is:
- Satori — converts JSX or HTML+CSS to SVG with real font shaping.
@resvg/resvg-js— rasterizes the SVG to PNG deterministically, no system fonts leaked.- Optional hero layer — if brief says "with illustration," diffusion-generate a 1200×630 background and composite the Satori-rendered text layer on top.
@vercel/og— reference Satori wrapper if running inside Next.js/Vercel.
brief + brand bundle
↓
pick template (centered hero, left-aligned, minimal)
↓
fill template slots:
- title (required)
- subtitle (optional)
- logo.svg (optional, brand bundle)
- accent color (brand palette)
- background: solid | gradient | image
↓
[optional] generate background image (diffusion, see skills/hero or skills/illustration)
↓
satori(jsx) → SVG
↓
resvg.render(svg) → 1200×630 PNG
↓
validate: dimensions exact, <5MB, contrast, no-text-cropped
Templates (canonical)
| Template id | Layout | Use for |
|---|---|---|
| centered_hero | title + subtitle centered; logo bottom-left | launch posts, generic pages |
| left_title | title left-aligned; hero image right | feature pages, blog posts |
| minimal | title + brand color block | landing pages |
| quote | pull-quote + attribution | blog, documentation |
| product_card | logo + product name + tagline + accent bar | product pages |
Templates live as JSX/TSX strings in packages/mcp-server/src/templates/og/*.tsx.
Validation
- Width = 1200, height = 630 exactly.
- File <5MB.
- No text in outer 60px gutter (Slack/Twitter crop aggressively).
- WCAG AA contrast between headline and background (measure average luminance in the text-bbox region).
- If brand logo included: logo has a minimum size of 60×60px rendered.
Output
og/
├── og.png # 1200×630 PNG
├── og.jpg # 1200×630 JPEG (higher compression)
├── og-2x.png # 2400×1260 retina (optional)
└── meta.json
Related Skills
MohamedAbdallah-14/ui-mockup-prompt
testing
VerifiedTrustedCommunity
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
4SKILL.mdUpdated May 7, 2026
MohamedAbdallah-14/ui-mockup-prompt
testing
VerifiedTrustedCommunity
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
4SKILL.mdUpdated May 7, 2026
MohamedAbdallah-14/t2i-prompt-dialect
development
VerifiedTrustedCommunity
Rewrite an asset brief into the exact prompt dialect of the target image model (OpenAI gpt-image-1, Google Imagen/Gemini, SDXL, Flux.1/Flux.2, Midjourney, Ideogram, Recraft). Handles negative-prompt translation, token budgets, transparency quirks, brand-palette injection, and text-in-image ceilings so that `asset_generate_*` submissions succeed on the first try.
2SKILL.mdUpdated Apr 21, 2026
MohamedAbdallah-14/logo
development
VerifiedTrustedCommunity
Generate a production-grade logo (primary brand mark). Returns RGBA PNG master + SVG vector + monochrome variant. Route by text-length and per-model ceiling. Strong-text models render multi-word and even paragraph-length wordmarks reliably; weak-text models composite SVG type post-render.
2SKILL.mdUpdated Apr 21, 2026