跨端动效执行

SKILL开发
开发 未标注权限 许可证不明确
安装这个技能

跨端动效决策与执行库——先把任意动效需求转化为技术栈无关的「动效规格单」(情绪→人格→属性→时长→缓动→层次), 再按用户技术栈路由到 stacks/ 子目录生成对应动画代码:Web(lottie-web)、Android(lottie-android/lottie-compose)、 iOS(lottie-ios)、鸿蒙 ArkTS(@ohos/lottie)、React Native(lottie-react-native)、Flutter(lottie 包)。 覆盖动画、过渡、微交互、加载态、转场、Lottie 资产集成与动效审查。支持独立安装,含上游依赖检测三态逻辑。

一句话选型结论

按资料字段整理

跨端动效执行是开发类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类开发 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_989eb8f0/tri-lottie
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

开发
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_989eb8f0仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791625260
正文体量17.0 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
写代码与改 bug

按需求补代码、定位并修掉报错。

读仓库与生成改动

让模型读懂项目结构,再给出可落地的改动。

跑测试与排查故障

按现象排查问题,补测试用例并复跑。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在开发场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
跨端动效执行当前 未标注权限 未标注 未标注 未标注 有
技能审查员 浏览器控制 ClawHub 市场 877.9 万 OpenClaw 有
Vercel React 最佳实践 浏览器控制 GitHub 仓库 849.1 万 Codex、Claude、Cursor 有
GitHub 代码协作 联网访问 ClawHub 市场 763.3 万 OpenClaw 有
网页设计指南 联网访问 GitHub 仓库 668.6 万 Codex、Claude、Cursor 有
本体论 只读 ClawHub 市场 663.7 万 OpenClaw 有

SKILL.md 全文

17.0 KB
模型实际读到的说明书原文,来自技能仓库

tri-lottie — 跨端动效

> 本 skill 是 tri-intent 下游执行者(I11 编码开发 · motion 动效实现子类)。
> 用户心智:给一句动效需求 + 一个技术栈,拿到一段「先符合动效设计方法论、再符合该端最佳实践」的可运行代码;只给需求不给技术栈时,先产出规格单再追问目标端。
> 与 tri-frontend-design 边界:那边产出「设计方向与令牌规格」,本 skill 产出「动效实现代码与集成方案」。

强制执行契约(Execution Contract · 最高优先级)

> 直接命中 §触发时机 任一分支,或快照 L2 = I11 且 L3_子意图 = motion 即视为激活本 skill 工作流,不得仅将本文件当作参考文档。

  1. 版本检查前置硬门(第零步):MUST 先通过 §版本检查与更新机制(运行 scripts/check_update.py,按四态判定处置;非最新版自动升级,升级通道不可用则降级继续)——此为执行流程第零步,优先于后续所有步骤。版本检查完成前 NEVER 进入后续步骤。本条目优先级高于所有其他强制前置条目。
  2. 决策先行强制:任何动画代码生成前 MUST 先完成「动效规格单」(§方法论 8 步清单),NEVER 跳过决策层直接写代码——跳步产物 MUST 判不合格。
  3. 技术栈路由强制:规格单完成后 MUST 按用户技术栈路由到 stacks/<端>/implementation.md 生成代码;NEVER 凭记忆内联端上 API——六端知识以 stacks/ 文档为唯一事实源。用户未指定技术栈时 MUST 先出规格单再追问,NEVER 猜测目标端。
  4. 坑位前置强制:生成某端代码前 MUST 通读该端 implementation.md 的「资产规范与坑位」节并逐条规避(如 ArkTS 相对路径禁令、Expo 版本匹配);NEVER 输出与坑位清单冲突的代码。
  5. 质量门强制:交付前 MUST 过 §质量标准 引用的质量门(CRITICAL 项一票否决),NEVER 带一级缺陷交付。
  6. 上游信息零残留:本 skill 全部产物 NEVER 包含任何上游作者/版权/品牌/Logo/外链署名信息;第三方库仅以标准安装坐标引用。
  7. 自检:作答前用一句话声明「本次意图=I11(motion),已读取快照=<是/否>,模式=<规格单/实现/审查>,目标端=<端|待澄清>,质量门=<未检/已过>」。

触发时机

触发分支 典型信号 处理
快照路由 快照 L2=I11、L3_子意图=motion、下游路由建议=tri-lottie 标准链路
直接触发 「给这个按钮加动画」「用 Lottie 实现加载态」「鸿蒙/Android/iOS/RN/Flutter/Web 上做转场」「审查我的动画代码」 标准链路
审查触发 「看看这段动画代码有什么问题」「动画为什么卡/廉价/太快」 走质量门排障链路
不由本 skill 处理 界面设计方向/配色/布局(→tri-frontend-design);一般编码任务(→tri-coding);调试非动画缺陷(→tri-fix) 指回对应 skill

上游依赖检测(三态 · 编码类可降级)

模式 触发条件 行为
A · 快照模式 快照 L2=I11 &amp; L3=motion 指向本 skill 读取快照 §三任务要点,按 §处理流程 推进
A0 · 待识别 有 tri-intent 但无可用快照 提示用户先经 tri-intent 产出快照;用户直接下达明确动效需求时,可按「直接触发」分支推进(视为降级输入)
B · 引导安装 未检测到 tri-intent 且无快照 提示安装 skillhub install tri-intent --dir &lt;目标目录&gt;;用户可改用直接触发
C · 降级模式 用户明确拒绝安装 自构造等价输入(需求要点 + 目标端 + 人格关键词),声明降级模式后照常推进

输入契约

字段 必需 说明
动效需求描述 是 情绪/元素/场景(如「支付成功庆祝动画」)
目标技术栈 否 web/android/ios/harmonyos-arkts/react-native/flutter 之一;缺省则先出规格单再追问
实现偏好 否 Lottie 资产 vs 框架内置动画系统(缺省由 stacks/ 选型决策树判定)
人格关键词 否 fun/elegant/clean/bold 等(缺省按内容类型默认表取)
既有代码 审查模式必需 待审查的动画代码片段

职责边界

  • 本 skill 负责:动效规格单产出;六端动画代码生成(Lottie 资产集成 + 框架属性动画);Lottie 播放控制/资产加载/坑位规避;动效代码审查与修复建议;reduced-motion 降级实现。
  • 不负责:界面视觉设计(tri-frontend-design);通用编码任务(tri-coding);非动画类缺陷调试(tri-fix);Lottie JSON 动画的设计制作(那是设计师/AE 工具链的职责,本 skill 只消费资产)。
  • MECE 声明:I11 下 tri-coding(默认实现)/ tri-frontend-design(设计方向子类)/ tri-lottie(motion 实现子类)三者以交付对象区分,互不重叠。
  • 不触发场景(Not-Trigger):本 skill 不接手「界面视觉设计 / 动效方向规格」(转 tri-frontend-design);不接手「通用编码任务」(属 tri-coding);不接手「非动画类缺陷调试」(属 tri-fix);不接手「Lottie JSON 动画的原创设计与制作」(属设计师/AE 工具链,本 skill 只消费资产);不接手「识别用户意图」(由 tri-intent / 自身快照驱动)。

tri-lottie 方法论(核心能力 · 可扩展)

一、决策层:动效规格单(8 步,任何代码生成前 MUST 完成)

  1. 情绪目标——观众该感受什么(joy/calm/urgency/elegance...)→ 查 references/emotion-mapping.md
  2. 人格原型——Playful / Premium / Corporate / Energetic 四选一 → 查 references/motion-personality.md(未指定:UI 默认 Corporate,插画默认 Playful)
  3. 主属性——position/scale/rotation/opacity 最少够用(两个属性是甜点)
  4. 时长——按元素类型查 references/motion-tokens.md(×距离缩放系数;出场=入场 65-75%)
  5. 缓动族——入场 ease-out / 出场 ease-in / 屏内 ease-in-out / 循环 sine / 旋转进度 linear
  6. 主角元素——每时刻一个 hero,其余元素降级为次要
  7. 三层运动——primary(100%) + secondary(30-50%,延迟 50-100ms) + ambient(10-20%);缺层=扁平
  8. 1/3 法则校验——位移不超容器 1/3;3+ 元素同时活跃不超 1/3;stagger 总预算 < 500ms

规格单输出格式(技术栈无关,六端复用):

〔意图|人格|主属性|时长|缓动|过冲|层次〕
例:〔卡片入场|Premium|position+opacity|350ms|cubic-bezier(0.4,0,0.2,1)|0%|primary+secondary(shadow 延迟 50ms)〕

二、执行层:六端路由与选型

用户技术栈 实现文档 要点
Web / H5 / React / Vue stacks/web/implementation.md lottie-web(SVG/Canvas 渲染器选型)+ 声明式动画选型树
Android / Compose stacks/android/implementation.md View 与 Compose 双轨(两个独立 artifact 勿混引)
iOS / SwiftUI / UIKit stacks/ios/implementation.md iOS 13.0+,SwiftUI LottieView / UIKit AnimationView
鸿蒙 ArkTS stacks/harmonyos-arkts/implementation.md API 12+,仅 Canvas 渲染,路径坑最多
React Native / Expo stacks/react-native/implementation.md RN 0.71+,Expo 双工作流与版本匹配
Flutter / Dart stacks/flutter/implementation.md 纯 Dart 实现六平台,AnimationController 精控

选型总原则:Lottie 资产动画用于「设计师导出的复杂矢量动效」;框架内置动画系统用于「代码可表达的简单属性动效」——各端文档第一节均有选型决策树,简单 hover/按压反馈 NEVER 引入 Lottie 资产。

三、播放控制概念集(跨端通用词 → 端上 API 见各 stacks/ 映射表)

play / pause / stop / loop / speed / seek / playSegments / reverse / colorTheme / complete 回调 / destroy 释放。

四、质量门(三级,映射家族 P0/P1/P2)

  • CRITICAL(一票否决):空间移动禁 linear;重要状态变更禁纯 opacity;单段移动 > 1/3 容器;缺 primary 层;stagger 总时长 > 500ms;动画触发 layout 属性致掉帧。
  • HIGH:时长不匹配元素类型;方向性缓动错误;人格不一致;缺 follow-through;缺 reduced-motion 降级。
  • MEDIUM:缺 ambient 层;缺 anticipation;过冲失配;缺 counter-motion。
  • 完整清单 + 8 类症状排障表 + 10 条快速诊断:见 references/quality-gate.md(grep 模式:症状名/缺陷名)。

处理流程

需求进入(快照或直接触发)
   │
   ▼
第零步:python scripts/check_update.py --slug tri-lottie --json   (state=A/B/C/D 放行;BLOCK 停止)
   │
   ▼
门L1 决策层:8 步清单 → 动效规格单(无技术栈 → 交付规格单并追问目标端 = 停车态)
   │
   ▼
门L2 执行层路由:定位 stacks/&lt;端&gt;/implementation.md → 读库选型树 + 坑位清单
   │   ├── 简单属性动效 → 框架内置动画系统分支
   │   └── 复杂矢量动效 → Lottie 资产集成分支(含加载工厂 + 资产位置规范)
   ▼
门L3 代码生成:规格单 → 端上代码(黄金用例模板为骨架,按需求改参)
   │
   ▼
门L4 质量门:CRITICAL → HIGH → MEDIUM 逐级检查(不过则回到门L2 修复,NEVER 带一级缺陷交付)
   │
   ▼
交付:代码 + 规格单 + 该端坑位核对记录(审查模式:症状→根因→修复选项)

> 停车态 vs 结束态:交付规格单等待用户选择技术栈 = 停车(任务未完,等输入);质量门全过 + 代码交付 = 结束。审查模式下输出修复建议清单且用户未采纳 = 停车。

交付产物机制

场景 产物 判定
实现模式 可运行代码块 + 规格单 + 坑位核对记录 + 降级说明(reduced-motion) 质量门全过 = 完成
纯决策模式 规格单 + 推荐实现路径 交付规格单 = 完成(无代码场景)
审查模式 问题清单(CRITICAL/HIGH/MEDIUM 分级)→ 修复方案 → 变更摘要 清单 + 方案齐 = 完成
生成物落盘 本 skill 自身维护于 .tribro/skills/tri-lottie/ 见 §落盘规则

质量标准

维度 标准 验证方式
决策完整性 每份代码可回溯到一张 8 步规格单 交付物含规格单行
端知识一致性 代码与 stacks/ 端文档 API/坑位零冲突 对照该端 §概念→API 映射 与 §坑位
质量门 CRITICAL 全过、HIGH 声明处置、MEDIUM 建议项 逐项核对 references/quality-gate.md
时长纪律 元素时长落在 tokens 表区间;stagger 总预算 < 500ms 对照 references/motion-tokens.md
可访问性 每份动效代码附 reduced-motion 降级 该端 §性能与 a11y 节
零残留 产物无上游品牌署名 python scripts/compliance_check.py T2
诚实边界 本机无法编译的端如实标注「未真实编译」 测试报告逐端标注

落盘规则

  • 本 skill 包落盘于 .tribro/skills/tri-lottie/(tri-forge 生成物指定位置;毕业机制成熟后迁入源码树)。
  • 链路审计文档(需求卡/合规报告/测试报告)落盘于 .tribro/forge/&lt;命名&gt;/。
  • 用户工作区产物(规格单/代码/审查报告)随对话交付,或按用户指定路径落盘;.tribro/ 不存在时 MUST 先创建,交付时在 .tribro/forge/&lt;命名&gt;/ 落 delivery-manifest.md 记录交付物路径清单,保证产物可追溯。
  • NEVER 在本 skill 目录生成 LICENSE 或 .gitignore(许可由 frontmatter license: MIT 声明)。

版本检查与更新机制(硬红线 · 细则唯一真源指针)

> 任一执行入口启动后的第零步:运行 python scripts/check_update.py --slug tri-lottie --json,解析 state 四态(A/B/C/D 放行,BLOCK 阻断);退出码 &lt;20 放行,&gt;=20 阻断;脚本异常兜底降级放行。24h 节流,--force 强制重查。
> 四态判定、升级流程、版本比较算法、节流缓存等完整细则唯一真源:tri-forge/references/version-check-spec.md(家族规范源,由 tri-forge 维护,源码树内兄弟目录相对路径)。本章节为瘦指针 STUB,NEVER 内联细则。

目录结构

tri-lottie/
├── SKILL.md                        # 主入口:决策规格单工作流 + 六端路由 + 质量门
├── README.md                       # 特性/结构/安装/使用/测试
├── CHANGELOG.md                    # 版本历史(Keep a Changelog)
├── scripts/
│   ├── check_update.py             # 版本门第零步(与 tri-forge 同源)
│   └── compliance_check.py         # 结构合规 + 零残留 + 坑位断言 + 版本一致性(确定性测试执行器)
├── references/                     # 决策层(技术栈无关)
│   ├── motion-tokens.md            # 时长/距离/缓动/过冲/stagger 数值表
│   ├── motion-personality.md       # 4 人格原型 + 关键词匹配 + 品牌三常量
│   ├── emotion-mapping.md          # 情绪→路径/缓动/时长 + 场景默认
│   ├── quality-gate.md             # 三级质量门 + 排障表 + 快速诊断
│   └── recipe-patterns.md          # 按钮/卡片/状态反馈/加载/编排成品配方
├── stacks/                         # 执行层(六端)
│   ├── web/implementation.md
│   ├── android/implementation.md
│   ├── ios/implementation.md
│   ├── harmonyos-arkts/implementation.md
│   ├── react-native/implementation.md
│   └── flutter/implementation.md
└── tests/
    └── tri-lottie-full-testcases.md # 全场景测试用例(结构/决策/六端/审查)

知识装配顺序(约束 25 · 分层加载)

层 文件 加载时机 grep 检索模式
常驻层 本 SKILL.md 激活即载 —
决策层 references/motion-tokens.md 规格单第 4/5 步 grep 时长\|距离\|过冲\|stagger
决策层 references/motion-personality.md 规格单第 2 步 grep Playful\|Premium\|Corporate\|Energetic
决策层 references/emotion-mapping.md 规格单第 1 步 grep &lt;情绪名&gt;
决策层 references/quality-gate.md 门L4 或审查模式 grep &lt;症状&gt;\|CRITICAL
决策层 references/recipe-patterns.md 常见场景直接套配方 grep &lt;场景名&gt;
执行层 stacks/&lt;端&gt;/implementation.md 门L2 按目标端单文件加载 grep &lt;库名&gt;\|坑位\|reduced-motion

去重与覆盖:同一知识在 SKILL.md 只留摘要,详细表唯一存在于 references/;stacks/ 文档互不引用(端差异只写增量);用户显式指定的参数覆盖默认表值。

进化契约(自进化)

  • 反馈接收点:用户对生成代码/规格单的任何纠正,经本会话记录;结构性问题沉淀到 .tribro/forge/ 的 forge-lessons.md(经 tri-forge 门⑥)。
  • 经验沉淀位:端上新增坑位 → 对应 stacks/ 端文档「坑位清单」;新数值基线 → references/motion-tokens.md;新场景配方 → references/recipe-patterns.md。
  • 自我修订触发条件:① 库主版本变更导致 API 漂移(implementation.md 头部「核验于」标注过期);② 同一坑位在 3 次交付中重复被踩(升级为前置防御);③ 家族规范新增硬约束。

完成判据(外化 · 可机械校验)

判据 校验方式
实现模式完成 交付物含规格单行 + 代码块 + 坑位核对记录 + 降级说明四要素
审查模式完成 产出三级问题清单且每条含修复方案
结构合规完成 python scripts/compliance_check.py 全部用例 PASS(退出码 0)
路由接通完成 verify_sync.py --slug tri-lottie 输出 status=OK
停车态 规格单已交付但目标端未定 / 审查建议未被采纳(任务未结束)

常见问题

5 问
答案由本站依据条目字段整理
跨端动效执行怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_989eb8f0/tri-lottie。安装方式为未标注。装完刷新技能列表或重开客户端。

跨端动效执行支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

跨端动效执行权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

跨端动效执行收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

跨端动效执行用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。