Agent Skills
› NeverSight/learn-skills.dev
› canvas-component-definition
canvas-component-definition
GitHub用于创建、修改或验证符合 Drupal Canvas 标准的 React 组件。确保包含 index.jsx、component.yml 等必要文件，并遵循命名与结构规范。协调调用其他技能以处理元数据、样式及数据获取等具体任务。
Trigger Scenarios
创建新的 Canvas 兼容 React 组件
重构现有组件以符合 Canvas 标准
验证组件是否满足 Canvas 最低契约要求
迁移组件至 Canvas 环境
Install
npx skills add NeverSight/learn-skills.dev --skill canvas-component-definition -g -y
SKILL.md
Frontmatter
{
"name": "canvas-component-definition",
"description": "Start here for any React component task to enforce the canonical Canvas component contract. Use for create, modify, refactor, review, migrate, or validate work. Establishes the canonical Canvas component contract, assuming repository components are Canvas targets, and guides either (1) transforming existing components to meet Canvas requirements or (2) creating new Canvas-ready components."
}
Canonical definition
A Canvas component is a package of:
- A React implementation (
index.jsx) - Canvas metadata/schema (
component.yml) - Naming and structure compatibility (
machineName, folder path, story path) - Canvas-compatible props/slots modeling
All four parts are required for the component to be usable in Drupal Canvas.
Minimum contract (MUST)
Every Canvas component MUST satisfy all checks below:
- Component folder exists at
<components-root>/<machine-name>/(use the repository's configured components root, which may be defined in.env) - React implementation exists at
<components-root>/<machine-name>/index.jsx - Metadata exists at
<components-root>/<machine-name>/component.yml component.ymlincludes required top-level keys (name,machineName,status,required,props,slots)- Folder name exactly matches
machineNameincomponent.yml(kebab-case) - A matching story exists at
<stories-root>/<machine-name>.stories.jsx(use the repository's configured stories root) - Props/slots follow Canvas rules (for example, avoid unsupported array-of-object prop shapes; use slots for repeatable complex content)
If any item is missing, the component is incomplete for Canvas usage.
Naming guidance
Use references/naming.md for naming rules and examples.
Skill coordination
Evaluate using companion skills in this order.
canvas-component-metadata- Use when creating/changing
component.yml, props/slots, enums, or fixing prop validation errors.
- Use when creating/changing
canvas-component-composability- Use when designing prop/slot structure, decomposing large components, deciding props vs slots, or modeling repeatable list/grid content.
canvas-styling-conventions- Use for all styling work: new components, style props, Tailwind token usage, CVA variants, class changes, and prop changes that affect styles.
canvas-component-utils- Use when rendering formatted HTML text or media via
FormattedTextandImage.
- Use when rendering formatted HTML text or media via
canvas-data-fetching- Use when fetching/rendering Drupal content with JSON:API, SWR, includes, and filter patterns.
canvas-component-upload- Use after implementation is complete and validated, when uploading and recovering from upload failures.
Version History
- e0220ca Current 2026-07-05 23:00
