canvas-component-composability

分类: 内容与多媒体 | 上传者: acquia | 下载: 0 | 版本: v1.0（最新）

使用插槽和分解优先模式设计 Canvas 就绪的 React 组件。在以下情况下使用：(1) 设计组件的 prop/slot 结构，(2) 组件变得太大，(3) 在 props 与 slot 之间做出决定，(4) 重构整体组件，(5) 对可重复的列表/网格内容进行建模。确保画布兼容性。 --- 更喜欢小型、集中的组件，而不是具有许多 props 的整体组件。当一个组件开始积累许多不相关的 props 时，请将其分解为更小的、可组合的部分。 ## 参考图

更新日志: Source: GitHub https://github.com/acquia/nebula

目录结构

当前层级: tree/main/.agents/skills/canvas-component-composability/

📁 references/
- 📄 repeatable-content.md 2.2 KB
📄 SKILL.md 3.2 KB

SKILL.md

---
name: canvas-component-composability
description:
  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.
---

Prefer small, focused components over monolithic ones with many props. When a
component starts accumulating many unrelated props, decompose it into smaller,
composable pieces.

## Reference map

Load references only as needed:

- Repeatable lists/grids and array-to-slot conversion:
  `references/repeatable-content.md`
- Slot interactivity in empty flex/grid containers:
  `references/repeatable-content.md` ("Slot container minimum size" section)

## Signs a component should be decomposed

Consider breaking up a component when it has:

- More than 6-8 props that serve distinct purposes
- Props for elements that make sense as standalone components (breadcrumbs,
  titles, metadata, navigation)
- Built-in layout assumptions that limit where the component can be used
- Multiple distinct visual sections that could be reused independently

## Use slots for flexible composition

Slots are the primary mechanism for composability. Instead of passing complex
data through props, use slots to let parent components accept child components.
This matches how Canvas users build pages by placing components inside other
components.

### When to use slots vs props

| Use slots for                         | Use props for                       |
| ------------------------------------- | ----------------------------------- |
| Variable number of child components   | Single, required values (text, URL) |
| Content that users should compose     | Configuration options (size, color) |
| Complex nested structures             | Simple data (strings, booleans)     |
| Content that varies between instances | Content consistent across instances |

### Declare slots in component.yml

Declare slots in `component.yml` and render them as named props in JSX.

For exact slot schema and constraints (map vs `[]`, slot keys, `children`
handling), follow `canvas-component-metadata` as the source of truth.

## Common decomposition patterns

### Page-level elements should be separate components

Elements that appear on many pages but are not always needed together should be
separate components.

### Extract repeated patterns into small components

When the same combination of elements is repeated, extract it:

- Date + category/tag -> `article-meta`
- Cover image + download button -> `resource-cover`
- Label + value pairs -> `metadata-item`
- Icon + text link -> `icon-link`

### Use layout components instead of built-in layouts

Do not bake two-column or grid layouts into content components. Use layout
components and compose content into them.

## When not to decompose

Keep components together when:

- They always appear together and never make sense separately
- They share significant internal state that would be awkward to lift up
- The visual design tightly couples them (for example, overlapping elements,
  shared backgrounds)
- Decomposition would create components with only 1-2 props that are not useful
  elsewhere

登录后下载/点赞/收藏 ❤ 9 | ★ 0

canvas-component-composability

目录结构

SKILL.md

举报内容

提示