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

canvas-contribution

GitHub

指导如何向 Drupal Canvas 模块贡献功能或修复。涵盖双仓库工作流、Issue Fork、合并请求及 Composer 补丁操作，包含 React UI 构建与 PHP 代码提交流程。

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

Trigger Scenarios

需要向 Canvas 模块提交上游补丁处理 Canvas Issue Fork 流程 Canvas 模块的 UI 构建与部署

Install

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

More Options

Use without installing

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

指定 Agent (Claude Code)

npx skills add grasmash/drupal-claude-skills --skill canvas-contribution -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": "canvas-contribution",
    "globs": [
        "patches\/canvas-*.patch",
        "**\/Sites\/canvas-contrib\/**\/*"
    ],
    "triggers": [
        "contribute to canvas",
        "canvas contribution",
        "canvas patch",
        "canvas issue",
        "canvas merge request",
        "drupal.org canvas",
        "canvas fork",
        "upstream canvas"
    ],
    "alwaysApply": false,
    "description": "Canvas contribution workflow for contributing features\/fixes back to drupal.org. Use when developing features for Canvas module that will be contributed upstream. Covers two-repository workflow, issue forks, merge requests, and composer patches."
}

Canvas Contribution Workflow

This skill extends the general drupal-contrib-mgmt skill with Canvas-specific details.

For the general drupal.org contribution workflow (issue creation, issue forks, commit format, HTML formatting), see the drupal-contrib-mgmt skill.

Canvas-Specific Setup

Repository Structure

Canvas Contrib Repo: ~/Sites/canvas-contrib/
GG App Repo: ~/Sites/myproject/

Initial Clone (One-Time)

cd ~/Sites
git clone git@git.drupal.org:project/canvas.git canvas-contrib

Canvas UI Development

Canvas has a React-based UI that requires building.

Build Commands

cd ~/Sites/canvas-contrib/ui
npm install
npm run lint    # Check for lint errors
npm run lint -- --fix  # Auto-fix lint errors
npm run build   # Build for production

After Applying Patches in GG

cd ~/Sites/myproject
composer reinstall drupal/canvas
cd docroot/modules/contrib/canvas/ui && npm run build
ddev drush cr

Canvas Issue Fork Example

Using issue #3569725 as an example:

cd ~/Sites/canvas-contrib

# Add fork remote
git remote add canvas-3569725 git@git.drupal.org:issue/canvas-3569725.git
git fetch canvas-3569725

# Checkout issue branch
git checkout -b '3569725-auto-scale-to-fit' --track canvas-3569725/'3569725-auto-scale-to-fit'

# Make changes, then commit
git add ui/src/path/to/files
git commit -m "$(cat <<'EOF'
Issue #3569725: Add auto scale-to-fit feature

- Feature detail 1
- Feature detail 2
EOF
)"

# Push
git push canvas-3569725 3569725-auto-scale-to-fit