Agent Skills › grasmash/drupal-claude-skills › drupal-canvas

drupal-canvas

GitHub

Drupal Canvas 代码组件入口，引导使用官方上游技能套件进行 React/JSX 组件开发、修改与推送，并提供 Twig SDC 及贡献指南。

skills/drupal-canvas/SKILL.md grasmash/drupal-claude-skills

触发场景

构建或编辑 Canvas 代码组件在代码组件与 Twig SDC 间做选择寻找 Canvas 相关指导

安装

npx skills add grasmash/drupal-claude-skills --skill drupal-canvas -g -y

更多选项

不安装直接使用

npx skills use grasmash/drupal-claude-skills@drupal-canvas

指定 Agent (Claude Code)

npx skills add grasmash/drupal-claude-skills --skill drupal-canvas -a claude-code -g -y

安装 repo 全部 skill

npx skills add grasmash/drupal-claude-skills --all -g -y

预览 repo 内 skill

npx skills add grasmash/drupal-claude-skills --list

SKILL.md

Frontmatter

{
    "name": "drupal-canvas",
    "description": "Entry point for Drupal Canvas Code Components (React\/JSX). Points to the officially maintained drupal-canvas\/skills suite (component definition, metadata, push, styling, data fetching, regions, page definition, content templates) and to this repo's complements for Twig SDCs and upstream contribution. Use when creating, modifying, or pushing Canvas Code Components, or when deciding which Canvas skill applies."
}

Drupal Canvas Code Components — use the upstream suite

Canvas Code Components (React/JSX) are covered by the officially maintained drupal-canvas/skills suite (MIT licensed). This repo does not mirror it: a local copy goes stale as upstream evolves, and stale component rules are worse than none. Install the real thing:

npx skills add drupal-canvas/skills

To scaffold a codebase for Code Components, upstream publishes a CLI: npx @drupal-canvas/create <project>.

When This Skill Activates

Building, editing, or pushing a Canvas Code Component
Choosing between a Code Component and a Twig SDC
Looking for Canvas guidance and unsure which skill holds it

Upstream skills

The suite ships these skills (check the repo for the current list):

canvas-component-composability
canvas-component-definition
canvas-component-metadata
canvas-component-push
canvas-component-utils
canvas-content-templates
canvas-data-fetching
canvas-design-decomposition
canvas-headless
canvas-navigation-components
canvas-page-definition
canvas-regions
canvas-styling-conventions
canvas-workbench

Complements in this repo

The upstream suite is React/JSX only. For everything else:

drupal-canvas-sdc — Twig Single Directory Components in themes and modules: component.yml schemas, Canvas registration rules, component config entities, versioning, and deploy pitfalls.
canvas-contribution — contributing Canvas features and fixes back to drupal.org (issue forks, merge requests, composer patches).