canvas-component-authoring

To style React components for Drupal Canvas, this skill guides you to use Tailwind CSS 4 alongside CVA variants and a cn utility, ensuring standardized and reusable styling across your project.

The required structure for authoring a Drupal Canvas component involves creating an index.jsx file paired with a component.yml file under the src/components/ directory to define implementation and metadata.

Aligning component props with theme tokens involves documenting naming conventions for enums and media fields in component.yml, then matching those definitions to the project's theme tokens sourced from global.css.

Yes, you can replicate visual styles like gradient text and glass effects in Drupal Canvas components by applying specific Tailwind classes and updating the theme tokens within your global.css file.

Yes, this skill supports building components with React 19 for Drupal CMS by providing a standardized approach that covers the full technology stack including Tailwind CSS 4 and CVA variants.

The required metadata frontmatter for a Drupal Canvas component includes a name and description, structured as YAML with three sections, alongside optional resource directories for scripts and references.