skills/nuxt-seo/SKILL.md
Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.
npx skillsauth add onmax/claude-config nuxt-seoInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
npx nuxi module add @nuxtjs/seo
Working with:
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
Foundation for all SEO modules. Configure site in nuxt.config.ts, access via useSiteConfig(). See references/site-config.md for full options.
| Module | Purpose | Key API |
| ----------------- | --------------- | ----------------------------- |
| nuxt-site-config | Shared config | useSiteConfig() |
| @nuxtjs/robots | robots.txt | useRobotsRule() |
| @nuxtjs/sitemap | sitemap.xml | defineSitemapEventHandler() |
| nuxt-og-image | OG images | defineOgImage() |
| nuxt-schema-org | JSON-LD | useSchemaOrg() |
| nuxt-seo-utils | Meta utilities | useBreadcrumbItems() |
| nuxt-link-checker | Link validation | Build-time checks |
Use asSeoCollection() for automatic sitemap, og-image, and schema-org from frontmatter:
// content.config.ts
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { asSeoCollection } from '@nuxtjs/seo/content'
export default defineContentConfig({
collections: {
posts: defineCollection(asSeoCollection({ type: 'page', source: 'posts/**' }))
}
})
Important: Load @nuxtjs/seo before @nuxt/content in modules array:
export default defineNuxtConfig({
modules: ['@nuxtjs/seo', '@nuxt/content']
})
Frontmatter fields: ogImage, sitemap, robots, schemaOrg.
Main skill: ~250 tokens. Each sub-file: ~400-600 tokens. Only load files relevant to current task.
development
Iterative writing loop. Gemini 3 Pro writes, Claude Agent SDK reviews autonomously. Use for blog posts, docs, technical content needing quality iteration.
documentation
Conversational PRD writer - interview, scope, write, then create Linear/GitHub issue. Use when planning a new feature or product requirement.
tools
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
development
Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.