Back to Details

emilkowalski-skill

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

emilkowalski-skill

emilkowalski-skill

Catalogue stub — full package: emilkowalski/skill
目录存根 — 完整包：emilkowalski/skill

Decision tree

决策树

Run this before any animation or design engineering work:
  1. Is the skill already installed? Check: 
    ~/.design-agent-skills/skills/emil-design-eng/SKILL.md
    exists.
    • Yes → invoke 
      emil-design-eng
      and proceed
    • No → go to step 2
  2. Do you have shell access?
    • Yes → run the install command below, then invoke the skill
    • No → show the install command; in Claude Code, send it as a chat message starting with 
      !
      — add 
      -g
      for global install or omit for project-only
在开展任何动画或设计工程工作前，请执行以下步骤：
  1. 该Skill已安装？ 检查：
    ~/.design-agent-skills/skills/emil-design-eng/SKILL.md
    是否存在。
    • 是 → 调用 
      emil-design-eng
      并继续
    • 否 → 进入步骤2
  2. 你拥有Shell访问权限？
    • 是 → 运行下方的安装命令，然后调用该Skill
    • 否 → 展示安装命令；在Claude Code中，发送以
      !
      开头的聊天消息执行命令 — 添加
      -g
      进行全局安装，省略则仅在当前项目安装

Install command

安装命令

bash
npx skills add emilkowalski/skill --skill emil-design-eng
Or for all skills in the package:
bash
npx skills add emilkowalski/skill
bash
npx skills add emilkowalski/skill --skill emil-design-eng
或者安装包内所有Skill：
bash
npx skills add emilkowalski/skill

Invoke after install

安装后调用

  • Skill name: 
    emil-design-eng
  • Trigger phrases: "Emil Kowalski", "design engineering", "animation decision", "easing curves"
  • Skill名称：
    emil-design-eng
  • 触发短语："Emil Kowalski"、"design engineering"、"animation decision"、"easing curves"

What it does

功能说明

Emil Kowalski's complete design engineering methodology — animation decision framework (4 steps: should it animate? purpose? easing? duration?), required custom CSS easing curves, component interaction principles (button scale on 
:active
, 
scale(0.95)
entry animations, origin-aware transforms), CSS transitions over keyframes for interruptibility, and strict typography rules (65ch cap, tabular-nums, 
…
not 
...
). Used by the creator of Sonner, Vaul, and animations.dev.
Emil Kowalski的完整设计工程方法论 — 包含动画决策框架（4步：是否需要动画？动画目的？缓动方式？时长？）、必备的自定义CSS缓动曲线、组件交互原则（按钮
:active
状态缩放、
scale(0.95)
入场动画、基于原点的变换）、优先使用CSS过渡而非关键帧以支持中断，以及严格的排版规则（行宽上限65ch、tabular-nums、使用
…
而非
...
）。该方法论由Sonner、Vaul和animations.dev的创作者所使用。

When NOT to use

不适用场景

  • Backend, APIs, data work
  • When motion is already well-handled
  • 后端、API、数据相关工作
  • 动效已处理完善的场景