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-imageThis skill uses the workspace's default tool permissions.
Generate Open Graph images for Nuxt pages with consistent, high-quality designs.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
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