SuperAPI AI 工具集

trickle-ui

前端与建站

查看项目

更新于 10-29 04:36

技能介绍

Trickle UI 是一套针对文本动画的集成与审查说明,而非通用“UI 套件”。其分发形式是源码注册表,私有文档应用并不是需要安装的包;上游宣传主张应与实际检查的实现区分开。

用途与分支:按需求选择最小分支——评估库(检查许可证、所选原语、清单和生成的 JSON)、添加文本显现(优先选用满足需求的最简 CSS 原语)、添加循环/打字文本(同时检查有状态原语与 TextRoot)、诊断注册表安装(比对源码导入、声明依赖、生成文件与目标别名)、审计整页动画成本(转交 optimize-web-animations 并以所选原语作为上下文)。选择组件或引用兼容性前应阅读 references/upstream.md;不要用 README 徽章替换已检查的包版本,固定包与 README 可能不同,兼容性由使用者的实际环境决定。

集成包冻结:记录组件名、文本与语义元素、一次性或循环行为、触发方式、减少动态回退、目标文件、现有 cn 别名与 CSS 入口点;只选一个原语,而不是安装整个目录或文档应用。例如 WordCascade 需检查 registry/default/word-cascade/word-cascade.tsx 及其清单条目;Typewriter 需检查其源码、text-root 与生成的安装项,其他原语需独立验证。仓库的 components/orchestration 带 MIT 条款,复制或实质性使用时保留版权与许可声明;LICENSE-DEMOS 仅将 CC0 适用于 registry/examples/,不得推广到任意站点资产或字体。

交付路径:未要求修改目标时默认仅做源码检查。经单独授权的集成,在调用 CLI 前先检查注册表项,资料给出的上游示例命令为 npx shadcn@latest add https://tricklekit.dev/r/typewriter.json,该命令是上游文档示例、未执行、非固定可复现安装;latest 会执行下载代码,实时注册表可能不同于记录提交,执行及文件/CSS 变更需获批准,否则提供审查包或使用允许的提交固定源码并附声明。不要建议以 npm install trickle 作为分发路径。生成的 Typewriter 项目标是 components/trickle/typewriter.tsx,并引用 https://tricklekit.dev/r/text-root.json,内嵌来自 @/registry/default/text-root/text-root 的源码导入,需确认实际安装的导入已改写为使用者布局;复用使用者的 cn 工具而非复制平行助手。

CSS 与渲染:将清单中的 cssVars 与 css 随 TSX 一起携带;WordCascade 需要动画令牌、关键帧与减少动态规则,Typewriter 需要光标规则与钩子依赖,仅复制 TSX 不完整。逐原语检查客户端边界:WordCascade 无客户端指令或钩子,Typewriter 使用 React 状态与定时器;“零动画库依赖”不等于“零客户端 JavaScript”,状态组件并非仅服务端。必要时确认禁用 JavaScript 下的可读内容。

语义与动态控制:使用真实标题、链接或按钮承担交互,不用装饰性 span 作控件;拆分字形/单词应提供一个连贯的可访问名称,而非重复朗读字符。Typewriter 隐藏变化的视觉 span,向辅助技术暴露首个目标,需确保静态短语传达相同关键含义;循环字符串若含不同事实,应在稳定可访问内容中暴露。保持键盘焦点与触摸行为常规,文本动画不得依赖悬停或拦截输入;应用减少动态 CSS 与有状态钩子的偏好路径,为减少动态、CSS 失败与不支持视觉特性提供可用静态结果,避免添加逐字播报的嘈杂实时区域;持续自动运动应评估暂停/停止控件,而非仅假设媒体查询足够。

生命周期与性能:据资料,TextRoot 会移除媒体查询监听并断开观察器,但其延迟视图触发超时在清理时未清除;Typewriter 会清除自身每步超时,需分别审查,观察器断开不取消定时器。视图触发是一次性启动逻辑,不是离屏暂停逻辑。授权适配时,在所有者卸载或变化时取消所有待处理延迟(含视图触发延迟),检查文本/字符串属性变化、空输入、可见性与路由重挂载,限制长文本与逐字符 DOM 数量;CSS 遮罩、模糊与大量独立动画 span 仍需测量,CSS 并非无成本。

验证与交接:在授权目标中验证解析导入、CSS 合并、SSR/首绘、水合、无 JS 可读性、键盘/触摸行为、减少动态切换以及待处理视图延迟期间有界路由循环,并测试空文本与多字符串内容;报告实际命令与浏览器观察,与源码发现区分。返回分支、所选原语/固定版本、权利/署名、依赖与 CSS 位置、源码注意事项、经授权的目标变更、已运行检查与未解决的浏览器行为。资料中 evals/evals.json 的场景未由该来源编写任务执行。

适用示例与边界:需要“安装 Trickle Typewriter 且不用动画库”时走有状态分支,检查 TextRoot 与注册表 CSS/导入,批准执行并保留稳定可访问文本;需要纯 CSS 单词显现时检查 WordCascade 而非 Typewriter;设计共享槽/变体 API 应交给 design-system;选择无关光标拖尾应交给 web-design,react-bits 拥有其命名组件。本技能补充这些所有者,不建议停用现有技能。