Agent skill

Nuxt Og Image Skilld

by harlan-zw in harlan-zw/requestindexing.com

ALWAYS use when writing code importing "nuxt-og-image". An agent skill from harlan-zw/requestindexing.com.

MITAuto-check passedMedia & Creative

Install Nuxt Og Image Skilld

skills CLI
$ npx skills add harlan-zw/requestindexing.com --skill nuxt-og-image-skilld -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install harlan-zw/requestindexing.com nuxt-og-image-skilld --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/harlan-zw/requestindexing.com.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/nuxt-og-image-skilld .claude/skills/nuxt-og-image-skilld && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
nuxt-og-image-skilld
GitHub stars
396
Token cost
~2.4k tokens
SKILL.md length
793 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

ALWAYS use when writing code importing "nuxt-og-image". An agent skill from harlan-zw/requestindexing.com.

  • Writing code importing nuxt-og-image
  • SKILL.md covers Search, API Changes, v6.0.0 API Changes and Best Practices
  • Calls npx
  • Tasks that involve Social media graphics

What it does

Nuxt Og Image Skilld is an agent skill from harlan-zw/requestindexing.com. ALWAYS use when writing code importing "nuxt-og-image". Consult for debugging, best practices, or modifying nuxt-og-image, nuxt og image, og-image, og image.

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Media & Creative, covering Social media graphics. It works with Nuxt and Vue.js. The repository describes itself as: Find your missing on pages Google and request them to be indexed using the Web Search Indexing API. The licence is MIT.

When your agent uses it

  • Writing code importing nuxt-og-image
  • Tasks that involve Social media graphics

Example prompts

  • “nuxt-og-image”
  • “Use the nuxt-og-image-skilld skill to alway use when writing code importing "nuxt-og-image". An agent skill from harlan-zw/requestindexing.com”
  • “/nuxt-og-image-skilld”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 81644c0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Nuxt Og Image Skilld loads about 2.4k tokens when it runs. Until then it costs about 45 tokens; SKILL.md has 793 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~45
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from harlan-zw/requestindexing.com at commit 81644c0, republished under its MIT licence (© harlan-zw). 793 words, ~2,389 tokens.

Download SKILL.mdSave it as .claude/skills/nuxt-og-image-skilld/SKILL.md (or your agent's skills folder).
name
nuxt-og-image-skilld
description
ALWAYS use when writing code importing "nuxt-og-image". Consult for debugging, best practices, or modifying nuxt-og-image, nuxt og image, og-image, og image.
metadata.version
6.0.0-beta.46
metadata.generated_by
Claude Code · Haiku 4.5
metadata.generated_at
2026-03-03

nuxt-modules/og-image nuxt-og-image

Version: 6.0.0-beta.46 (Mar 2026) Deps: @clack/prompts@^1.0.1, @nuxt/devtools-kit@^3.2.2, @nuxt/kit@^4.3.1, @vue/compiler-sfc@^3.5.29, chrome-launcher@^1.2.1, consola@^3.4.2, culori@^4.0.2, defu@^6.1.4, devalue@^5.6.3, exsolve@^1.0.8, lightningcss@^1.31.1, magic-string@^0.30.21, magicast@^0.5.2, mocked-exports@^0.1.1, nuxt-site-config@^3.2.21, nypm@^0.6.5, ofetch@^1.5.1, ohash@^2.0.11, pathe@^2.0.3, pkg-types@^2.3.0, radix3@^1.1.2, sirv@^3.0.2, std-env@^3.10.0, strip-literal@^3.1.0, tinyexec@^1.0.2, tinyglobby@^0.2.15, ufo@^1.6.3, ultrahtml@^1.6.0, unplugin@^3.0.0 Tags: latest: 5.1.13 (Dec 2025), beta: 6.0.0-beta.46 (Mar 2026)

References: package.json — exports, entry points • README — setup, basic usage • Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • Releases — changelog, breaking changes, new APIs

Use skilld search instead of grepping .skilld/ directories — hybrid semantic + keyword search across all indexed docs, issues, and releases. If skilld is unavailable, use npx -y skilld search.

bash
skilld search "query" -p nuxt-og-image
skilld search "issues:error handling" -p nuxt-og-image
skilld search "releases:deprecated" -p nuxt-og-image

Filters: docs:, issues:, releases: prefix narrows by source type.

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

v6.0.0 API Changes

Breaking Changes (v5 → v6)
  • BREAKING: <OgImage> and <OgImageScreenshot> Vue components removed — use defineOgImage() and defineOgImageScreenshot() composables instead source

  • BREAKING: defineOgImageComponent() deprecated — use defineOgImage(component, props, options) instead with component name as first argument source

  • BREAKING: Component renderer suffix now required — rename components/OgImage/MyTemplate.vue to MyTemplate.takumi.vue, MyTemplate.satori.vue, or MyTemplate.browser.vue based on renderer source

  • BREAKING: Renderer dependencies no longer bundled — explicitly install @takumi-rs/core (Node.js) or @takumi-rs/wasm (Edge), satori + @resvg/resvg-js, or playwright-core based on your renderer choice source

  • BREAKING: ogImage.fonts config removed — use @nuxt/fonts module instead; Inter (400, 700) bundled as zero-config fallback source

  • BREAKING: ogImage.componentOptions config removed — components are no longer registered globally source

  • BREAKING: defaults.renderer and renderer option on defineOgImage() removed — renderer determined by component filename suffix only source

  • BREAKING: OG Image URL paths changed from /__og-image__/* to /_og/* with new Cloudinary-style encoding; query params no longer in cache key by default source

  • BREAKING: chromium renderer renamed to browser — update component suffixes and config options source

  • BREAKING: browser: 'node' compatibility option removed — use browser: 'playwright' instead source

  • BREAKING: Nuxt Content v2 support removed — upgrade to Nuxt Content v3 and use defineOgImage() in page components source

New Features (v6)
  • NEW: defineOgImage() first-argument component syntax — defineOgImage('MyComponent', props, options) replaces defineOgImageComponent() source

  • NEW: Multiple OG images per page via key parameter — generate different dimensions for different platforms (e.g., 1200x600 for Twitter, 800x800 for WhatsApp) source

  • NEW: Takumi renderer as recommended option — 2-10x faster than Satori with comprehensive CSS support and default 2x DPI for crisp images source

  • NEW: Renderer-specific component variants — create MyTemplate.satori.vue and MyTemplate.takumi.vue in same directory for multiple renderer implementations source

  • NEW: @nuxt/fonts integration — custom fonts work automatically when module installed; Inter bundled as zero-config default source

  • NEW: First-class CSS support — Tailwind v4 with @theme, UnoCSS, CSS variables, and Nuxt UI v3 semantic colors all just work out-of-box source

  • NEW: cacheQueryParams config option — restore v5 behavior of including query params in cache keys source

  • NEW: cacheVersion config option — controls cache key namespacing and allows manual cache invalidation source

  • NEW: getOgImagePath() utility (auto-imported) — programmatically get OG image URLs instead of hardcoding them source

  • NEW: Cloudflare Browser Rendering support — use provider: 'cloudflare', binding: 'BROWSER' in config for runtime screenshots on Cloudflare source

Show full SKILL.md (314 more words)Show less
Import Path Changes (v6)
  • BREAKING: #nuxt-og-image-utils alias removed — use #og-image/shared instead source

  • BREAKING: useOgImageRuntimeConfig import path changed — import from #og-image/app/utils not #og-image/shared source

Configuration Options Removed (v6)
  • BREAKING: strictNuxtContentPaths config removed — this option had no effect in Nuxt Content v3 source

Also changed: Community templates must be ejected before production builds · Hash mode URLs for prerendering with long options · Sharp JPEG errors now throw instead of silent fallback · defineOgImage() now returns array of generated paths

Best Practices

  • Use Takumi renderer by default — 2-10x faster than Satori with comprehensive CSS support including gradients, shadows, opacity, CSS Grid, transforms, and filters source

  • Name OG image components with renderer suffix (e.g., MyTemplate.takumi.vue) — enables automatic renderer detection, tree-shaking of unused code, and supports multiple renderer variants of the same component source

  • Enable zeroRuntime for prerendered-only apps — removes 81% of Nitro renderer code from production bundle when all OG images are generated at build time source

  • Persist runtimeCacheStorage with Redis or KV bindings in production — default memory cache clears on server restart; configure via Nitro plugin for environment-specific connection details source

  • Enable buildCache in CI/CD pipelines — caches rendered images between deployments to skip regeneration of identical content; configure GitHub Actions or GitLab CI to persist the cache directory source

  • Configure custom fonts only via @nuxt/fonts with global: true — manual CSS @font-face or CDN links do not work in OG image renderers; Inter (400, 700) is bundled as fallback source

  • Use props-based pattern for i18n — resolve translations at page level and pass as props rather than using useI18n() inside OG components; components render in isolated server context without locale context source

  • Create multiple OG images with shared props — pass shared props as second argument and size/key variants as third array to reduce duplication across Twitter, Facebook, WhatsApp sizes source

  • Avoid wildcard route rules with caching — patterns like '/**' with swr/isr/cache break OG image routes; use specific patterns like '/blog/**' instead source

© harlan-zw, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/nuxt-og-image-skilld of harlan-zw/requestindexing.com.

Open the folder on GitHubat commit 81644c0

Compare with similar skills

Nuxt Og Image Skilld next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Nuxt Og Image Skilld compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Nuxt Og Image Skilld this skillharlan-zw/requestindexing.com396—~2.4kAutomated safety check: PassMIT
Markstream VueSimon-He95/markstream-vue3k—~2.2kAutomated safety check: PassMIT
AI Model WebTencentCloudBase/CloudBase-AI-Toolkit1.1k2 repos~6.1kAutomated safety check: NotesMIT
Domscribepatchorbit/domscribe194—~3.3kAutomated safety check: NotesMIT
Nuxt SEO Utilsharlan-zw/nuxt-seo-utils130—~2.1kAutomated safety check: PassMIT
PiniaJetBrains/skills3669 repos~682Automated safety check: PassNone

Similar skills

  • Markstream Vue

    Simon-He95/markstream-vue

    Integrate markstream-vue into a Vue 3 app. An agent skill from Simon-He95/markstream-vue.

    3k GitHub stars~2.2k tokensUpdated today
    Media & CreativeAuto-check passed
  • AI Model Web

    TencentCloudBase/CloudBase-AI-Toolkit

    A skill your agent uses when a browser/Web app (React, Vue, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI, 页面, 前端, 网页) needs AI models via @cloudbase/js-sdk.

    1.1k GitHub starsUsed in 2 repos~6.1k tokens
    Media & CreativeAuto-check: notes
  • Domscribe

    patchorbit/domscribe

    Work with Domscribe — the pixel-to-code bridge. An agent skill from patchorbit/domscribe.

    194 GitHub stars~3.3k tokensUpdated 2 mo ago
    Agent WorkflowsAuto-check: notes
  • Nuxt SEO Utils

    harlan-zw/nuxt-seo-utils

    Set up, override, and debug the default SEO head tags in a Nuxt app with the nuxt-seo-utils module.

    130 GitHub stars~2.1k tokensUpdated 2 days ago
    Media & CreativeAuto-check passed
  • Pinia

    JetBrains/skills

    Official

    Pinia official Vue state management library, type-safe and extensible.

    366 GitHub starsUsed in 9 repos~682 tokens
    Frontend & DesignAuto-check passed
  • Vueuse Motion Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses when writing, reviewing, or debugging code that imports @vueuse/motion (v-motion directive, Motion/MotionGroup components, useMotion, useSpring, presets, Nuxt module).

    181 GitHub stars~1.8k tokensUpdated 18 days ago
    DevelopmentAuto-check passed

More from harlan-zw/requestindexing.com

  • Nuxt Auth Utils Skilld

    harlan-zw/requestindexing.com

    ALWAYS use when writing code importing "nuxt-auth-utils". An agent skill from harlan-zw/requestindexing.com.

    396 GitHub stars~1.8k tokensUpdated today
    Auto-check passed
  • Nuxt Skilld

    harlan-zw/requestindexing.com

    ALWAYS use when writing code importing "nuxt". An agent skill from harlan-zw/requestindexing.com.

    396 GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • Nuxt UI Skilld

    harlan-zw/requestindexing.com

    ALWAYS use when writing code importing "@nuxt/ui". An agent skill from harlan-zw/requestindexing.com.

    396 GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • Request Indexing UX Replay

    harlan-zw/requestindexing.com

    Replay Request Indexing onboarding as a new user on the web dashboard and through a coding agent, capture every page and state, check the onboarding mail, and fix material defects.

    396 GitHub stars~1.9k tokensUpdated today
    Auto-check passed

Works with

Questions about Nuxt Og Image Skilld

What does Nuxt Og Image Skilld do?

ALWAYS use when writing code importing "nuxt-og-image". An agent skill from harlan-zw/requestindexing.com. com. ALWAYS use when writing code importing "nuxt-og-image".

When should I use Nuxt Og Image Skilld?

Nuxt Og Image Skilld fits situations like: writing code importing nuxt-og-image; tasks that involve Social media graphics.

How do I install Nuxt Og Image Skilld in Claude Code?

Run `npx skills add harlan-zw/requestindexing.com --skill nuxt-og-image-skilld -a claude-code`. Or copy the skill folder (.claude/skills/nuxt-og-image-skilld in harlan-zw/requestindexing.com) into .claude/skills/nuxt-og-image-skilld in your project. Claude Code loads it when a task matches its description.

How do I install Nuxt Og Image Skilld in Codex?

Run `npx skills add harlan-zw/requestindexing.com --skill nuxt-og-image-skilld -a codex`. Or copy the skill folder (.claude/skills/nuxt-og-image-skilld in harlan-zw/requestindexing.com) into .agents/skills/nuxt-og-image-skilld in your project. Codex loads it when a task matches its description.

Can I use Nuxt Og Image Skilld in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add harlan-zw/requestindexing.com --skill nuxt-og-image-skilld -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nuxt-og-image-skilld, .gemini/skills/nuxt-og-image-skilld, .github/skills/nuxt-og-image-skilld and .opencode/skills/nuxt-og-image-skilld in your project.

What does Nuxt Og Image Skilld need to run?

Going by SKILL.md and its folder, Nuxt Og Image Skilld needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Nuxt Og Image Skilld access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Nuxt Og Image Skilld safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Nuxt Og Image Skilld use?

Nuxt Og Image Skilld is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nuxt Og Image Skilld use?

About 2.4k tokens (SKILL.md is roughly 9.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Nuxt Og Image Skilld?

Skills that share tags, products or a category with Nuxt Og Image Skilld: Markstream Vue (Simon-He95/markstream-vue, 3k stars), AI Model Web (TencentCloudBase/CloudBase-AI-Toolkit, 1.1k stars), Domscribe (patchorbit/domscribe, 194 stars) and Nuxt SEO Utils (harlan-zw/nuxt-seo-utils, 130 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Nuxt Og Image Skilld?

harlan-zw (a GitHub user) maintains it in harlan-zw/requestindexing.com, which has 396 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 11, 2026.

Source: harlan-zw/requestindexing.com on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.