datocms

Patch, extend, or explain DatoCMS front-end integration code in an existing web project (Next.js App Router, Nuxt, SvelteKit, Astro, plus React/Vue/Svelte component usage). Use for targeted, per-concern work — adding a draft mode endpoint, wiring Preview Links / Visual Editing flows, fixing Content Link overlays, tuning real-time preview subscriptions, setting up cache-tag invalidation/revalidation (Next.js revalidateTag or CDN purge by tags), adding robots/sitemap wiring, hooking up crawler-safe search. Also the go-to skill for framework component/hook wiring with react-datocms, vue-datocms, @datocms/svelte, @datocms/astro: Image/RSCImage/datocms-image, StructuredText, VideoPlayer (React/Vue/Svelte), SEO/meta helpers (renderMetaTags/toHead/Seo), QuerySubscription/QueryListener realtime, ContentLink components, Site Search (React/Vue). Prefer when modifying a live codebase one concern at a time, asking a framework-specific API question, or mixing several front-end concerns in the same patch.

Query the DatoCMS Content Delivery API (CDA) — the read-only GraphQL API — using @datocms/cda-client. Use when users ask for GraphQL content reads: fetching posts/pages/projects, filtering by date/text/fields, sorting/order, pagination/load-more, text pattern matching via regex filters, localization and fallback locales, modular content fragments, Structured Text (DAST) with blocks/inline records, responsive images (srcset/blur-up/imgix), SEO metadata (_seoMetaTags, favicons, global SEO), video/Mux fields, draft or preview reads, environment-targeted reads, cache tags via rawExecuteQuery, and Content Link metadata for visual editing. Also use for CDA query type generation with gql.tada or GraphQL Code Generator.

DatoCMS CLI (datocms) — command-line migrations, schema codegen, schema inspection, one-off CMA calls, typed TypeScript CMA scripts, env operations, deployment workflows, multi-project profile syncing. Use for datocms CLI commands/scripts: migrations:new, migrations:run; schema:generate; schema:inspect (dump models, blocks, fields, validators, appearance, fieldsets, nested blocks, referenced/embedding models); cma:call, cma:docs, cma:script (ad-hoc typed TS with ambient client/Schema globals); migration scaffolding for models/fields/blocks; CLI setup via datocms.config.json + profiles; OAuth (login/logout/whoami); projects:list; project link/unlink; env list/fork/promote/rename/destroy; maintenance-mode toggle; CI/CD migration pipelines; blueprint/client project sync; imports from WordPress or Contentful (assets + content); CLI plugin management (plugins:install/add/available/link/remove/update/reset/inspect).

Node.js/TypeScript scripts driving the DatoCMS Content Management API via @datocms/cma-client (-node/-browser). Code-first companion for content + automation work. Use for record/upload/project-automation code — short asks ("publish them", "fix those slugs", "delete all drafts", "bulk import this CSV") and checked-in scripts. Covers: (1) content ops — CRUD + publish records, bulk import/export, CSV pipelines, pagination, asset uploads (URL/file) with metadata, structured-text + block payload edits; (2) env + governance — fork/promote envs, webhooks, build triggers, project settings, maintenance mode, scheduled publish/unpublish, audit logs, usage analytics, subscription limits; (3) access + typed flows — roles, API tokens, upload tracks/tags, generated CMA types; (4) schema/UI mutation only when user opts out of migrations or embeds it in automation. Ordinary schema changes → `datocms-cli` migrations. Runs via `cma:call`/`cma:script` or checked-in `buildClient()` scripts.

Build, scaffold, maintain, or restyle DatoCMS plugins built with datocms-plugin-sdk and datocms-react-ui. Use when users ask to create a new DatoCMS plugin project, patch an existing plugin, add or adjust plugin hooks, field extensions, config screens, sidebars, pages, modals, asset sources, dropdown actions, lifecycle hooks, browser CMA flows, plugin permissions, package metadata, dark mode upgrades, or UI changes that should match the DatoCMS dashboard. Route standalone CMA scripts to datocms-cma and frontend website integrations to datocms-frontend-integrations.

Draft sanitized feedback emails to support@datocms.com about frustrating DatoCMS skills or MCP experiences. Use only when users explicitly ask to report, email, or summarize feedback about DatoCMS skills/MCP, or when the skills/MCP workflow has clearly reached a dead end after repeated loops, wrong routing, unresolved misunderstandings, or no credible next step. Do not use for ordinary first failures, retryable MCP/command/API errors, validation feedback, schema discovery misses, missing environment values, project/plugin bugs, or setup problems where another DatoCMS skill can still continue.

Run the trigger evaluation pipeline — classify, analyze, and optionally compare against a baseline. Only run when explicitly asked — evals are expensive.

Run repo validation to check skill metadata sync, eval fixture coverage, and repo invariants.

Use for existing content collections in the DatoCMS landing page demo starter that feed current routes and sections but are not layout, docs, or section wiring: blog posts, authors, tags, testimonials, pricing tiers, changelog entries, and legal pages. Covers post, author, tag, testimonial, pricing_tier, change_log, and legal_page records; /posts, /posts/[slug], /posts/author/[slug], /posts/tag/[slug], /legal/[slug], /changelog/[slug], PostExcerpt, and section fragments that link these records. Do not use for shared layout, docs pages, new section components, new route-backed types, preview mapping, or generic DatoCMS imports unless the request is tied to these starter records.

Use for documentation-area work in the DatoCMS landing page demo starter: documentation home, documentation pages, docs tree structure, docs sidebar, highlighted docs pages, docs home footer text, docs page Structured Text rendering, docs metadata, and /docs routes. Handles Documentation Home, Documentation Page, app/[locale]/(docs-layout)/**, components/DocumentationSidebarItem/**, components/FeaturedDocumentationPages/**, components/DatoStructuredText/**, QuoteBlock, and docs code/quote rendering. Do not use for regular marketing page sections, shared header/footer/layout, blog/pricing/testimonial/changelog content records, new non-docs routes, or generic DatoCMS schema work.

Use when changing shared site layout behavior in the DatoCMS landing page demo starter, even if the user does not say layout: header, navigation bar, menu items, dropdown menus, logo, accent color, theme color, top notification bar, footer logo, footer subtitle, footer legal links, social media links, language selector, and fields on the Layout singleton that affect shared shell surfaces. Handles app/[locale]/(common-layout)/query.graphql, app/[locale]/query.graphql, components/Header/**, components/Footer/**, and components/CustomColor/**. Do not use for page body sections, docs pages or docs sidebar, blog/content records, new route-backed pages, preview links, SEO route mapping, or generic DatoCMS schema work.

Use for route-level infrastructure in the DatoCMS landing page demo starter: adding or changing record-backed routes, static params, metadata, draft/live preview wrappers, Web Previews URL mapping, SEO-analysis route mapping, and route-aware cache/draft behavior. Covers app/[locale]/(common-layout)/**, app/[locale]/(docs-layout)/**, components/WithRealTimeUpdates/**, app/api/draft/preview-links/route.tsx, app/api/seoAnalysis/route.tsx, route query.graphql/meta.ts/page.tsx/Content.tsx/RealTime.tsx files, and optional staticParams.graphql files. Do not use for ordinary page section edits, shared layout content, docs content edits, existing content record changes, or generic Next.js routing outside this starter.

Use for regular marketing page section work in the DatoCMS landing page demo starter, especially requests to add, remove, reorder, restyle, or wire page sections on Page.records through Page.sections. Trigger on natural requests such as changing hero variants like split image, right image, background image, or gradient, moving a section on a page, or showing a changelog teaser. Covers Hero, Feature List, Brands, Video, Detail, Testimonials, Pricing, Featured Posts, Team, FAQ, Stats, About Intro, All Posts, Redirect, and Changelog section blocks plus their display variants. Handles app/[locale]/(common-layout)/[slug]/query.graphql, app/[locale]/(common-layout)/[slug]/Content.tsx, and components/blocksWithVariants/** fragments/renderers. Do not use for shared header/footer/navigation/theme layout, docs pages/sidebar, existing content record maintenance, route/preview/SEO mapping, or generic DatoCMS schema work.

Use when changing shared site layout behavior in the DatoCMS ecommerce website demo starter, even if the user does not say "layout": header, nav/navigation bar, dropdown menus, mobile menu, logo, accent color, notification strip, announcement/top banner, popup, cookie notice, footer, footer columns, social links, newsletter footer, search bar/placeholder, language selector, currency display, cart shell, and Layout or General Interface singleton fields that affect those shared surfaces. Trigger on prompts like "change the popup", "update the footer links", "add a banner at the top", "change the menu", "replace the logo", "hide the newsletter footer", "change the search placeholder", "update the cookie notice", or "change the site accent color". Do not use for homepage section blocks, product listing filters, product detail rendering, product card behavior, new record-backed page routes, draft preview links, SEO route mapping, generic content imports, or page content that does not affect shared site layout.

Use when changing product catalog behavior in the DatoCMS ecommerce website demo starter, including products, brands, materials, collections, product variations, sizes, colors, sale pricing, reviews, related products, the `/[lng]/products` listing page, sidebar filters, search query parameters, product detail rendering, and header category links built from layout menu records. Do not use for homepage section blocks, new record-backed page routes, generic ecommerce strategy, generic DatoCMS imports, or generic CMA scripts unless the task is tied to this starter's catalog files and schema.

Use for route-level page and preview work in the DatoCMS ecommerce website demo starter, especially adding or troubleshooting a new record-backed page route, static params, Next.js metadata, draft preview-links mapping, Web Previews URLs, or SEO analysis route mapping. Trigger on prompts like "add a new lookbook page", "create /[lng]/campaign/[slug]", "map this model in preview-links", or "SEO analysis does not know this page route". Covers the starter's meta.ts, query.graphql, page.tsx, Content.tsx, RealTime.tsx, app/api/draft/preview-links/route.tsx, and app/api/seoAnalysis/route.tsx when the request is about a page route. Do not use for homepage sections, product listing filters, product detail rendering, product sale price or card UI changes, generic DatoCMS frontend setup, or generic Next.js routing outside this starter.

Use for homepage section work in the DatoCMS ecommerce website demo starter, especially requests like "add a new homepage section", "add a featured brands section", "show three featured brands on the homepage", or "add a homepage block". Handles sections rendered through app/[lng]/home/Content.tsx, app/[lng]/home/query.graphql, components/Sections/**/fragment.graphql, and components/Sections/** React components. Also use when the section displays existing catalog data such as brands, materials, collections, or products. Do not use for product listing filters, product detail blocks, new page routes, generic schema modeling, or unrelated frontend components.

Create a new DatoCMS incident report

Schedule a new DatoCMS maintenance window

Quickly resolve an open DatoCMS incident or complete a maintenance

Add a status update to an existing DatoCMS incident or maintenance

Run lint and build checks for the current plugin to verify changes are correct.