Agent skill
nuxt-studio
Use when working with Nuxt Studio, the self-hosted open-source CMS for Nuxt Content sites - provides visual editing, media management, Git-based publishing, auth providers, and AI content assistance
Install this agent skill to your Project
npx add-skill https://github.com/onmax/nuxt-skills/tree/main/skills/nuxt-studio
SKILL.md
Nuxt Studio
Self-hosted, open-source CMS module for editing Nuxt Content websites in production.
When to Use
Working with:
- Installing and configuring
nuxt-studiomodule - Authentication providers (GitHub, GitLab, Google OAuth, SSO, custom)
- Git provider setup (GitHub, GitLab, branch config)
- Visual content editing (MDC components, YAML/JSON forms, frontmatter)
- Media management (public dir, NuxtHub blob, S3, R2)
- Publishing flow (draft layer, conflict detection, CI/CD rebuild)
- AI-powered content assistance (Vercel AI Gateway)
For content collections/queries: use nuxt-content skill
For NuxtHub storage/database: use nuxthub skill
For Nuxt basics: use nuxt skill
Available Guidance
Read specific files based on current work:
- references/configuration.md - Module setup, auth providers, Git providers, environment variables
- references/live-editing.md - Visual editor, media management, MDC components, AI features
- references/deployment.md - SSR requirements, Git publishing, branch strategies, CI/CD
Loading Files
Consider loading these reference files based on your task:
- references/configuration.md - if installing, configuring auth/git providers, or setting env vars
- references/live-editing.md - if working with content editor, media, components, or AI features
- references/deployment.md - if deploying, configuring branches, or troubleshooting publish flow
DO NOT load all files at once. Load only what's relevant to your current task.
Key Concepts
| Concept | Purpose |
|---|---|
| Auth providers | Control who can access Studio (GitHub, GitLab, Google, SSO) |
| Git providers | Handle publishing commits to your repository |
| Draft layer | IndexedDB-backed local storage for unpublished changes |
| Media manager | Upload/browse files in /public or external blob storage |
| Visual editor | TipTap-based WYSIWYG with MDC component support |
| Publishing | Commits drafts to Git, triggers CI/CD rebuild |
Quick Start
npx nuxt module add nuxt-studio
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content', 'nuxt-studio'],
studio: {
repository: {
provider: 'github',
owner: 'your-username',
repo: 'your-repo',
branch: 'main',
},
},
})
# .env
STUDIO_GITHUB_CLIENT_ID=<client_id>
STUDIO_GITHUB_CLIENT_SECRET=<client_secret>
Access Studio at https://your-site.com/_studio (default route).
Official Documentation
- Nuxt Studio: https://nuxt.studio
- Setup: https://nuxt.studio/setup
- GitHub: https://github.com/nuxt-content/nuxt-studio
Token Efficiency
Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
pnpm
Use when managing Node.js dependencies with pnpm - install packages, configure monorepo workspaces, set up pnpm catalogs, resolve dependency conflicts with overrides, patch third-party packages, and configure CI pipelines for pnpm projects
nuxt-seo
Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.
ts-library
Use when authoring TypeScript libraries or npm packages - covers project setup, package.json exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and publishing to npm. Use when bundling, configuring dual CJS/ESM output, or setting up release workflows.
motion
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt
vue
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
vite
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
Didn't find tool you were looking for?