---
name: "nuxt-content-markdown-cms"
description: "Transform Markdown and MDC components into a full-featured searchable content site."
metadata:
  author: "Nuxt"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "querycontent nuxt content"
  - "mdc vue component markdown"
  - "nuxt content documentation"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Nuxt Content v2 Git-Based Markdown CMS & MDC Syntax

Configures Nuxt Content v2: writing Markdown with YAML frontmatter, querying content using queryContent(), embedding interactive Vue components directly inside Markdown (MDC syntax), and syntax highlighting with Shiki.

## When to Invoke
Invoke this skill whenever you need to:
- querycontent nuxt content
- mdc vue component markdown
- nuxt content documentation

## Execution SOP & Rules
1. Install @nuxt/content module and place markdown documents under content/ directory.
2. Query articles: const { data: post } = await useAsyncData(() => queryContent('blog', slug).findOne()).
3. Render rich content using <ContentRenderer :value='post' />.
4. Embed Vue components in Markdown: ::callout{type='warning'}
Warning message
::.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.