技能库智客分类：Agent 工作流 emilkowalski-motion

Emilkowalski Motion

由埃米尔·科瓦尔斯基动画指导所启发的动作设计后续技能. 在一个接口存在后使用来添加有味的微互动,状态过渡,以及带有产品级约束的页面运动.

官方网址：GitHub

技能介绍

先看中文介绍；官方 description 原文单独保留，不改写 SKILL.md。

做什么

由埃米尔·科瓦尔斯基动画指导所启发的动作设计后续技能. 在一个接口存在后使用来添加有味的微互动,状态过渡,以及带有产品级约束的页面运动.

何时用

官方 description 未单独写出 Use when。按规范，代理会在用户任务与这段 description 的关键词匹配时激活本技能。

代理如何加载

按 Agent Skills 渐进披露：启动时只加载 name 与 description（约 100 token）；任务匹配后才读入整份 SKILL.md 正文；scripts/、references/、assets/ 仅在需要时再读。本文件正文结构：Emil Kowalski Motion Follow-Up、Workflow、Motion Rules、Implementation Notes。其中含规范建议的小节：分步指令。

文件分析

文件分析：这是一份仅含 SKILL.md 的指令型技能，代理激活后整份正文进入上下文。

官方 description（原文）

Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.

Emil Kowalski Motion Follow-UpWorkflowMotion RulesImplementation Notes

来源分类：GitHub skill

来源与网址

市场来源：GitHub

开源榜 Skill 分类

SKILL.md 与 Agent 调用

官方规范 ↗

name: emilkowalski-motion
description: Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.

发现技能客户端向 Agent 提供名称与描述目录。
匹配与调用用户指定或任务匹配后，载入 SKILL.md 指令。
按需加载按步骤读取参考文档、使用脚本与素材。

具体调用语法与可用工具以目标 Agent 客户端为准。查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围，保留技能包的附属文件，安装后检查客户端能否发现该技能。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理，确认其中的目标目录与客户端匹配。

把 Agent Skill「emilkowalski-motion」安装到我的项目：SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-7b97c7e44f630110-Emilkowalski-Motion.html
请存为 .cursor/skills/emilkowalski-motion/SKILL.md 或 .claude/skills/emilkowalski-motion/SKILL.md，frontmatter 的 name 与 description 保持原样，不要改写。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表，确认实际名称。

npx skills add 'https://github.com/nexu-io/open-design/tree/HEAD/skills/emilkowalski-motion' --list

目标客户端安装范围

npx skills add 'https://github.com/nexu-io/open-design/tree/HEAD/skills/emilkowalski-motion' --skill 'emilkowalski-motion'

CLI 会交互选择目标 Agent，默认安装到项目；用户级安装使用 -g。先通过查看命令核对仓库内容，再用 npx skills list 检查已安装技能。

SKILL.md 原文可复制，不会改动源文件

---
name: emilkowalski-motion
description: |
  Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.
triggers:
  - "emil kowalski"
  - "motion polish"
  - "micro interaction"
  - "interaction animation"
  - "tasteful animation"
  - "动效润色"
od:
  mode: prototype
  surface: web
  platform: desktop
  category: animation-motion
  upstream: "https://emilkowal.ski/skill"
  preview:
    type: html
  design_system:
    requires: true
  craft:
    requires:
      - animation-discipline
      - accessibility-baseline
  example_prompt: |
    Use emilkowalski-motion on the current HTML artifact: add restrained micro-interactions, state transitions, and reduced-motion fallbacks without changing the core layout.
---

# Emil Kowalski Motion Follow-Up

Use this skill after a design artifact already exists. The goal is to make the interface feel alive without turning it into a motion demo.

## Workflow

1. Inspect the current HTML, component, or selected page element before adding animation.
2. Pick the smallest set of motion moments that clarify state or hierarchy:
   - entry reveal for the primary content
   - hover / active feedback for important controls
   - transition between UI states
   - scroll reveal only when it helps the story
3. Prefer `transform` and `opacity`. Avoid animating layout properties such as `top`, `left`, `width`, or `height`.
4. Use one motion language across the artifact. Do not mix unrelated easings, durations, or physics.
5. Add `prefers-reduced-motion` fallbacks for any automatic or scroll-linked motion.
6. Keep copy, data, and layout intent intact unless the user explicitly asks for a redesign.

## Motion Rules

- Default UI transitions should feel quick and useful: 140-220ms for most controls.
- Larger page reveals can be slower, but must not block reading.
- Avoid endless decorative loops unless they communicate status or progress.
- Do not add custom cursors, noisy particle effects, or motion that competes with content.
- Stagger only small groups. Long staggered lists make interfaces feel slow.

## Implementation Notes

- For plain HTML, CSS keyframes and small JavaScript observers are enough.
- For React or framework code, use the local stack already present in the repo.
- If GSAP is available and the motion needs sequencing, pair this with `gsap-core`, `gsap-timeline`, or `gsap-scrolltrigger`.
- Always clean up observers, timers, and animation instances.

阅读排版

name: emilkowalski-motion description: | Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint. triggers:

"emil kowalski"
"motion polish"
"micro interaction"
"interaction animation"
"tasteful animation"
"动效润色" od: mode: prototype surface: web platform: desktop category: animation-motion upstream: "https://emilkowal.ski/skill" preview: type: html design_system: requires: true craft: requires:
- animation-discipline
- accessibility-baseline example_prompt: | Use emilkowalski-motion on the current HTML artifact: add restrained micro-interactions, state transitions, and reduced-motion fallbacks without changing the core layout.

Emil Kowalski Motion Follow-Up

Use this skill after a design artifact already exists. The goal is to make the interface feel alive without turning it into a motion demo.

Workflow

Inspect the current HTML, component, or selected page element before adding animation.
Pick the smallest set of motion moments that clarify state or hierarchy:
- entry reveal for the primary content
- hover / active feedback for important controls
- transition between UI states
- scroll reveal only when it helps the story
Prefer transform and opacity. Avoid animating layout properties such as top, left, width, or height.
Use one motion language across the artifact. Do not mix unrelated easings, durations, or physics.
Add prefers-reduced-motion fallbacks for any automatic or scroll-linked motion.
Keep copy, data, and layout intent intact unless the user explicitly asks for a redesign.

Motion Rules

Default UI transitions should feel quick and useful: 140-220ms for most controls.
Larger page reveals can be slower, but must not block reading.
Avoid endless decorative loops unless they communicate status or progress.
Do not add custom cursors, noisy particle effects, or motion that competes with content.
Stagger only small groups. Long staggered lists make interfaces feel slow.

Implementation Notes

For plain HTML, CSS keyframes and small JavaScript observers are enough.
For React or framework code, use the local stack already present in the repo.
If GSAP is available and the motion needs sequencing, pair this with gsap-core, gsap-timeline, or gsap-scrolltrigger.
Always clean up observers, timers, and animation instances.

Emilkowalski Motion

技能介绍

做什么

何时用

代理如何加载

文件分析

SKILL.md 与 Agent 调用

安装这个技能

Emil Kowalski Motion Follow-Up

Workflow

Motion Rules

Implementation Notes

相关技能

Skill Creator

Clawdhub

Agent Team Orchestration

Superpowers