Token导航 LogoToken导航TokenDH.com
中转站排行榜
前端设计external-servicegithub未标认证来源可访问许可证需确认审计提醒

adding-animations（添加动画）

Agent Skill

用于辅助视频生成、动画合成、脚本化剪辑或 Remotion 等视频项目开发。它适合让 Agent 组织镜头、生成素材说明、维护合成代码或排查渲染问题。使用时需要确认分辨率、时长、素材路径和导出格式；涉及外部素材、人物肖像或商业发布时，应先核对版权授权和内容审核要求。

总安装

890

周安装

36

GitHub Stars

11

下载量

279
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：adding-animations（添加动画）
来源仓库：https://github.com/fusengine/agents
仓库路径：skills/adding-animations
安装命令：
npx skills add https://github.com/fusengine/agents --skill adding-animations
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills
npx skills add https://github.com/fusengine/agents --skill adding-animations

简介

adding-animations 用于为网页组件添加滚动动画和交互效果，提升视觉体验。

  • 适用于需要实现 fadeUp、hover 深度或 stagger 入场动画的现代网站设计场景。
  • 根据 motion personality 配置 timing 和 easing，使用 IntersectionObserver 触发 section 入场动画。
  • 使用前需确认分辨率、素材版权和导出格式，涉及人物肖像或商业发布时应核对授权要求。
  • 适用宿主包括 Codex、Claude、Cursor、Gemini CLI，接入前应确认版本、权限和运行环境要求。

SKILL.md

Phase 4: ADDING ANIMATIONS — Motion, states, and visual effects

When

After Phase 3 components are generated. Before design audit.

Input (from Phase 3)

  • Generated HTML/CSS components with variants and layouts.
  • Motion personality from design-system.md (corporate / modern / playful / luxury).

Steps

  1. Read motion personality from design-system.md — determines timing, easing, and intensity.
  2. Entrance animations — EVERY section must animate on scroll (IntersectionObserver). Stagger children by 80-120ms. Use fadeUp (translateY 30px→0) + fadeIn (opacity 0→1). Cards stagger in grid order.
  3. Hover depth — buttons: translateY(-3px) + shadow-lg + brightness(1.05). Cards: translateY(-8px) + shadow-xl + scale(1.01). Links: color transition 150ms.
  4. Focus/disabled —:focus-visible with 2px outline + 4px offset.:disabled with opacity 0.4 + cursor not-allowed. MANDATORY on all interactive elements.
  5. Visual layers — glassmorphism on nav (backdrop-blur 12px + bg oklch/0.85). Hero gradient overlay (oklch dark/0.6→transparent). Section separators (clip-path polygon or SVG wave). Background gradient orbs (radial-gradient oklch with blur).
  6. Micro-interactions — button press scale(0.97), toggle slide 200ms, form input focus border-color transition, loading skeleton pulse animation.
  7. Add page transitions from references/page-transitions.md — route-level animations.
  8. Implement — Use mcp__gemini-design__modify_frontend to inject Framer Motion code into existing components.
  9. Validate accessibility — prefers-reduced-motion support required. Timing limits: hover <100ms, modal <300ms, page <400ms (see references/motion-principles.md).

Output

  • All components animated with Framer Motion matching the motion personality.
  • Interactive states (hover, focus, active, disabled, loading) on every interactive element.
  • Visual effects applied where allowed. Reduced-motion fallbacks included.

Next → Phase 5: DESIGN AUDIT

5-design-audit/SKILL.md — Audit visual consistency, accessibility, and anti-AI-slop.

References

FilePurpose
references/motion-patterns.mdCore Framer Motion patterns
references/motion-principles.mdTiming limits and principles
references/entrance-patterns.mdEntrance animation patterns
references/interactive-states-ref.mdState definitions (hover, focus, etc.)
references/micro-interactions.mdMicro-interaction patterns
references/glassmorphism-advanced-ref.mdGlassmorphism techniques
references/layered-backgrounds-ref.mdLayered background effects
references/page-transitions.mdRoute-level transitions
references/patterns-cards.mdCard animation patterns
references/patterns-buttons.mdButton animation patterns
references/patterns-navigation.mdNavigation animations
references/patterns-microinteractions.mdDetail micro-interactions
references/reduced-motion.mdprefers-reduced-motion a11y patterns

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

35.25%
按下载量换算98

Claude

32.46%
按下载量换算91

Cursor

19.36%
按下载量换算54

Gemini CLI

8.59%
按下载量换算24

安全审计

Gen Agent Trust Hub

通过

Socket

可疑

Snyk

通过

权限和风险

external-service

该 Skill 可能调用第三方服务、云服务或外部模型 API，使用前需要确认账号、额度、数据发送范围和服务条款。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果，不能写成本站确认安全。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/fusengine/agents

SKILL.md 来源

github.com

/fusengine/agents/tree/main/skills/adding-animations

skills-sh

skills.sh

/fusengine/agents/adding-animations

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

adding-analytics（添加分析）

用于辅助数据整理、表格处理、CSV/Excel 分析、指标计算和图表准备。它适合让 Agent 清洗字段、汇总数据、发现异常、生成统计口径或把分析结果转成可读说明。使用时需要确认数据来源、字段含义和时间范围，避免把样本数据当全量事实；涉及敏感数据、导出文件或批量写回时，应先确认权限和脱敏边界。

下一个 Skill

adding-mod-parsers（添加 mod 解析器）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。