SuperAPI AI 工具集

Skill 广场

找到适合任务的 Agent Skill,阅读介绍并复制安装命令。

更新于 10-26 00:15

设计与创作

20,837 个结果

ui-animation

这是一个面向 UI 动效与动画的指南型技能,用于在设计、实现或评审动效、缓动、时序、减少动效行为以及 CSS 动画时提供规范与示例。它强调动画应服务于澄清因果关系或提供克制的愉悦感,交互应保持快速(200-300ms,仅示意性动画可到 1s),不应给键盘交互加动画,优先使用 CSS,必要时才用 WAAPI 或 JS,并保证动画可中断、由输入驱动,同时尊重 prefers-reduced-motion。内容还覆盖应动画的属性(移动与空间变化只动 transform 和 opacity,简单状态反馈可用颜色/背景/透明度过渡)、禁止动画布局属性和 transition: all、SVG 的变换写法、主题切换时禁用过渡、空间与排序(transform-origin 设在触发点、对话框/菜单从 scale(0.85-0.9) 开始、错开显示不超过 50ms)、缓动默认值、无障碍与性能建议,并提供 examples.md 作为片段与实用技巧参考。

设计与创作56 次安装

write-first-design

Write-First Design 是一种在投入大量设计或实现工作之前,先用简短书面说明澄清不确定产品决策的方法。它主张在改动成本还很低时,用文字(prose)解决产品方向上的不确定性。当已有清晰的用户需求说明、既有决策文档或范围明确的 UI 修改时,无需再额外撰写说明或走审批流程。对于意图不明的大型工作,则记录预期用户结果、拟议改动、理由以及有价值的非目标,并可用“我们相信[改动]会带来[结果],因为[原因]”这样的假设句式来表达。该方法强调解释有意义的设计选择,让协作者能在昂贵实现之前进行评估,只针对会实质性改变工作的未决问题提问,其余情况给出合理假设并在授权范围内继续推进。它要求写作者与构建者保持紧密,当实现揭示不同权衡时更新理由。完成标准是交付所要求的说明,或在要求实现时交付已实现并验证的改动。

设计与创作56 次安装

gsap-plugins

GSAP 官方插件技能,用于指导使用与审查 GSAP 各类插件的代码,涵盖插件注册、滚动、DOM/UI、文本、SVG、物理与缓动等场景。资料明确说明所有 GSAP 插件均免费(含商用),自 Webflow 收购后不再有付费会员层,无需许可证密钥或认证令牌,所有插件都包含在公开的 gsap npm 包中,可通过 import 从 gsap/ 路径引入。技能强调用 gsap.registerPlugin() 一次性注册所需插件,并提示在 React 中应于顶层注册而非在会重渲染的组件内注册。主要覆盖插件包括:ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、DrawSVG、MorphSVG、MotionPath 等,另提及 CustomEase、EasePack、CustomWiggle、CustomBounce 与 GSDevTools。ScrollTrigger 有独立技能。资料给出了各插件的用途、关键配置项与代码示例,并说明部分限制(如 DrawSVG 只影响描边、SplitText 不支持 SVG text 等)。

设计与创作56 次安装

gsap-timeline

gsap-timeline 是 GSAP 官方提供的时间线(Timeline)技能,用于把多个补间动画组织成有序或并行的多步骤动画。它围绕 gsap.timeline() 构建,核心是位置参数(position parameter),可精确控制每个补间在时间线上的绝对时间、相对前后动画的偏移、或相对标签与最近动画的位置。该技能适用于制作关键帧式动画、按顺序编排动画序列、协调多个补间同时或先后播放等场景。时间线支持默认值继承、标签、嵌套、播放控制(播放、暂停、反向、跳转、重启、销毁)以及整个时间线级别的 repeat、yoyo 和回调。资料同时给出官方最佳实践与常见误区,例如优先用时间线而非 delay 串联动画、用 addLabel() 提升可读性、将 ScrollTrigger 放在时间线或顶层补间上而非内部补间。配套技能方面,单个补间与缓动使用 gsap-core,滚动驱动的时间线使用 gsap-scrolltrigger,React 中使用 gsap-react。

设计与创作56 次安装