skills.rest
drupal-canvas
drupal-canvasOFFICIAL
Explore all skills by this author →
GitHub

canvas-component-composability

Design composable Canvas-ready React components using slots and decomposition-first patterns.

3|1|Updated Feb 11, 2026
Search Tags:#react#decomposition#composition#canvas#slots#component-design
One-click install
npx skills add https://github.com/drupal-canvas/skills --skill canvas-component-composability-drupal-canvas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-component-composability
Source: https://github.com/drupal-canvas/skills/tree/main/skills/canvas-component-composability
Command: npx skills add https://github.com/drupal-canvas/skills --skill canvas-component-composability-drupal-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design Canvas-ready React components with slots and decomposition-first patterns. Use when (1) Designing a component's prop/slot structure, (2) A component is growing too large, (3) Deciding between props vs slots, (4) Refactoring monolithic components, (5) Modeling repeatable list/grid content. Ensures Canvas compatibility.

Core Features & Use Cases

  • Slot-based composition for flexible UI assembly.
  • Decomposition-first approach to break down large components.
  • Guidance on when to split components and how to declare slots in component.yml.

Quick Start

Sketch a component by identifying distinct slots (header, content, footer) and refactor a large component into smaller, reusable pieces using slots.

Frequently Asked Questions about canvas-component-composability

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

FAQPage Schema
How do I design composable React components with slots for Canvas?▼

Use a decomposition-first approach to break large monolithic React components into smaller, reusable pieces, declaring clear prop and slot interfaces in component.yml to ensure modular Canvas-ready architecture.

When should I use slots instead of props in React component design?▼

Use slots instead of props when modeling repeatable list or grid content and assembling flexible UI structures, ensuring clear modularization practices for Canvas-compatible React component architecture.

How do I refactor a large React component into smaller modular pieces?▼

Refactor a large React component by applying decomposition-first patterns to split it into smaller reusable pieces, defining clear slot interfaces in component.yml to maintain Canvas compatibility.

Does Canvas component architecture require declaring slots in component.yml?▼

Canvas component architecture requires clear slot declarations in component.yml to support slot-based composition, ensuring modularization practices and flexible UI assembly for React components.

What are the limitations of using slots for React component composition?▼

Slot-based composition requires careful decomposition to avoid overly fragmented interfaces, ensuring React components remain modular and Canvas-compatible without creating unnecessary prop and slot complexity.

Related Skills

Explore More Software Engineering Skills→
acquiaacquia
16

canvas-component-composability

Decompose React components into Canvas-compatible slot and prop structures.

Official
Intermediate
AJV009AJV009
1

canvas-component-composability

Decompose React components into modular slot-driven units for Canvas compatibility.

Community
Intermediate
ThomashighbaughThomashighbaugh
1

css-container-queries

Style components with CSS container queries based on container size.

Community
Intermediate
Elmanuel1Elmanuel1

vercel-composition-patterns

Refactor React components using compound components and lifted state providers.

Community
Intermediate