Claude Code Tambo 复合组件技能：分离 React 状态逻辑与样式
EnglishClaude Code 安装步骤
- 打开固定版本的仓库工作副本，确认 `.claude/skills/compound-components/SKILL.md` 存在。
- 从仓库根目录启动 Claude Code，输入 `/compound-components` 并描述要处理的内容与验证目标。
中文摘要
在 Tambo 工作副本中设计无样式的 Root 和子组件，用 Context 共享行为、渲染回调提供可见状态。适合把业务逻辑与不同视觉表现分开维护。
SKILL.md 中文导读
可复现示例
设计虚构的可折叠说明卡。Root 管理展开，Trigger 响应交互，Content 由使用方决定样式。要求用一套行为支持两种外观。工作步骤
- 确定由 Root 管理的状态，再安排子组件如何读到状态。
- 检查公开导出、渲染回调、DOM 状态标记和现有样式层是否各司其职。
验收方法
应有公开的命名空间组件与可读的展开状态。样式由调用方提供，内部 Context Hook 不出现在公开导出。
GitHub 原文 · 更新日期
适用环境
Claude Code、固定版本的 Tambo 工作副本和项目已配置的 React 依赖。
常见问题
为什么用渲染回调提供状态？
组件可以向使用者公开所需的状态和属性，同时让共享逻辑保留在内部，使用者可自己渲染标记。