Canvas UI 是一项面向 DavidHDev/canvas-ui 组件的操作技能，用于在网站或应用中挑选并集成其 live-DOM canvas 视觉效果，同时处理框架与渲染器选型、打包检查以及 HTML-in-Canvas 回退等问题。该技能文件夹包含原创操作指引，不捆绑上游引擎。
一、用途与适用场景 当任务明确指向 DavidHDev 的 Canvas UI 或某个 @canvas-ui 注册表组件时使用；当 Canvas UI 集成需要选择框架或渲染器、或需要修复回退路径时使用；当已有 Canvas UI 行为需要检查生命周期、动效或输入路径时使用。资料同时划定了边界：React Bits 目录及其动画 React 组件归 react-bits；自定义 shader、滚动或 CSS 视觉方案归 web-design；绘图编辑器或 HTML Canvas API 教程归应用自身的 canvas 实现；页面身份或排版方向归设计方向类技能。该流程无需安装相邻技能即可使用。
二、许可与分发边界 复制源码前应阅读所选修订版本的完整 LICENSE.md。该许可允许将组件作为应用、网站或产品的一部分使用，但限制销售、再许可或再分发组件本身，包括打包与移植版本。不得将其简单标为 MIT，也不得以 README 中较短的许可摘要覆盖许可文件。若用于组件市场、可复用套件或库再分发，应停止该分发路径，需获得许可或改用适当授权的替代方案。第三方模型、图像与字体权利需单独处理。
三、变体与打包检查 需记录效果、框架、渲染器、目标路由与预期回退。资料中的文档提供 React、Vue、Svelte、Solid、Preact 与 vanilla 变体，集成前应阅读所选变体。WebGL 是默认构建；WebGPU 注册表名称在框架后追加 -webgpu。安装前应确认实时注册表元数据，因为 @latest 与注册表 URL 可变，且未被该参考的 SHA 固定。应优先使用文档生成的独立组件，而非仅依赖仓库包装器；注册表组装会将依赖内联到安装源码中，需将实际安装文件与依赖同打包约定比对。HTML-in-Canvas 为实验性，不能与 WebGPU 支持互换；在 canvasui.dev 上可运行的 demo 不能证明目标域名具备所需浏览器能力或 origin trial。捕获、图形初始化或渲染器失败时应保留普通 HTML。
四、集成方式 为包装器设定明确的布局尺寸并保留语义内容。输出 canvas 应作为装饰，排除在无障碍树之外，并对指针目标透明；保留真实链接、标签与键盘可操作控件。React 集成应放在客户端边界，保留包装器的安全服务端快照与 effect 清理，而非将 GPU 工作移入 render。Vanilla 集成需自行管理创建、尺寸/选项更新与 destroy()。应检查实际选项类型，而非臆造通用的 pause 或 quality 属性。
五、生命周期与动效控制 移除或路由切换时，应释放引擎、帧、监听器、观察器及其持有的 GPU 资源。避免在其循环外再套一个外部动画循环。应尊重减少动态效果设置，提供静态可读路径；需逐个检查效果，不应将 Liquid 的指针门控推广到整个目录。应暂停不必要的隐藏或离屏工作，并限制排队的交互工作。资料称已检查的 Liquid 引擎已有相关防护，应予以保留。分辨率上限是实现限制，不是实测帧率承诺。
六、回退与验证 应在目标应用上检查一条受支持路径与一条能力不可用路径，验证内容可见性、点击、选择、键盘焦点、滚动、缩放、触摸与路由重挂载，并覆盖减少动态效果与隐藏/离屏时段。ParticleScroll 在无 HTML-in-Canvas 时应保持可读可交互，资料称其已检查的包装器在该回退路径上会隐藏输出 canvas。应在实际测量处记录控制台失败与目标设备性能。该仅源码审计未建立运行时或跨浏览器结果。
七、审批边界与示例 公开源码检查为只读操作。依赖/注册表安装、浏览器标志或配置更改、origin trial 注册、MCP 客户端配置、付费资产与部署均需单独授权。资料给出的命令为已检查示例而非已执行的安装步骤：npx shadcn@latest add @canvas-ui/liquid-react 与 npx shadcn@latest add @canvas-ui/liquid-react-webgpu。示例场景包括为某个 React hero 添加 Liquid，需检查许可与注册表打包、选择渲染器、保留可用 HTML 并验证清理与回退；若为销售而打包 Canvas UI 移植版本，应停止组件再分发路径。最佳实践是使用一个有充分理由的效果而非整页包装，在 GPU 启动前保持语义内容可用，并明确报告未执行的检查。