More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    og image generator

    1

    Generate 1200x630 social share images and audit Open Graph meta tags for correct link previews.

    Free

    1 useSecurity scanned
    og image generator

    og image generator

    Example session with this skill installed

    Generate a dark theme OG image for my new 'API Docs' page. Use 'MyBrand' as the site name and save it to the public folder. The page is at https://mysite.com/docs.

    • Read your context and instructions
    • Compiled the og image generator
    • Generated the image

    I have generated the Open Graph image and the corresponding meta tags for your API Docs page. The image uses a dark theme with your brand name and the specific page title.

    Share Preview Assets

    Asset TypePathStatus
    OG Imagepublic/og-image.pngGenerated (1200x630)
    Meta Tagspublic/og-image-tags.htmlGenerated
    Contrast Ratio7.5:1Pass (AAA)
    <!-- Copy these tags into the <head> of /docs -->
<title>API Docs | MyBrand</title>
<meta name="description" content="Technical documentation for MyBrand APIs.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://mysite.com/docs">
<meta property="og:title" content="API Docs | MyBrand">
<meta property="og:description" content="Technical documentation for MyBrand APIs.">
<meta property="og:image" content="https://mysite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="API Docs for MyBrand">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://mysite.com/docs">
<meta name="twitter:title" content="API Docs | MyBrand">
<meta name="twitter:description" content="Technical documentation for MyBrand APIs.">
<meta name="twitter:image" content="https://mysite.com/og-image.png">

    Next steps

    1. Move the generated og-image.png to your production server's root public directory.
    2. Paste the HTML tags above into the <head> section of your documentation page.
    3. Once deployed, use the X (Twitter) Card Validator or Facebook Sharing Debugger to clear their cache.

    og-image.png

    PNG · 1536×1024

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Social media share previews often break because of relative URLs, missing tags, or incorrect image dimensions. This skill automates the generation of Open Graph (OG) images and validates your meta tags to ensure links look professional on Slack, LinkedIn, X, and Facebook. It generates 1200x630 assets directly from your project metadata, eliminating the need for manual design work or external SaaS subscriptions.

    What it does

    • Image generation Creates 1200x630 PNG or JPEG files from titles, brand names, and logos.
    • Tag auditing Scans local HTML files to detect missing or broken og: and twitter: tags.
    • Accessibility automation Generates og:image:alt text and checks for WCAG-compliant color contrast.
    • Metadata export Produces ready-to-paste HTML snippets with absolute URL requirements.
    • Design themes Supports dark, light, and custom hex-color themes with dynamic text scaling.

    How it works

    1. Analyze project The agent identifies the page title, brand assets, and local file structure.
    2. Audit existing tags Run the check.mjs script to find current metadata errors or missing assets.
    3. Generate assets Execute the generate.mjs script with parameters for text, branding, and output paths.
    4. Implementation Copy the generated HTML tags into the <head> section of your templates.

    Frameworks & tools

    Requires Node.js 18 or newer and uses the sharp image processing library. It works with any web framework that allows custom <head> tags, including Next.js, Astro, Remix, and static HTML.

    Why this beats prompting it yourself

    Generic LLM prompts often fail to produce valid absolute URLs or correctly formatted image files. This skill uses specific scripts to enforce social platform specs (1200x630) and performs technical audits that a text-only prompt cannot verify.

    Use cases

    • Fixing broken previews Resolve blank or generic link cards on social platforms.
    • Branding new pages Rapidly generate matching share images for blog posts or landing pages.
    • Pre-deployment audits Verify all share tags are correct before shipping to production.
    • Accessibility compliance Ensure share images have descriptive alt text and readable contrast.

    Known limitations

    Does not support photo editing or illustration. It requires a local Node.js environment and does not fetch or scrape live URLs; checks are performed on local files only.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    1 use

    Times used to date

    Free forever

    No account required to browse

    Trust & safety

    Security scan

    Security scan passed 10 days ago

    • Free with an Agensi account

    Requires

    Node.js

    Listed10 days ago

    What's inside

    Frequently Asked Questions