nuxt-content

Nuxt Content v3

Progressive guidance for content-driven Nuxt apps with typed collections and SQL-backed queries.

When to Use

Working with:

Content collections (content.config.ts, defineCollection)
Remote sources (GitHub repos, external APIs via defineCollectionSource)
Content queries (queryCollection, navigation, search)
MDC rendering (<ContentRenderer>, prose components)
Database configuration (SQLite, PostgreSQL, D1, LibSQL)
Content hooks (content:file:beforeParse, content:file:afterParse)
i18n multi-language content
NuxtStudio or preview mode
LLMs integration (nuxt-llms)

For writing documentation: use document-writer skill
For Nuxt basics: use nuxt skill
For NuxtHub deployment: use nuxthub skill (NuxtHub v1 compatible)

Available Guidance

Read specific files based on current work:

references/collections.md - defineCollection, schemas, sources, content.config.ts
references/querying.md - queryCollection, navigation, search, surroundings
references/rendering.md - ContentRenderer, MDC syntax, prose components, Shiki
references/config.md - Database setup, markdown plugins, renderer options
references/studio.md - NuxtStudio integration, preview mode, live editing

Loading Files

Consider loading these reference files based on your task:

[ ] references/collections.md - if setting up collections, schemas, or content.config.ts
[ ] references/querying.md - if using queryCollection, navigation, or search
[ ] references/rendering.md - if rendering markdown/MDC or working with ContentRenderer
[ ] references/config.md - if configuring database, markdown plugins, or renderer options
[ ] references/studio.md - if integrating NuxtStudio or preview mode

DO NOT load all files at once. Load only what's relevant to your current task.

Key Concepts

Concept	Purpose
Collections	Typed content groups with schemas
Page vs Data	`page` = routes + body, `data` = structured data only
Remote sources	`source.repository` for GitHub, `defineCollectionSource` for APIs
queryCollection	SQL-like fluent API for content
MDC	Vue components inside markdown
ContentRenderer	Renders parsed markdown body

Directory Structure

project/
├── content/                    # Content files
│   ├── blog/                   # Maps to 'blog' collection
│   └── .navigation.yml         # Navigation metadata
├── components/content/         # MDC components
└── content.config.ts           # Collection definitions

Official Documentation

Nuxt Content: https://content.nuxt.com
MDC syntax: https://content.nuxt.com/docs/files/markdown#mdc-syntax
Collections: https://content.nuxt.com/docs/collections/collections

Token Efficiency

Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.

Related Skills

cache-components

137Kdev-frontend

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

vercel

获取

component-refactoring

128Kdev-frontend

Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.

langgenius

获取

web-artifacts-builder

47Kdev-frontend

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

anthropics

获取

frontend-design

47Kdev-frontend

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.