canvas-component-authoring

What problem does it solve?

This skill guides developers to write, modify, and style React components for Drupal Canvas and Drupal CMS using a standardized approach that ensures consistency, reusability, and clear documentation across projects.

Core Features & Use Cases

• Covers the technology stack (React 19, Tailwind CSS 4, CVA variants, cn utility) and explains how to define component props and slots in a component.yml.
• Documents naming conventions (enum names, image/video prop types, and formatted text fields) and demonstrates how to align them with the project’s theme tokens from global.css.
• Provides the required project structure (index.jsx + component.yml) and guidance for matching source site visual styles such as dark backgrounds, gradient text, glass/blur effects, and updating theme tokens.
• Use when building, editing, or fixing any component in src/components/.

Quick Start

Create a new component under src/components/ following the index.jsx and component.yml structure, then start implementing and styling it with Tailwind and CVA according to the guidelines.