Menu
Use when starting any conversation involving Canvas Code Components, Experience Builder, or Drupal CMS component development
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when reviewing Drupal code for standards compliance across PHP, JavaScript, CSS, Twig, YAML, SQL, and markup — dynamically loads relevant standards per file type using Drupal's official community guidelines.
How to write, modify, and style React components for Drupal Canvas and Drupal CMS. Covers the technology stack (React 19, Tailwind CSS 4, CVA variants, cn utility), component.yml prop and slot definitions, enum naming, image and video prop types, formatted text fields, color scheme variants, theme tokens from global.css, required folder structure (index.jsx + component.yml), and matching source site visual styles including extracting design tokens, dark backgrounds, gradient text, glass/blur effects, and updating global.css theme. Use when building, editing, or fixing any component in src/components/.
Managing content in Drupal CMS via JSON:API. Covers listing, fetching, creating, updating, and deleting pages and content entities using npm run content commands. Includes page component structure (uuid, component_id, inputs, parent_uuid, slot), image uploading and media target_id handling, formatted HTML text fields, UUID generation, input format reference mapping component.yml prop types to JSON formats, menu item listing (menu_items--main, menu_items--footer, menu_items--social-media are read-only via API — must use admin UI for create/update/delete), page path alias management, and common pitfalls like wrong media IDs, link props as objects instead of strings, plain strings for HTML fields, target_id as integer instead of string, langcode errors, and JSON:API read-only mode. Use when composing pages, adding components to pages, uploading images, or interacting with the Drupal CMS content API.
Search and fetch Canvas and Drupal CMS documentation pages. Takes a query describing what you need to know (e.g., "code components", "page regions", "known issues", "data fetching") and returns the full content of matching documentation pages. Invoke with /canvas-docs-explorer <query>. Use this whenever you need to understand how Canvas or Drupal CMS works, verify platform behavior, check for limitations, or find configuration options.
Use when setting up a new Drupal CMS project with Canvas for component development. Covers DDEV, JSON:API write mode, Canvas OAuth client, permissions, page regions, menus, project scaffolding, .env, CSS layer fix, and Storybook validation. Every step is idempotent — safe to re-run.
Step-by-step guide for scaffolding a new React component from scratch. Covers copying an existing component as a base, creating the required index.jsx and component.yml files, naming conventions (snake_case machineName, no project prefixes), creating the matching Storybook story file, reusing existing components via imports, composability patterns, and internal component setup (status false). Use when a needed component does not yet exist in src/components/ and must be created.
| name | using-drupal-canvas |
| description | Use when starting any conversation involving Canvas Code Components, Experience Builder, or Drupal CMS component development |
IF A SKILL APPLIES TO YOUR TASK, YOU DO NOT HAVE A CHOICE. YOU MUST USE IT.
Canvas components have strict contracts (component.yml, CVA variants, slot decomposition, theme tokens). The skills encode these rules. Skipping them means broken uploads, styling failures, or silent data loss.
drupal-canvas skills provide Canvas-specific guidance, but user instructions always take precedence:
In Claude Code: Use the Skill tool with the drupal-canvas: prefix. Example: invoke drupal-canvas:canvas-component-authoring when building components. Never use the Read tool on skill files.
In Cursor: Skills are available in the .cursor-plugin/ configuration.
In Gemini CLI: See GEMINI.md at the plugin root.
Invoke relevant skills BEFORE any response or action.
canvas-component-authoring — Use when building, editing, or fixing any component in src/components/. Covers React 19, Tailwind CSS 4, CVA, cn utility, component.yml, enum naming, image/video props, FormattedText, color variants, theme tokens, slot decomposition, and data fetching with SWR. This is the primary skill — invoke it for any component work.canvas-scaffolding — Use when a needed component does not yet exist in src/components/ and must be created. Covers copy-from-example workflow, naming conventions, component contract, and dependency resolution.canvas-storybook — Use when creating, updating, or fixing any Storybook story file. Covers Storybook 10, atomic design hierarchy (atoms/molecules/organisms), CSF3 format, page stories, structural testing, and real assets pattern.canvas-project-setup — Use when setting up a new Drupal CMS project with Canvas for component development. Covers DDEV, JSON:API write mode, OAuth client, permissions, page regions, menus, CSS layer fix, and Storybook validation. Every step is idempotent — safe to re-run.canvas-content-management — Use when composing pages, adding components to pages, uploading images, or interacting with the Drupal CMS content API via JSON:API. Covers page structure, media handling, input format reference, menu management, and 7 common pitfalls.canvas-docs-explorer — Use when you need to understand how Canvas or Drupal CMS works. Fetches official documentation from curated URL catalog with 13 Canvas docs + Drupal CMS docs + Drupal Core reference.canvas-component-builder (opus) — Dispatch when building complete Canvas components with Storybook verification. Follows a 6-step process: read requirements → build component → create story → sanity check → composition → validate. Has access to canvas-component-authoring, canvas-scaffolding, canvas-storybook, and canvas-docs-explorer skills.canvas-storybook-qa (sonnet) — Dispatch when you need visual QA comparing Storybook renders against design specs or source site screenshots. Reports discrepancies with severity classification and evidence artifacts.These thoughts mean STOP — you're rationalizing skipping a skill:
| Thought | Reality |
|---|---|
| "I know React, I can build this" | Canvas components have strict contracts (component.yml, CVA-only colors, no className prop). Check canvas-component-authoring. |
| "Let me just create the file" | canvas-scaffolding has the copy-from-example workflow and dependency resolution. |
| "The story is simple" | canvas-storybook covers atomic design placement, structural testing, and the real assets pattern. |
| "I'll figure out the API" | canvas-content-management documents 7 common pitfalls that cause silent failures. |
| "Let me set up the project" | canvas-project-setup has the CSS layer fix and OAuth gotchas that break builds. |
| "I can read the docs myself" | canvas-docs-explorer has a curated URL catalog and known issues section. |
canvas-component-authoring first — for ANY component work, always start herecanvas-scaffolding — only if the component doesn't exist yetcanvas-storybook — after the component is built, create/update the storycanvas-content-management — when composing pages or managing contentcanvas-project-setup — only for initial project setupcanvas-docs-explorer — to fill knowledge gaps about Canvas or Drupal CMS