skills.rest
AJV009
AJV009COMMUNITY
Explore all skills by this author →
Website𝕏@alphons009GitHub

component-authoring

Author React components for Drupal Canvas with component.yml and design tokens.

1|Updated Mar 22, 2026
Search Tags:#react#tailwind#cva#design-tokens#component-authoring#drupal-canvas
One-click install
npx skills add https://github.com/AJV009/drupal-devkit --skill component-authoring
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-authoring
Source: https://github.com/AJV009/drupal-devkit/tree/main/plugins/migrate-drupal-canvas/skills/component-authoring
Command: npx skills add https://github.com/AJV009/drupal-devkit --skill component-authoring

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured framework for authoring React components for Drupal Canvas and Drupal CMS, promoting consistency and interoperability across projects.

Core Features & Use Cases

  • Covers the technology stack (React 19, Tailwind CSS 4, CVA variants, cn utility)
  • Documents the component.yml prop and slot definitions, enum naming, and media prop types
  • Guides applying design tokens from global.css and enforcing the required folder structure
  • Use cases include building, editing, or fixing components under canvas/src/components/

Quick Start

Install this skill in your project and begin scaffolding a component with an index.jsx and component.yml following the guidelines.

Frequently Asked Questions about component-authoring

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

FAQPage Schema
How do I structure React components for Drupal Canvas?▼

To structure React components for Drupal Canvas, scaffold an index.jsx and component.yml file together under canvas/src/components/ to define props, slots, and rendering logic safely.

What's the best way to apply design tokens in Drupal Canvas components?▼

Apply design tokens in Drupal Canvas components by importing global.css variables and enforcing style conventions through Tailwind CSS 4 and the CVA library.

Do I need React 19 and Tailwind CSS 4 to build Drupal Canvas components?▼

Yes, building Drupal Canvas components requires knowledge of React 19, Tailwind CSS 4, and CVA to ensure scalable and interoperable component authoring across projects.

How does the component.yml file define props and slots for Drupal components?▼

The component.yml file defines Drupal component props and slots by specifying prop types, enum naming conventions, and media property structures for interoperable canvas rendering.

Why use CVA variants when authoring React components for Drupal CMS?▼

Use CVA variants when authoring React components for Drupal CMS to manage style conventions safely and create reusable, scalable visual variants without conflicting class names.

Related Skills

Explore More Software Engineering Skills→
acquiaacquia
16

nebula-component-creation

Copy example React components into src/components with dependencies and preview coverage.

Official
Intermediate
acquiaacquia
16

canvas-component-definition

Validate Canvas React components against the canonical component contract.

Official
Intermediate
acquiaacquia
16

canvas-styling-conventions

Enforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.

Official
Intermediate
AJV009AJV009
1

twig-templating

Standardize Drupal Twig templates with naming conventions and BEM CSS patterns.

Community
Intermediate