用途：当用户要求 Canvas UI 或特定 canvas/WebGL 交互时，把 Canvas UI 效果集成进网站。该技能以 https://github.com/DavidHDev/canvas-ui 为主要创意参考，要求安装其组件并阅读源码，而不是自行编写 shader 或 canvas 代码。选择或接线效果时需阅读 REFERENCE.md，其中包含完整组件目录、效果选择表、注册表命名规则以及 JSX 示例未覆盖的 vanilla 工厂约定。
主要能力与设计规则：每页只选一个主导效果作为主视觉，其余交给排版、间距与色彩；效果须服务于真实内容；动效应响应用户的指针与滚动操作，而非无缘无故的循环；不得牺牲可用性，文本可选中、链接可点击、表单可提交、焦点环保持可见；避免常见 AI 生成式外观，如紫蓝渐变主视觉、玻璃拟态卡片网格背景、emoji 功能点。工作流为先读内容，再据 REFERENCE.md 的效果表按调性选择效果（如流体/光学偏沉稳高级，故障/复古偏张扬技术，粒子/3D 适合产品展示），从注册表安装，围绕效果构建页面，并验证降级路径。
使用方式：Canvas UI 通过 shadcn 注册表以复制源码方式引入，不是 npm 依赖。首次使用需初始化：npx shadcn@latest init（仅当项目无 components.json 时）。安装示例：npx shadcn@latest add @canvas-ui/liquid-react；可将 liquid 换成 REFERENCE.md 中任意组件，将 react 换成 solid、preact、vue、svelte 或 vanilla。文件落在 components/canvasui/（Svelte 为 src/lib/components/canvasui/），可自行编辑。多数组件包裹内容而非并列放置。
限制：html-in-canvas 组件把实时 DOM 读作纹理，该 API 需要具备相应能力的 Chrome（需核对已安装版本与上游要求）；不支持的浏览器上预期降级为 WebGL 覆盖层，效果仍渲染但不再扭曲页面内容。需查看所选组件的 WebGL/浏览器支持，不要宣称所有浏览器可用，并把降级状态当作默认设计。护栏：尊重 prefers-reduced-motion；效果不得进入关键渲染路径以保证首屏为文字；vanilla 路径在销毁或路由切换时调用 destroy()；每页只用一个 WebGL 上下文；对比度按渲染结果而非底层 CSS 颜色衡量。许可证为 MIT + Commons Clause，可在自用项目中免费使用（含商用），但不得转售该库本身。其他细节如具体组件清单与工厂契约暂未提供。