두 가지 모드**를 가진 모션 및 상호작용 디자인 스킬 — 목적이 있는 움직임으로 인터랙티브 컴포넌트를 만들거나, 기존 애니메이션을 감사하는 것. 두 모드 모두 세 가지 서로 다른 모션 디자인 관점에서 출발한 각 디자이너의 맥락 인식 지침을 제공합니다.

에밀 코왈스키, 야쿱 크레헬, 제이 톰킨스의 공개 출판 작품에서 추출한 내용입니다 (출처 참조).

설치

Claude Code, Cursor, Windsurf 및 기타 AI 코딩 어시스턴트와 함께 작동합니다.

그것이 하는 일들

이 스킬은 프로젝트의 맥락에 따라 가중치가 부여된 세 가지 뚜렷한 모션 디자인 철학을 적용합니다:

중요한 것은 단일 규칙이 아니라 세 렌즈 간의 생산적인 긴장감에 있습니다. 에밀은 애니메이션을 편집했고, 제이가 덧붙였습니다.

Design Motion Principles

A motion and interaction design skill with two modes — build interactive components with purposeful motion, or audit existing animations. Both modes give context-aware, per-designer guidance drawn from three distinct motion-design lenses.

Distilled from the publicly published work of Emil Kowalski, Jakub Krehel, and Jhey Tompkins (see Credits).

Installation

npx skills add kylezantos/design-motion-principles

Works with Claude Code, Cursor, Windsurf, and other AI coding assistants.

What It Does

The skill applies three distinct motion-design philosophies, weighted by your project’s context:

The point isn’t a single set of rules — it’s the productive tension between three lenses that genuinely disagree. Emil would cut an animation Jhey would add. The skill weights them to your context instead of applying one philosophy everywhere.

Two Modes

Create — Build interactive components with motion baked in. The skill runs a light discovery (project context + which lenses to weight), then generates components — React, Framer Motion, CSS, or HTML — applying the right recipes, accessibility, and performance defaults.

Audit — Review existing motion design. The skill does reconnaissance on your project, runs a motion-gap analysis (finds UI that should animate but doesn’t), checks the code against an anti-AI-slop checklist (pulsing indicators, hover-scale-on-everything, stagger-spam, and other 2026 AI-generated motion tells), proposes a per-lens weighting, and delivers a branded HTML report with auto-looping CSS demos beside each Critical and Important finding. Pass --terminal for the inline markdown report instead.

The skill detects which mode you want from your request. If it’s ambiguous, it asks.

Key Features

1. Context-aware weighting — Maps your project type (productivity tool, kids app, marketing site, dashboard…) to a primary/secondary/selective lens weighting before doing anything.

2. Motion gap analysis (Audit) — Searches for conditional UI that should be animated but isn’t: conditional renders without AnimatePresence, dynamic styles without transitions, instant state swaps.