canvas-component-composability
Prefer small, focused components over monolithic ones with many props. When a component starts accumulating many unrelated props, decompose it into smaller, composable pieces.
For repeatable card/list/grid UI, default to two Canvas components: a parent
layout component with a slot for the repeated children, and a child component
for one item. Do not flatten repeated items into numbered prop groups such as
car1Name, car2Name, feature1Title, or card3Image.
Ownership
This skill owns the reusable modeling rules for:
- props vs slots
- variants vs granular props
- repeatable-content patterns
- granularity checks (split, merge, slot extraction)
For the canonical reuse-first policy, follow
More from drupal-canvas/skills
canvas-component-definition
Start here for any React component task to enforce the canonical Canvas
96canvas-component-metadata
Define valid component.yml metadata for Canvas components, including props,
94canvas-component-utils
Use utility components to render formatted text and media correctly. Use when
80canvas-data-fetching
Fetch and render Drupal content in Canvas components with JSON:API and SWR
80canvas-styling-conventions
Style Canvas components with Tailwind CSS 4 theme tokens and approved utility
77canvas-component-push
Push validated Canvas component changes to Drupal Canvas and recover from
52