Skills
.Work. You
Rest

opengraph-image

Community

Generate stylish Open Graph images instantly

Design & Creative#tailwind#image-generation#nuxt#og-image#social-preview#opengraph#html2png
Authornsheaps
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Generating consistent, readable Open Graph images for Nuxt pages is time consuming and often inconsistent across a project; this Skill automates discovery, design, rendering, and storage of social preview images so pages have professional OG previews without manual design or screenshot workflows.

Core Features & Use Cases

  • Automated Discovery: Scans app/pages/ for Vue pages, skips dynamic routes, and identifies pages missing og images to present actionable options.
  • Design-First HTML Templates: Produces single-file 1200x630 HTML templates using Tailwind and Google Fonts, following brand guidance when available, and preserves the HTML source for iteration.
  • Headless Rendering & Preservation: Converts HTML to PNG via the html2png.dev API, downloads the resulting image, saves it to public/og-images/, and stores the source in keep/og-images/ for reproducibility and future edits.

Quick Start

Generate an OG image for the about page and save the HTML source to keep/og-images/about.html and the PNG to public/og-images/about.png.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: opengraph-image
Download link: https://github.com/nsheaps/ai-mktpl/archive/main.zip#opengraph-image

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.