# Acquia Nebula Canvas Component Definition

> Canonical definition

- Skill: `tomevault-io/acquia-nebula-canvas-component-definition` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/acquia-nebula-canvas-component-definition`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/acquia-nebula-canvas-component-definition/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/acquia-nebula-canvas-component-definition

---


## Canonical definition

A Canvas component is a package of:

1. A React implementation (`index.jsx`)
2. Canvas metadata/schema (`component.yml`)
3. Naming and structure compatibility (`machineName`, folder path, story path)
4. Canvas-compatible props/slots modeling

All four parts are required for the component to be usable in Drupal Canvas.

## Minimum contract (MUST)

Every Canvas component MUST satisfy all checks below:

- Component folder exists at `<components-root>/<machine-name>/` (use the
  repository's configured components root, which may be defined in `.env`)
- React implementation exists at `<components-root>/<machine-name>/index.jsx`
- Metadata exists at `<components-root>/<machine-name>/component.yml`
- `component.yml` includes required top-level keys (`name`, `machineName`,
  `status`, `required`, `props`, `slots`)
- Folder name exactly matches `machineName` in `component.yml` (kebab-case)
- A matching story exists at `<stories-root>/<machine-name>.stories.jsx` (use
  the repository's configured stories root)
- Props/slots follow Canvas rules (for example, avoid unsupported
  array-of-object prop shapes; use slots for repeatable complex content)

If any item is missing, the component is incomplete for Canvas usage.

## Naming guidance

Use `references/naming.md` for naming rules and examples.

## Skill coordination

Evaluate using companion skills in this order.

1. `canvas-component-metadata`
   - Use when creating/changing `component.yml`, props/slots, enums, or fixing
     prop validation errors.
2. `canvas-component-composability`
   - Use when designing prop/slot structure, decomposing large components,
     deciding props vs slots, or modeling repeatable list/grid content.
3. `canvas-styling-conventions`
   - Use for all styling work: new components, style props, Tailwind token
     usage, CVA variants, class changes, and prop changes that affect styles.
4. `canvas-component-utils`
   - Use when rendering formatted HTML text or media via `FormattedText` and
     `Image`.
5. `canvas-data-fetching`
   - Use when fetching/rendering Drupal content with JSON:API, SWR, includes,
     and filter patterns.
6. `canvas-component-upload`
   - Use after implementation is complete and validated, when uploading and
     recovering from upload failures.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/acquia) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->