motion-craft

仓库创建 2026年5月12日最近提交 9 小时前SkillHot 收录 20 天前

▸ 精选理由

可产出生产级动画代码并兼顾无障碍与性能。

▸ 风险提示

部分 ScrollTimeline/实验性 API 浏览器支持有限。

这个 Skill 做什么

为网页生成性能友好且可访问的 GPU 加速动画与滚动效果。

为网页做性能友好且可访问的动效设计，使用 WAAPI、ScrollTimeline、FLIP、合理的 easing，并兼顾 prefers-reduced-motion。适合页面过渡、滚动驱动动画或需要 GPU 加速的 UI 动效，不适合 Three.js/Canvas 类的复杂画布动画。强调每帧都有意义，同时兼顾性能和无障碍体验。

▸ 展开 SKILL.md 英文原文

Design GPU-accelerated animations with Web Animations API (WAAPI), Scroll-Driven Animations (ScrollTimeline/ViewTimeline), FLIP technique, easing systems, and accessibility (prefers-reduced-motion). Use when user asks to create animations, transitions, scroll effects, page transitions, or interactive motion for web UIs. Do NOT use for canvas-based animations (Three.js, PixiJS), video editing, or non-web (native mobile) motion design.

开发编程动画设计WAAPI无障碍滚动驱动通用

110

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/EliasOulkadi/shokunin/master/.pack/skills/motion-craft/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/EliasOulkadi/shokunin/master/.pack/skills/motion-craft/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Motion Craft

Animations that communicate, not decorate. Every frame must earn its place.

Inspired by Emil Kowalski (Linear, Sonner, Vaul), Paul Lewis (Google Chrome), and the CSS Animation Working Group.

## Workflow

## The Animation Decision Framework

Before writing any animation code, answer these four questions in order.

### 1. Should this animate at all?

| Frequency | Decision | Reason |
|-----------|----------|--------|
| 100+ times/day (keyboard shortcuts, command palette, search toggle) | No animation. Ever. | Animation makes frequent actions feel delayed. Raycast has no open/close animation. Optimal. |
| Tens of times/day (hover effects, list navigation) | Remove or drastical

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有