用途
canvas-component-composability 是一个面向 Canvas 的 React 组件设计指导技能，目标是让组件具备良好的可组合性。它的核心理念是：优先使用小型、专注的组件，而不是带有大量 props 的单一巨型组件。当某个组件开始堆积许多互不相关的 props 时，应将其分解为更小、可组合的部件。
这一思路与 Canvas 用户构建页面的方式一致——用户通过在组件内部放置其它组件来搭建页面。
主要能力
技能提供了以下设计判断依据与模式：
何时应当拆分组件。当组件具备以下迹象时，考虑将其拆解：
- 服务于不同目的的 props 超过 6-8 个；
- 某些元素本身适合作为独立组件（如面包屑、标题、元数据、导航）；
- 内置了限制其使用位置的布局假设；
- 包含多个可独立复用的明显视觉区块。
使用插槽（slots）实现灵活组合。插槽是可组合性的主要机制。与其通过 props 传递复杂数据，不如用插槽让父组件接收子组件。
何时使用插槽与何时使用 props 的对照：
- 使用插槽：数量可变的子组件；应由用户组合的内容；复杂的嵌套结构；不同实例间会变化的内容。
- 使用 props：单一的必需值（文本、URL）；配置选项（尺寸、颜色）；简单数据（字符串、布尔值）；跨实例保持一致的内容。
在 component.yml 中声明插槽，并在 JSX 中以具名 props 的形式渲染。关于确切的插槽 schema 与约束（map 与 []、插槽键、children 处理），应以 canvas-component-metadata 作为权威依据。
常见的拆分模式：
- 页面级元素应为独立组件：出现在许多页面、但不总是同时需要的元素，应拆分为独立组件。
- 将重复模式抽取为小组件，例如：日期 + 分类/标签 → article-meta；封面图 + 下载按钮 → resource-cover；标签 + 值对 → metadata-item；图标 + 文本链接 → icon-link。
- 使用布局组件而非内置布局：不要把两栏或网格布局硬编码进内容组件，而应使用布局组件并将内容组合进去。
何时不应拆分：
- 它们总是同时出现，单独存在没有意义；
- 它们共享大量内部状态，向上提升会很不自然；
- 视觉设计将它们紧密耦合（例如重叠元素、共享背景）；
- 拆分后只会产生在其他地方都用不上的、仅有一两个 props 的组件。
使用方式
技能提供了参考文档映射，按需加载：
- 可重复列表/网格及数组到插槽的转换：references/repeatable-content.md
- 空 flex/grid 容器中的插槽交互性：references/repeatable-content.md（“Slot container minimum size” 一节）
插槽的精确 schema 与约束遵循 canvas-component-metadata。
适用场景
- 设计组件的 prop/插槽结构时；
- 组件开始累积大量 props、需要重构时；
- 在 Canvas 中构建可被用户自由组合的页面组件时。
限制
资料未提供该技能的具体安装命令、支持平台、收费方式或性能效果等信息，暂未提供。