mcpField
D
datocms-plugin-scaffold

datocms-plugin-scaffold

github.com/datocmsDevelopment3110 installsUpdated 2w ago
Repository

About datocms-plugin-scaffold

datocms-plugin-scaffold is a skill for creating a minimal first version of a DatoCMS plugin. It guides developers through choosing the plugin surface, setting up the project, and verifying the build, then directs follow-up work to datocms-plugin-builder.

Key features

  1. 01Minimal DatoCMS plugin scaffolding
  2. 02Surface selection and setup guidance
  3. 03Vite and React project layout
  4. 04Build verification and local install guidance
  5. 05Routing for follow-up plugin work

Use cases

  1. 01Starting a new private or marketplace plugin
  2. 02Adding an initial plugin surface
  3. 03Creating a working scaffold before later edits

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/datocms/agent-skills --skill datocms-plugin-scaffold

After installing, type/datocms-plugin-scaffoldin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
project-scaffold.md
surface-starters.md

Details

From the project README

DatoCMS Plugin Scaffold

Create smallest working first version of new plugin. Keep initial scaffold narrow, hand later edits to datocms-plugin-builder.

Step 1: Confirm scaffold mode

Silently inspect current directory.

Check for existing plugin (package.json with datocms-plugin-sdk, connect() entrypoint, Vite config). If exists and request is edit, switch to datocms-plugin-builder. Infer starting surface before asking.

Step 2: Ask only for missing essentials

Ask only when unclear:

  • plugin/folder name
  • private vs marketplace
  • initial surface/target scope (if changes scaffold)
  • currentUserAccessToken/external API needs

Skip if already clear.

Step 3: Load the small reference set

Load:

  • references/project-scaffold.md
  • references/surface-starters.md

Use for first implementation. Route expansion/maintenance to datocms-plugin-builder.

Step 4: Scaffold the project

Create plugin dir in cwd. Use Vite/React layout from references/project-scaffold.md. Add only needed entrypoints. Keep metadata minimal for private plugins. For marketplace: set npm name, keywords, homepage, permissions. Add only required optional dependencies. Install before verification.

Step 5: Wire the first surface

Use references/surface-starters.md for declaration, render, execute hooks.

Guardrails:

  • One top-level connect()
  • Wrap UI in <Canvas ctx={ctx}>; use noAutoResizer for pages/inspectors/full-width sidebars
  • Use switch for ID-dispatched render hooks
  • Use import type { ... } for SDK types
  • Keep ctx.openModal() params and ctx.resolve() JSON-serializable
  • No editor field extensions for modular content/single block/structured text
  • Stop at smallest working first version

Step 6: Verify

Install deps with chosen package manager. Run build. Tell user dev command and how to install local plugin. Name the single most important manual surface check.

Cross-skill routing

  • Existing plugin maintenance -> datocms-plugin-builder
  • Native UI design/layout restyling -> datocms-plugin-design-system
  • Standalone CMA scripts/schema work -> datocms-cma

Comments

Markdown supported