Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Content Creation
Og Image Design
Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dyna...
skill openclawclawhub Free
Open Graph and social sharing image design with platform specs, text placement, and branding. Covers OG meta tags, Twitter cards, LinkedIn previews, and dyna...
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Item is unstable.
This item is timing out or returning errors right now. Review the source page and try again later.
Quick setup
- Wait for the source to recover or retry later.
- Review SKILL.md only after the source returns a real package.
- Do not rely on this source for automated install yet.
Package facts
- Download mode
- Manual review
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md
Validation
- Wait for the source to recover or retry later.
- Review SKILL.md only after the download returns a real package.
- Treat this source as transient until the upstream errors clear.
Install with your agent
Agent handoff
Use the source page and any available docs to guide the install because the item is currently unstable or timing out.
- Open the source page via Review source status.
- If you can obtain the package, extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the source page and extracted files.
New install
I tried to install a skill package from Yavira, but the item is currently unstable or timing out. Inspect the source page and any extracted docs, then tell me what you can confirm and any manual steps still required.
Upgrade existing
I tried to upgrade a skill package from Yavira, but the item is currently unstable or timing out. Compare the source page and any extracted docs with my current installation, then summarize what changed and what manual follow-up I still need.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 0.1.5
Provenance
- Publisher
- okaris
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
OG Image Design
Create social sharing images (Open Graph) via inference.sh CLI.
Quick Start
curl -fsSL https://cli.inference.sh | sh && infsh login # Generate an OG image with HTML-to-image infsh app run infsh/html-to-image --input '{ "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><h1 style=\"font-size:56px;margin:0;line-height:1.2\">How We Reduced Build Times by 80%</h1><p style=\"font-size:24px;opacity:0.8;margin-top:20px\">engineering.yourcompany.com</p></div></div>" }' Install note: The install script only detects your OS/architecture, downloads the matching binary from dist.inference.sh, and verifies its SHA-256 checksum. No elevated permissions or background processes. Manual install & verification available.
Platform Specifications
PlatformDimensionsAspect RatioFile SizeFormatFacebook1200 x 630 px1.91:1< 8 MBJPG, PNGTwitter/X (summary_large_image)1200 x 628 px1.91:1< 5 MBJPG, PNG, WEBP, GIFTwitter/X (summary)800 x 418 px1.91:1< 5 MBJPG, PNGLinkedIn1200 x 627 px1.91:1< 5 MBJPG, PNGDiscord1200 x 630 px1.91:1< 8 MBJPG, PNGSlack1200 x 630 px1.91:1โJPG, PNGiMessage1200 x 630 px1.91:1โJPG, PNG Universal safe bet: 1200 x 630 px, PNG or JPG, under 5 MB.
The Golden Layout
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโ โ โ โ โ โ โ โ โ โ Title Text (max 60 chars) โ โ Logo/ โ โ โ โ โโโโโโโโโโโโโโโโโโโ โ โ Visualโ โ โ โ Subtitle (max 100 chars) โ โ โ โ โ โ โ โ โ โ โ โ author / site name โ โโโโโโโโโ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ 1200 x 630 px
Text
RuleValueTitle font size48-64pxSubtitle font size20-28pxMax title length60 characters (gets truncated on some platforms)Max subtitle length100 charactersLine height1.2-1.3 for titlesFont weightBold/Black for title, Regular for subtitleText contrastWCAG AA minimum (4.5:1 ratio)
Safe Zones
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ 40px padding from all edges โโ โ โ โโ โ โ Content lives here โโ โ โ โโ โ โ โโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ 40px minimum padding from all edges Some platforms crop edges or add rounded corners Never put critical text in the outer 5%
Colors
Background TypeWhen to UseSolid brand colorConsistent series, corporateGradientModern, eye-catchingPhoto with overlayBlog posts, editorialDark backgroundBetter contrast, stands out in feeds Dark backgrounds outperform light in social feeds โ most feeds have white/light backgrounds, so dark OG images pop.
Blog Post
infsh app run infsh/html-to-image --input '{ "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;padding:60px;font-family:system-ui,sans-serif;color:white\"><div style=\"flex:1\"><p style=\"font-size:18px;text-transform:uppercase;letter-spacing:2px;opacity:0.8;margin:0\">Engineering Blog</p><h1 style=\"font-size:52px;margin:16px 0 0;line-height:1.2;font-weight:800\">How We Reduced Build Times by 80%</h1><p style=\"font-size:22px;opacity:0.9;margin-top:16px\">A deep dive into our CI/CD optimization</p></div></div>" }'
Product/Launch Announcement
infsh app run infsh/html-to-image --input '{ "html": "<div style=\"width:1200px;height:630px;background:#0f0f0f;display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:20px;color:#22c55e;text-transform:uppercase;letter-spacing:3px\">Now Available</p><h1 style=\"font-size:64px;margin:12px 0;font-weight:900\">DataFlow 2.0</h1><p style=\"font-size:24px;opacity:0.7\">Automated reports. Zero configuration.</p></div></div>" }'
Tutorial/How-To
infsh app run infsh/html-to-image --input '{ "html": "<div style=\"width:1200px;height:630px;background:linear-gradient(to right,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><div style=\"display:inline-block;background:#e74c3c;color:white;padding:8px 16px;border-radius:4px;font-size:16px;font-weight:bold;margin-bottom:16px\">TUTORIAL</div><h1 style=\"font-size:48px;margin:0;line-height:1.2\">Build a REST API in 10 Minutes with Node.js</h1><p style=\"font-size:20px;opacity:0.7;margin-top:16px\">Step-by-step guide with code examples</p></div></div>" }'
AI-Generated Visual OG
# When you want a striking visual instead of text-based infsh app run falai/flux-dev-lora --input '{ "prompt": "clean professional social sharing card, dark gradient background, abstract geometric shapes, modern tech aesthetic, minimal, no text, 1200x630 equivalent aspect ratio", "width": 1200, "height": 630 }'
OG Meta Tags Reference
<!-- Essential (Facebook, LinkedIn, Discord, Slack) --> <meta property="og:title" content="Title here (60 chars max)" /> <meta property="og:description" content="Description (155 chars max)" /> <meta property="og:image" content="https://yoursite.com/og-image.png" /> <meta property="og:url" content="https://yoursite.com/page" /> <meta property="og:type" content="article" /> <!-- Twitter/X specific --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Title here" /> <meta name="twitter:description" content="Description" /> <meta name="twitter:image" content="https://yoursite.com/og-image.png" /> <!-- Image dimensions (optional but recommended) --> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />
Twitter Card Types
Card TypeImage SizeUse Whensummary800 x 418 (small thumbnail)Short updates, linkssummary_large_image1200 x 628 (full width)Blog posts, articles, announcements Always use summary_large_image unless you have a specific reason not to โ the large image gets significantly more clicks.
Consistency System
For a blog or site with many pages, create a template system: ElementKeep ConsistentVaryBackground styleSame gradient or brand colorsโFont familySame fontโLayoutSame positioningโLogo/brandingSame placement (corner)โCategory badgeSame styleColor per categoryTitle textSame size/weightContent changes
Testing OG Images
ToolURLFacebook Debuggerdevelopers.facebook.com/tools/debug/Twitter Card Validatorcards-dev.twitter.com/validatorLinkedIn Post Inspectorlinkedin.com/post-inspector/OpenGraph.xyzopengraph.xyz # Research OG debugging tools infsh app run tavily/search-assistant --input '{ "query": "open graph image debugger preview tool test og:image" }'
Common Mistakes
MistakeProblemFixNo OG image at allPlatform shows random page element or nothingAlways set og:imageText too smallUnreadable on mobile previewsTitle minimum 48px at 1200px widthLight backgroundGets lost in white/light feedsUse dark or saturated backgroundsToo much textCluttered, overwhelmingMax: title + subtitle + brandImage too large (>5MB)Some platforms won't load itOptimize to under 1MB ideallyNo safe zone paddingText cropped on some platforms40px padding from all edgesDifferent image per platformInconsistent sharing experienceUse 1200x630 for everythingHTTP image URLMany platforms require HTTPSAlways serve OG images over HTTPSRelative image pathWon't resolve when sharedUse full absolute URL
Related Skills
npx skills add inference-sh/skills@ai-image-generation npx skills add inference-sh/skills@landing-page-design npx skills add inference-sh/skills@prompt-engineering Browse all apps: infsh app list
Category context
Writing, remixing, publishing, visual generation, and marketing content production.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
1 Docs
- SKILL.md