Loading...
Loading...
Found 12 Skills
Patch, extend, or explain DatoCMS front-end integration code inside 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 updates/subscriptions, setting up cache-tag invalidation/revalidation flows (Next.js revalidateTag or CDN purge by tags), adding robots/sitemap wiring, or hooking up crawler-safe search integration. Also the go-to skill for framework component/hook wiring with react-datocms, vue-datocms, @datocms/svelte, and @datocms/astro: Image/SRCImage/datocms-image, StructuredText, VideoPlayer (React/Vue/Svelte), SEO/meta helpers (renderMetaTags/toHead/Seo), QuerySubscription/QueryListener realtime patterns, ContentLink components, and Site Search (React/Vue). Prefer this skill whenever the user is 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.
Work with the DatoCMS CLI tool (datocms) for command-line migrations, schema type generation, direct one-off CMA calls, typed one-off TypeScript CMA scripts, environment operations, deployment workflows, and multi-project profile syncing. Use when users ask for datocms CLI commands or scripts such as migrations:new, migrations:run, schema:generate, cma:call, cma:docs, cma:script (for ad-hoc typed TypeScript scripts with ambient client/Schema globals), migration scaffolding for models/fields/blocks, CLI setup with datocms.config.json and profiles, OAuth authentication (login, logout, whoami), discovering accessible projects (projects:list), project linking (link, unlink), environment commands (list/fork/promote/rename/destroy), maintenance-mode toggling, CI/CD migration pipelines, blueprint/client project sync, imports from WordPress or Contentful (including assets/content), and CLI plugin management (plugins:install, plugins:add, plugins:available, plugins:link for local plugin development, plugins:remove, plugins:update, plugins:reset, plugins:inspect).
Design or restyle DatoCMS plugins so they look and feel native to the DatoCMS UI. Use when users ask to make a plugin match the DatoCMS dashboard, polish plugin config screens, pages, sidebars, panels, modals, forms, tables, empty states, or overall plugin layout structure. This skill owns DatoCMS plugin design-system work, native-look restyling, and UI density or spacing cleanup. Prefer `datocms-react-ui` when a public component exists, and otherwise use raw React and CSS that reproduce DatoCMS spacing, typography, density, color, and interaction patterns without importing private CMS classes.
Scaffold brand-new DatoCMS plugin projects with datocms-plugin-sdk and connect(). Use when users want to create a new plugin folder from scratch, bootstrap the Vite/React package structure, choose initial plugin surfaces such as field extensions, config screens, sidebars, pages, asset sources, or dropdown actions, and wire the first hook implementation. Prefer `datocms-plugin-builder` for edits to an existing plugin project.
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.
Single entry point for one-shot, end-to-end DatoCMS project setup orchestration — the only skill that bundles prerequisites, chains related recipes, and takes a greenfield or partially configured project to a working state in one pass. Covers five setup lanes: (1) frontend foundation (bootstrap a new Next.js/Nuxt/SvelteKit/Astro integration from scratch); (2) frontend features (draft mode, visual editing, web previews, content link, real-time updates, responsive images, SEO, robots/sitemaps, site search, revalidation/cache tags — applied together with their prerequisites); (3) migrations (CLI profiles, baseline migrations, shared histories, release workflow, sandbox reset loops, diff-based generation); (4) onboarding imports (WordPress, Contentful — content plus assets); (5) platform automation (CMA scripting patterns and project-level automation). Use when the user wants a named outcome scaffolded in full rather than a single file patched, when multiple related features need to land together (e.g. "set up visual editing" implies draft mode + content link + web previews), or when the request is a broad "set up X" that needs routing to the smallest matching recipe bundle.
Write programmatic Node.js or TypeScript scripts that drive the DatoCMS Content Management API using @datocms/cma-client, @datocms/cma-client-node, or @datocms/cma-client-browser — the code-first companion for content-heavy and automation work. Prefer this skill whenever the task needs real code for records, uploads, or project automation — including short mid-conversation asks like "publish them", "fix those slugs", "delete all drafts", or "bulk import this CSV", and longer checked-in scripts. Covers four areas: (1) content operations — create/update/delete/publish records, bulk import/export and CSV pipelines, pagination over large record sets, asset uploads from URL or local files with metadata, structured text and block payload edits; (2) environment and project governance — fork/promote environments, webhooks and build triggers, project settings and maintenance mode, scheduled publish/unpublish workflows, audit logs, usage analytics, subscription limits; (3) access control and typed flows — roles and API tokens, upload tracks and tags, generated CMA schema types for type-safe record operations; (4) schema and UI configuration when the user explicitly bypasses the migrations workflow or wants schema mutations embedded in a larger script — models, fields, blocks, saved filters, dashboard and schema menus, plugin install and configuration. For ordinary schema changes inside a project with a migrations workflow or a secondary environment, prefer `datocms-cli` migrations as the safe default; reach for this skill only when the user opts out or the mutation is part of a broader automation. Works for both one-off execution via `cma:call` / `cma:script` and checked-in `buildClient()` scripts for reusable or unattended code.
Modify existing DatoCMS plugins built with datocms-plugin-sdk and connect(). Use when users ask to patch or maintain an existing plugin project: config screen edits, hook additions, field extension tweaks, sidebar/page/outlet changes, validation updates, settings cleanup, dependency fixes, or other day-to-day plugin maintenance. Prefer `datocms-plugin-scaffold` when starting a new plugin from scratch.
Expert guidance for building with DatoCMS headless CMS. Includes API decision guides (CDA vs CMA), executable workflow playbooks for schema management, content operations, asset uploads, migrations, structured text (DAST), webhooks, and framework integrations. Covers official MCP server integration and troubleshooting.
Run repo validation to check skill metadata sync, eval fixture coverage, and repo invariants.
Run the trigger evaluation pipeline — classify, analyze, and optionally compare against a baseline. Only run when explicitly asked — evals are expensive.
Headless CMS integration guidance — Sanity (native Vercel Marketplace), Contentful, DatoCMS, Storyblok, and Builder.io. Covers studio setup, content modeling, preview mode, revalidation webhooks, and Visual Editing. Use when building content-driven sites with a headless CMS on Vercel.