Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From opengraph-image
This skill should be used when the user wants to generate Open Graph (OG) images for Nuxt pages. These images act as placeholders when services use the opengraph protocol to render a preview on another service, such as the preview for github rendered on Slack when you post a link. While generally for Nuxt pages, it can be used to similarly generate any image using the html2png.dev API. It discovers pages from app/pages/, identifies which are missing OG images (by analyzing the tags), generates beautiful HTML designs, converts them to PNG via html2png.dev API, and saves them to public/og-images/. Trigger phrases: - generate og image - create og images - make social preview - og-image - generate image - opengraph meta tags
npx claudepluginhub nsheaps/ai-mktpl --plugin og-imageHow this skill is triggered — by the user, by Claude, or both
Slash command
/opengraph-image:og-imageThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate Open Graph images for Nuxt pages with consistent, high-quality designs.
Generates Open Graph social media preview images by creating a screenshot-optimized page that matches the project's design system, captures it at 1200x630 with Playwright, and configures meta tags.
Adds Open Graph (OGP) and Twitter Card meta tags for social media link previews. Provides tag reference, image sizing guidelines, and required/optional tag documentation.
Generates favicons (multi-size), PWA icons, Open Graph images, apple-touch-icon, and HTML meta tags from a logo or brand text. Use before deploying a site, landing page, or PWA.
Share bugs, ideas, or general feedback.
Generate Open Graph images for Nuxt pages with consistent, high-quality designs.
If image generation request is not for a specific image, skip to step 4 to generate a generic blog OG image without concern for existing/missing pages or images.
Scan app/pages/ directory for Vue files to identify available pages:
find app/pages -name "*.vue" -type f
Filtering rules:
[ brackets (e.g., [...slug].vue, [category].vue)blog/ directory (they have separate OG handling)For each discovered page, derive the slug and check if OG image exists:
| Page Path | Slug | OG Image Path |
|---|---|---|
app/pages/index.vue | index | public/og-images/index.png |
app/pages/about.vue | about | public/og-images/about.png |
app/pages/pricing/index.vue | pricing | public/og-images/pricing.png |
app/pages/blog/index.vue | blog | public/og-images/blog.png |
Present the list of pages with missing OG images to the user and ask which one to generate.
Read the selected page's Vue file to understand:
Also check for docs/design-system.md if present for brand guidelines (colors, fonts, style).
Create a single-file HTML document optimized for 1200x630 dimensions:
Template structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1200, height=630" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
}
</style>
</head>
<body>
<div style="width: 1200px; height: 630px;" class="...">
<!-- OG image content -->
</div>
</body>
</html>
Design guidelines:
Save HTML to: keep/og-images/<slug>.html
Ensure the keep/og-images/ directory exists before saving.
Use the html2png.dev API to convert the HTML:
curl -X POST "https://html2png.dev/api/convert?width=1200&height=630&format=png&deviceScaleFactor=2" \
-H "Content-Type: text/html" \
--data-binary u/keep/og-images/<slug>.html
The API returns JSON with a url field containing the generated image URL.
Download the image from the returned URL. Be sure to save the source html and the generated image in a directory appropriate to preserve and iterate on it. If generated as part of a project, be sure to save it in that project, following any existing directory structure patterns. Ensure any needed directories exist before saving.
Inform the user:
project/
├── keep/
│ └── og-images/
│ └── <slug>.html # Preserved HTML source
├── public/
│ └── og-images/
│ └── <slug>.png # Generated OG images