Use when starting any conversation involving Canvas Code Components, Experience Builder, or Drupal CMS component development
From drupal-canvasnpx claudepluginhub ajv009/drupal-devkit --plugin drupal-canvasThis skill uses the workspace's default tool permissions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
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. </EXTREMELY-IMPORTANT>
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