canvas-component-definition

Validate Canvas React component contracts for required files and naming conventions.

14|2|Updated Feb 14, 2025

Search Tags:#react #validation #naming #component-definition #workbench #canvas-component

Ready to run

npx skills add https://github.com/balintbrews/canvas-starter --skill canvas-component-definition-balintbrews

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas-component-definition
Source: https://github.com/balintbrews/canvas-starter/tree/main/.agents/skills/canvas-component-definition
Command: npx skills add https://github.com/balintbrews/canvas-starter --skill canvas-component-definition-balintbrews

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Canvas component contracts provide a standardized interface for Canvas components, enabling consistent previews, validation, and integration with Workbench.

Core Features & Use Cases

Validates required files and naming conventions for Canvas components (index.jsx, component.yml, machineName)
Enables generation and review of Workbench mocks and naming references in references/
Supports evolution of components from creation to migration within Drupal Canvas workflows.

Quick Start

Create or review a component by placing index.jsx, component.yml, and mocks.json beside the component folder and consult references/naming.md for naming rules.

Frequently Asked Questions about canvas-component-definition

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I define a React component for the Drupal Canvas workbench?▼

To define a React component for the Drupal Canvas workbench, you need an index.jsx entry point, a component.yml metadata file, and associated mocks. The component folder name must match the machineName specified in your component.yml file.

What are the required top-level keys in component.yml for Canvas components?▼

The required top-level keys in component.yml for Canvas components are name, machineName, status, required, props, and slots. These keys enforce the standardized component contract needed for consistent previews and validation.

How do I validate naming conventions for Canvas components?▼

You validate naming conventions for Canvas components by ensuring the folder name matches the machineName and consulting the references/naming.md file. This structural rule enforces the canonical component contract during creation and review.

What is the canonical Canvas component contract used for?▼

The canonical Canvas component contract provides a standardized interface for React components. It enables consistent previews, validation, and integration with the Workbench environment across Drupal Canvas workflows.

Can I use this to migrate existing React components into Canvas workflows?▼

Yes, you can use this to migrate existing React components into Canvas workflows. It supports component evolution from creation to migration by enforcing structural rules and generating required Workbench mocks and references.

Why does my Canvas component validation fail without mocks.json?▼

Canvas component validation fails without mocks.json because the canonical contract requires associated mocks alongside the component folder. These mocks enable consistent previews and integration with the Workbench environment.