From datocms
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/datocms:datocms-pluginThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Plugin development workflow. Patch existing plugins in place; scaffold only when no plugin exists or the user asks for a new project.
agents/openai.yamlreferences/asset-sources.mdreferences/config-screen.mdreferences/connect-conventions.mdreferences/current-plugin-patterns.mdreferences/custom-pages.mdreferences/dark-mode-upgrade.mdreferences/design-datocms-react-ui-bridge.mdreferences/design-forms-and-controls.mdreferences/design-foundations.mdreferences/design-layouts.mdreferences/design-navigation-feedback-and-data-display.mdreferences/design-plugin-surfaces.mdreferences/design-raw-css-fallbacks.mdreferences/design-tokens.mdreferences/dropdown-actions.mdreferences/field-extensions.mdreferences/form-values.mdreferences/inspectors.mdreferences/lifecycle-hooks.mdPlugin development workflow. Patch existing plugins in place; scaffold only when no plugin exists or the user asks for a new project.
package.json, package manager, scripts, plugin metadata, and installed SDK/UI versionsconnect() call, usually src/main.tsx or src/index.tsxAGENTS.md if present| Need | Load |
|---|---|
| Follow-up maintenance shortcuts | references/rapid-patterns.md |
| Hook pairs, render conventions, sizing reminder | references/connect-conventions.md |
Exact connect(), render helper, Canvas, frame sizing | references/sdk-connect-and-frames.md |
Base ctx, entity repos, form values, browser CMA, endpoints, async errors | references/sdk-context-and-cma.md |
| Target code has no clear precedent | references/current-plugin-patterns.md |
| Plugin permission changes | references/permissions.md |
| Localized values, field paths, Structured Text Slate form values | references/form-values.md |
| Need | Load |
|---|---|
| Project files and package baseline | references/project-scaffold.md |
| First hook pair selection | references/surface-starters.md |
| Surface | Load |
|---|---|
| Config screen | references/config-screen.md |
| Field extension | references/field-extensions.md |
| Sidebar panel or full record sidebar | references/sidebar-panels.md |
| Custom page | references/custom-pages.md |
| Dropdown action | references/dropdown-actions.md |
| Lifecycle hook | references/lifecycle-hooks.md |
| Modal | references/modals.md |
| Outlet | references/outlets.md |
| Inspector | references/inspectors.md |
| Asset source | references/asset-sources.md |
| Upload sidebar or upload panel | references/upload-sidebars.md |
| Structured Text customization | references/structured-text.md |
| Record presentation or picker query | references/record-presentation.md |
| Need | Load |
|---|---|
| Dark-mode-only migration | references/dark-mode-upgrade.md |
| First design pass | references/design-foundations.md + references/design-datocms-react-ui-bridge.md |
| Token/variable lookup | references/design-tokens.md |
| Layouts, pages, split views, toolbars | references/design-layouts.md |
| Forms, controls, settings | references/design-forms-and-controls.md |
| Dropdowns, tabs, tables, lists, notices | references/design-navigation-feedback-and-data-display.md |
| Surface shell rules | references/design-plugin-surfaces.md |
| Raw CSS fallback snippets | references/design-raw-css-fallbacks.md |
For design work, prefer public datocms-react-ui components when they match the required shape. Fall back to local React/CSS only when public components do not express the layout cleanly. Use Canvas tokens and variables directly; customize beyond them only for explicit product styling, vendor widgets, media treatments, data visualization, or effects they cannot express.
connect() call.connect() before adding hooks.datocms-react-ui/styles.css once in the plugin entry file.<Canvas ctx={ctx}>.<Canvas ctx={ctx} noAutoResizer> for pages, inspectors, and full-width sidebars.switch for ID-dispatched render hooks.import type { ... } for SDK types.ctx.item before reading saved-record data.get(ctx.formValues, ctx.fieldPath) in field extensions; use localized-value helpers elsewhere.ctx object properties.ctx.openModal() parameters and ctx.resolve() values JSON-serializable.ctx.setParameters() directly in renderManualFieldExtensionConfigScreen.@datocms/cma-client-browser, add only required permissions, and guard missing ctx.currentUserAccessToken.datocms-cma or datocms-cli.datocms-frontend-integrations or datocms-setup.datocms-content-modeling.datocms-cda.npx claudepluginhub datocms/agent-skills --plugin datocmsGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.