Generate 1200x630 Open Graph images for Nuxt pages via html2png.dev.
npx skills add https://github.com/nsheaps/ai-mktpl --skill opengraph-image
Please help me install this Agent Skill. Skill: opengraph-image Source: https://github.com/nsheaps/ai-mktpl/tree/main/plugins/og-image/skills/og-image Command: npx skills add https://github.com/nsheaps/ai-mktpl --skill opengraph-image
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.
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.
High-intent search queries and answers about installing and using this skill.
To generate Open Graph images for Nuxt pages, this Skill scans your app/pages/ directory, creates Tailwind-styled HTML templates, and converts them to 1200x630 PNGs. It then saves the final images to public/og-images/ and the source HTML to keep/og-images/ for future edits.
You cannot create social preview images for dynamic Nuxt routes using this Skill. The automated discovery feature specifically scans static Vue pages within the app/pages/ directory and skips dynamic routes to ensure reliable HTML template generation and PNG conversion.
Converting HTML to PNG for OG image generation works by building a single-file 1200x630 HTML template styled with Tailwind and Google Fonts, then sending it to the html2png.dev API. The API renders the HTML and returns a downloaded PNG image saved to your project.
The best way to find missing OG images in a Nuxt project is to use the automated discovery feature, which scans the app/pages/ directory to identify Vue pages lacking social preview images and presents actionable options to generate them.
You do not need to manually design HTML templates for your social preview images. The Skill produces design-first HTML templates automatically, following brand guidance when available, and preserves the source code in keep/og-images/ for reproducibility and iteration.
A limitation when using Tailwind to style Open Graph images is that the output is strictly fixed to a 1200x630 pixel PNG format. The source HTML relies on Google Fonts and is rendered headlessly via the html2png.dev API, requiring network access for conversion.
lttrProvide Nuxt 3+ development guidance for .vue and .ts files.
noontide-coRender inline SVG to 1200x630 PNG for Open Graph meta tags.
t-stringsEnforce frontend CSS standards for consistent styling and maintainability.
nous-labsAutomate browser interactions for navigation, form filling, screenshots, and data extraction.
