用途
该技能用于创建无样式、可组合的 React 复合组件（Compound Components），遵循 Radix UI / Base UI 模式。组件本身不包含样式，而是通过上下文（Context）暴露行为与状态，由使用方控制渲染与样式，实现业务逻辑与样式的彻底分离。适用于构建 headless UI 原语、创建组件库、实现 Radix 风格命名空间组件，或当用户提及 "compound components"、"headless"、"unstyled"、"primitives"、"render props" 时使用。
主要能力
- 按步骤生成复合组件结构：上下文文件、Root 组件、消费者组件、命名空间导出（index.tsx），并验证所有规范。
- 创建上下文与钩子：上下文默认值为 null，钩子在缺少 Provider 时抛出明确错误。
- Root 组件支持
forwardRef、通过 RadixSlot支持asChild，并通过 data 属性（如data-state="open"）暴露状态供 CSS 使用。 - 消费者组件支持三种组合模式：直接子元素（静态内容）、render prop（需要内部状态）、子上下文（列表/迭代，每项独立上下文）。
- 提供模式选择表：静态内容用直接子元素；需要内部状态用 render prop；列表/迭代用子上下文；元素多态用 asChild；纯 CSS 样式用 data 属性。
- 列出反模式：硬编码样式、prop drilling、缺少错误边界、render prop 类型内联函数、默认导出、导出钩子、原语中自定义数据获取、重复实现基础逻辑、集合使用 getter 函数。
使用方式
技能以工作流清单引导：步骤 1 创建上下文文件；步骤 2 创建 Root 组件；步骤 3 创建消费者组件；步骤 4 创建命名空间导出；步骤 5 验证所有规范。每个步骤提供代码示例，可直接参考实现。项目规则明确：钩子为内部实现细节，不从 index 导出；消费者通过 render props 访问状态；同一包内样式包装层可直接从源文件导入钩子；原语可使用 @tambo-ai/react SDK 钩子，但自定义数据获取逻辑（组合数据源、外部提供者）应放在样式层；集合通过 render props 暴露时，应在 useMemo 中预计算所有 props 数组，而非提供 getter 函数。
适用场景
- 构建 headless UI 原语（无样式基础组件）。
- 创建组件库或设计系统。
- 实现 Radix 风格命名空间组件（如
Component.Root、Component.Content）。 - 需要将业务逻辑与样式分离的 React 组件开发。
限制
该技能面向 React 生态，依赖 forwardRef、Context、Radix Slot 等 React 特性；原语组件要求无样式，样式由使用方通过 className/props 控制；钩子不可作为公共 API 导出；自定义数据获取不得放在原语中。资料未提供安装命令、收费信息、平台支持范围或具体效果数据，暂未提供。