nuxt-modulesOfficial·10 Agent Skills Included

og-image

Generate social share images for Nuxt sites automatically

Generates Open Graph images for Nuxt websites using Vue components, templates, or full page screenshots. Eliminates manual image design work and broken social link previews that hurt click-through rates. Renders on the edge with Satori or Takumi, supports Tailwind, Google Fonts, and emojis, and includes a DevTools playground for fast visual testing.

542|49

↗

npx skills add nuxt-modules/og-image --all -g -y

Available:

Instructs the AI agent to evaluate every installed skill for relevance before modifying code and to invoke all matching skills before proceeding with the task.

All Skills in This Repository (10)

Pure Emerald Level Indicators

📦 In Repo

nuxt-modules

vitest-skilld

Diagnose and fix issues in Vitest test suites with debugging strategies.

vercel-satori

Provides debugging, best practices, and modification guidance for satori-based SVG rendering.

parcel-bundler-lightningcss

Integrate lightningcss with Parcel bundler and debug styling workflows.

takumi-rs-core-skilld

Guide debugging and best practices for Rust code importing @takumi-rs/core.

nuxt-fonts

Standardize @nuxt/fonts integration and font usage across Nuxt projects.

unjs-unifont

Standardize unifont usage in frontend and backend projects.

unjs-fontaine

Document secure fontless usage and debugging for frontend Vite workflows.

lightningcss-skilld

Provides debugging guidance and best practices for lightningcss integration in builds and tooling.

satori-skilld

Review JavaScript/TypeScript code importing satori and suggest robust import patterns.

kane50613-takumi

Provide debugging guidance and best practices for code importing @takumi-rs/core.

Official

Advanced

Frequently Asked Questions

FAQPage Schema

How to install nuxt-og-image?▼

Run `npx skills add nuxt-modules/og-image --all -g -y` in your terminal to install all skills in this suite globally.

How to generate OG images in Nuxt?▼

This module creates social share images from Vue components, built-in templates, or automatic screenshots of your pages, with no manual design work needed.

Does nuxt-og-image work on Cloudflare or Vercel Edge?▼

Yes. It renders on Vercel Edge, Netlify Edge, and Cloudflare Workers using Satori or Takumi as the rendering engine.

Can I use Tailwind and custom fonts in OG images?▼

Yes. It supports Tailwind and UnoCSS themes, Google Fonts, local fonts, and six emoji families out of the box.

Do I need design skills to create social share images?▼

No. You can start from built-in templates or let the module screenshot your pages, then preview everything in the Nuxt DevTools playground.