What problem does it solve?
Ensures React components meet the canonical Canvas contract so they are discoverable, renderable in Workbench, and safe to publish to Drupal Canvas. It prevents incomplete components that lack implementation, metadata, correct naming, or compatible props/slots from causing integration or preview failures.
Core Features & Use Cases
- Canonical Definition Enforcement: Verifies presence of a React implementation (index.jsx), Canvas metadata (component.yml), matching folder machineName, and Workbench mock expectations.
- Metadata and Props/Slots Validation: Checks component.yml contains required top-level keys such as name, machineName, status, required, props, and slots and flags unsupported prop shapes.
- Workbench Mock Guidance: Recommends placement and content for mocks.json to ensure meaningful preview coverage beyond the built-in Default tab.
- Use Cases: Use when creating new Canvas-ready components, refactoring existing components to Canvas standards, reviewing component readiness before publishing, or migrating components into a Canvas project.
Quick Start
Use the canvas-component-definition skill to validate or create a Canvas component by checking its index.jsx, component.yml, folder name, props/slots, and Workbench mock coverage.
