This skill should be used when the user asks to "set up Nuxt Studio", "configure Studio OAuth", "deploy Studio to Cloudflare", "add visual editor to Nuxt", "configure studio.domain.com subdomain", "Studio authentication", "Nuxt CMS", or mentions visual content editing, Nuxt Studio module, TipTap editor, Monaco editor, or content management for Nuxt websites.
/plugin marketplace add secondsky/claude-skills/plugin install nuxt-studio@claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/cloudflare-deployment.mdreferences/editor-configuration.mdreferences/oauth-providers.mdreferences/subdomain-setup.mdreferences/troubleshooting.mdscripts/check-prerequisites.shscripts/test-oauth.shscripts/validate-config.shtemplates/nuxt.config.tstemplates/studio-auth-github.tstemplates/studio-auth-gitlab.tstemplates/studio-auth-google.tstemplates/wrangler.tomlNuxt Studio is a free, open-source visual content editor for Nuxt Content websites that enables content editing directly in production. It provides multiple editor types (Monaco code editor, TipTap visual WYSIWYG editor, Form-based editor), OAuth authentication (GitHub/GitLab/Google), and Git-based content management with commit integration.
Primary use case: Add visual CMS capabilities to existing Nuxt Content websites, typically deployed to a subdomain like studio.domain.com or cms.domain.com.
Use this skill when users need to:
Before proceeding with Studio setup, verify these requirements:
Check Nuxt Content installation:
# Verify @nuxt/content is installed
grep "@nuxt/content" package.json
# Check nuxt.config.ts for content module
grep "modules.*content" nuxt.config.ts
If Nuxt Content is not installed, install it first:
npx nuxi module add content
Install the latest beta version (v1.0.0-beta.3 as of December 2025):
npx nuxi module add nuxt-studio@beta
This adds @nuxt/studio to devDependencies and configures the module in nuxt.config.ts.
Check that nuxt.config.ts includes the Studio module:
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/content',
'@nuxt/studio' // Added automatically
]
})
Run the development server to test Studio locally:
npm run dev
# or
bun dev
Access Studio at http://localhost:3000/_studio (development mode).
Studio requires OAuth authentication for production deployments. Choose one provider:
For detailed OAuth setup instructions for each provider, load references/oauth-providers.md.
Environment variables pattern (all providers):
# GitHub
NUXT_OAUTH_GITHUB_CLIENT_ID=your_client_id
NUXT_OAUTH_GITHUB_CLIENT_SECRET=your_client_secret
# GitLab
NUXT_OAUTH_GITLAB_CLIENT_ID=your_client_id
NUXT_OAUTH_GITLAB_CLIENT_SECRET=your_client_secret
# Google
NUXT_OAUTH_GOOGLE_CLIENT_ID=your_client_id
NUXT_OAUTH_GOOGLE_CLIENT_SECRET=your_client_secret
Callback URL pattern:
https://studio.yourdomain.com/api/auth/callback/[provider]
Replace [provider] with: github, gitlab, or google.
For complete OAuth app creation steps, consult references/oauth-providers.md.
Studio works excellently on Cloudflare Pages and Workers. Use the Cloudflare deployment for:
studio.domain.com)nuxt.config.tswrangler.toml for Workers deployment (optional)For complete Cloudflare deployment instructions, load references/cloudflare-deployment.md.
Set the Cloudflare Pages preset:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content', '@nuxt/studio'],
nitro: {
preset: 'cloudflare-pages'
}
})
For Workers deployment with custom subdomain routing, see references/cloudflare-deployment.md.
Studio provides three editor types that can be configured per content type:
// nuxt.config.ts
export default defineNuxtConfig({
studio: {
editor: {
default: 'tiptap' // or 'monaco' or 'form'
}
}
})
For detailed editor configuration options, load references/editor-configuration.md.
Deploy Studio to a subdomain for production use:
Common patterns:
studio.yourdomain.comcms.yourdomain.comedit.yourdomain.comadmin.yourdomain.comFor complete subdomain setup with Cloudflare, load references/subdomain-setup.md.
Error: Authentication loop or "redirect_uri_mismatch" error
Cause: OAuth app callback URL doesn't match actual deployment URL
Solution:
Ensure OAuth app callback URL is:
https://studio.yourdomain.com/api/auth/callback/[provider]
Not:
https://yourdomain.com/api/auth/callback/[provider]
Error: Cannot find module '@nuxt/studio'
Cause: Studio module not installed or installed incorrectly
Solution:
npx nuxi module add nuxt-studio@beta
# or
npm install -D @nuxt/studio
Error: Build fails with "Incompatible module" or runtime errors
Cause: Nitro preset not configured for Cloudflare
Solution:
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
preset: 'cloudflare-pages'
}
})
Error: Redirects to login repeatedly after successful OAuth
Cause: Session cookies not persisting due to domain mismatch
Solution:
NUXT_PUBLIC_STUDIO_URL environment variable matches deployment URLError: Studio loads on main domain instead of subdomain
Cause: DNS/wrangler configuration incorrect
Solution:
wrangler.toml routes configurationFor complete error catalog and solutions, load references/troubleshooting.md.
The skill includes working configuration templates:
templates/nuxt.config.ts: Complete Studio module configurationtemplates/wrangler.toml: Cloudflare Workers deployment configtemplates/studio-auth-github.ts: GitHub OAuth implementationtemplates/studio-auth-gitlab.ts: GitLab OAuth implementationtemplates/studio-auth-google.ts: Google OAuth implementationUse these as starting points for your Studio setup.
npx nuxi module add nuxt-studio@betanpm run devhttp://localhost:3000/_studioBefore deploying Studio to production:
Load reference files when working on specific aspects:
references/oauth-providers.md for detailed GitHub/GitLab/Google OAuth app creationreferences/cloudflare-deployment.md for complete Cloudflare Pages/Workers setup with wrangler, custom domains, and environment variablesreferences/editor-configuration.md for Monaco/TipTap/Form editor customizationreferences/subdomain-setup.md for DNS and routing configurationreferences/troubleshooting.md for comprehensive error solutions and debuggingUse the included scripts for common operations:
scripts/check-prerequisites.sh: Verify Nuxt Content and version requirementsscripts/validate-config.sh: Check nuxt.config.ts Studio configurationscripts/test-oauth.sh: Test OAuth environment variables setupRun scripts with:
bash $CLAUDE_PLUGIN_ROOT/skills/nuxt-studio/scripts/script-name.sh
This skill works well with:
For the latest version information, check: https://github.com/nuxt-content/studio/releases
Next steps: After Studio is configured, test the deployment thoroughly, ensure OAuth authentication works correctly, and verify that content editing and Git commits function as expected.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.