frankxai/awesome-motion-design-agent-skills

web-motion-auditor

Use when reviewing web animations, UI transitions, scroll effects, hover states, loading states, GIF/video captures, reduced-motion support, animation performance, or motion polish in HTML, React, Next.js, or Vercel apps.

查看源码

使用方法

  1. 复制安装命令,在自己的智能体环境安装前先检查源码包。
  2. 从原始文档核对所需工具、凭据和支持的宿主。
  3. 说明输入材料与期望交付物,并对照来源检查输出。
npx skills add https://github.com/frankxai/awesome-motion-design-agent-skills --skill web-motion-auditor

开始前需了解

  • 安装不包含模型订阅、API 额度或访问文件的权限。
  • 仓库星数和安装量反映活跃情况,不等于独立质量或安全测试。
仓库原始内容

按源仓库内容呈现,保留标题、案例、代码、表格、链接以及原文引用的演示图片。

Web Motion Auditor

Workflow

  1. Run or open the app.
  2. Inspect the animated states: load, hover, focus, click, route transition, scroll, empty/loading/success/error.
  3. Check accessibility:
  • prefers-reduced-motion
  • focus visibility
  • no motion that blocks reading or interaction
  1. Check performance on desktop and mobile widths.
  2. Capture screenshots/video when possible.
  3. Score with the motion quality rubric.
  4. Return concrete fixes with file references.

Common Fixes

  • Shorten transitions.
  • Use transforms/opacity instead of layout-heavy properties.
  • Reduce stagger count.
  • Add reduced-motion branch.
  • Replace decorative motion with state-explaining motion.
  • Move complex narrative motion to Remotion or a controlled hero scene.

按任务相关推荐

来自同一仓库

更多 Skills

全部 Skills
frankxai
社区

generative-media-director

Use when planning, prompting, generating, editing, routing, finishing, or QAing AI-created images, GIFs, videos, style frames, image-to-video clips, social ads, cinematic brand assets, motion studies, or multi-provider generative media workflows using Codex imagegen, GPT Image, Sora, Grok Imagine, Veo, Luma, Runway, Higgsfield, Remotion, Playwright, ffmpeg, Figma, Canva, or Vercel.

安装量
1
GitHub Stars
76
最近更新
10月14日
frankxai
社区

motion-director

Use when designing motion concepts, animation systems, choreography, timing, easing, reduced-motion behavior, or deciding which motion stack to use for web UI, video, GIF, Rive, Lottie, GSAP, Motion, Remotion, or Three.js work.

安装量
1
GitHub Stars
76
最近更新
10月14日
frankxai
社区

remotion-video-agent

Use when creating or editing Remotion videos, programmatic explainers, motion graphics, MP4 renders, GIF renders, social cutdowns, or React-authored video templates.

安装量
1
GitHub Stars
76
最近更新
10月14日
frankxai
社区

site-motion-excellence-director

Use when planning, auditing, specifying, implementing, or improving premium website/app motion across FrankX, Arcanea, Starlight, or Vercel/Next.js sites. Use for motion design systems, site choreography, scroll motion, generated media integration, runtime selection, reduced-motion planning, visual QA, and turning rough motion ideas into implementation-ready specs.

安装量
1
GitHub Stars
76
最近更新
10月14日