01 功能说明
为现有组件建立独立画布，对比受支持的变体，同时保留真实键盘、portal 和输入行为。
Component Canvas 为项目中已有的组件创建全屏检查界面。它将受支持的变体和有用状态分组，让设计师一眼对比并操作真实控件。源文件要求组件实现独立于画布。
这套工作流对“对比”有明确要求：比较尺寸时，文字、样式和数据保持不变；比较样式时，只改变样式。它也保留原生 portal、焦点和嵌套滚动行为，因此有用的预览不能只在默认状态截图中看起来正常。
预期交付物
阅读组件公开 API 和项目约定。先用测试数据、mock 或现有回调防止真实写入，再挂载单个组件。
按一致方式加入受支持的变体，每次只改变一个比较维度，并保留组件真实的禁用、聚焦和交互行为。
测试平移、缩放、适配视图和键盘导航，同时检查嵌套滚动及原生 portal 行为。只持久化视角，并确认重置不会清除预览状态。
02 适用场景
不能为了让预览正常而修改组件源代码、hook 或样式。
03 关键决策
示例通过原生指针和键盘交互响应。
保持其他属性不变，才能看出某个变体实际改变了什么。
视角和布局逻辑与组件源代码保持分离。
04 示例任务
以下示例任务说明尚未经过测试。使用前请检查该技能的设置。
指定要包含的组件和公开变体。
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求；这不是安装命令。
运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。
使用 component-canvas，检查我们现有的 Button、Select 和 Dialog 组件。阅读公开 API，用测试数据展示受支持的具名变体。每次只比较一个属性，标签和其他设置保持一致。不修改组件源代码，使用当前主题 provider。先完成一个安全示例，再添加其余分组。在多个缩放级别验证键盘输入、焦点、嵌套滚动和 portal 位置。报告省略的情况，以及因缺少设备而无法执行的检查。根据以下可观察标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。
在可平移缩放的画布上检查真实 UI 组件及其变体。
由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md