design-motion-principlesyazan Kyle Zantos

Design Motion Principles Skill.

Claude Code ve Codex için hareket ve videoya yönelik bir skill: Kowalski, Krehel ve Tompkins'ten sonra amaçlı etkileşim hareketi veya mevcut animasyonun incelemesi.

Motion & Video

OpenDesign İndir Kullanım kılavuzunu görüntüle

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

Üst bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam haliyle 6.794 karakter

01 Ne yapar

design-motion-principles Skill'inin Claude Code ve Codex'te Yaptığı

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Kodlama ajanları için iki modda çalışan bir etkileşim ve hareket tasarımı skill'i. Create, amaçlı hareketle etkileşimli bileşenler oluşturur; Audit ise mevcut hareketi inceler ve AI-slop örüntüleri dahil olmak üzere tasarımcı başına bulguları, döngülü demolar içeren markalı bir HTML raporunda bildirir.

Tavsiyelerini üç bakış açısı etrafında düzenler — kısıtlılık ve hız üzerine Emil Kowalski, üretim cilası üzerine Jakub Krehel, oyunbaz deneyler üzerine Jhey Tompkins — bunlar evrensel olarak uygulanmak yerine proje türüne göre ağırlıklandırılır. Kapsam, web ve uygulama UI hareketidir: HTML/CSS, React, Framer Motion, iOS/Android geçişleri ve tasarım sistemi animasyonları. Frekans kapısı, bağlama bağlı süreler ve zorunlu prefers-reduced-motion işleme her iki modda da çalışır.

Neler üretir

Create modunda amaçlı hareketle oluşturulmuş etkileşimli bileşenler.
Audit modunda tasarımcı başına bir inceleme raporu.
Bulguların döngülü demolarını içeren markalı bir HTML raporu.
Varsayılan olarak HTML olarak işlenen, terminal modunun bir bayrak olarak kullanılabildiği bir denetim raporu şablonu.

Örnek istemi görün ↗

Nasıl Çalışır

01
İstekten Modu Algılama
Build ağırlıklı ifadeler Create'i seçer; audit, review, evaluate, feedback veya 'bu hareket iyi mi' ifadeleri Audit'i seçer.
02
Eşleşen Workflow Dosyasını Okuma
Mod algılama 0. adımdır ve her şeyin geri kalanını kapı gibi kontrol eder — o mod için workflow dosyası olduğu gibi izlenir.
03
Üç Tasarımcıyı Bağlama Göre Ağırlıklandırma
Emil, Jakub ve Jhey bağlama bağlı bakış açıları olarak ele alınır, asla evrensel kurallar olarak değil.
04
Sıklık ve Süre Rehberliğini Uygulayın
Önce etkileşimin ne sıklıkla tetiklendiğine bakılır, ardından ilgili bakış açısından alınan süre hedefleri devreye girer.
05
Mod İçin Üretimi (Artefact) Verin
Create bileşenler döndürür; Audit ise her bulgusu, görsel bir konteyner şablonundan oluşturulan bir demo kartıyla eşleşen, tasarımcı başına bir rapor döndürür.

02 Uyumunuzu bulun

design-motion-principles Skill Ne Zaman Kullanılır

Claude Code veya Codex'te bu türden hareket ve video işleri için design-motion-principles skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Linear veya Raycast gibi verimlilik araçları; burada Emil'in ölçülülük ve hız kuralları öndedir, Jhey ise yalnızca onboarding için kullanılır.
Çocuk uygulamaları ve eğitim ürünleri; burada cila ve keyif, verimlilik hız kurallarının önüne geçer, Emil ise yalnızca yüksek sıklıktaki oyun etkileşimleri için ayrılır.
Yaratıcı portfolyolar; rafine etme için Jakub, buluş için Jhey öndedir, Emil ise yalnızca yüksek sıklıktaki etkileşimlerle sınırlıdır.
Mobil uygulamalar; burada Jakub öndedir, Emil destek verir, Jhey ise keyif verici dokunuşlar sağlar.

Sınırları Bilin

Web ve uygulama arayüzü dışındaki hareket işleri — oyun motorları, Lottie, Rive veya video — burada sıklık çerçevesi hâlâ geçerlidir ama tasarımcıya özgü teknikler her zaman aktarılamayabilir.
Süreleri tek bir evrensel sayıya göre değerlendirmek; bağlam ağırlıklandırmasını kontrol etmeden süreleri işaretlemek veya sınırlamak açıkça devre dışı bırakılmıştır.
Klavyeyle başlatılan etkileşimler, proje türü ne olursa olsun animasyondan tamamen hariç tutulur.

Ne Sağlamalısınız

Proje türüBirincil, ikincil ve seçici ağırlıklandırmayı belirler; bu nedenle bir SaaS panosu önce Jakub'a değil Emil'e işaret eder.
Etkileşimin ne sıklıkla tetiklendiğiSıklık kapısı, herhangi bir şey eklenmeden veya onaylanmadan önce uygulanır; yani bu sorunun cevabı neyin animasyona uygun olduğunu bile değiştirir.
Hareketin kendisi ve teknoloji yığınıReact, Framer Motion, CSS veya HTML'de geçişler, hover durumları, mikro etkileşimler ve giriş/çıkış animasyonları.

03 Skill'in içinde

design-motion-principles Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 6 somut talimat, varsayılan değer ve sınır — dosyanın sonucu değiştiren kısmı.

Animasyon Olup Olmayacağına Tetikleyici Sıklığın Karar Vermesine İzin Verin
Günde yüzlerce kez gerçekleşen sık etkileşimler animasyon almaz veya anlık bir geçiş alır; nadir olanlar ise etkileyici olabilir.
prefers-reduced-motion'ı Her Zaman Ele Alın
Bu gereklilik, Create modunda üretilen veya Audit modunda incelenen her şeyi kapsayacak şekilde ifade edilir; istisna yoktur.
İstek Belirsiz Olduğunda Sorun
'Bu modal animasyonuna bak' gibi belirsiz bir istekte tahmin yürütülmez — kullanıcıdan Create veya Audit seçmesi istenir.
Tasarımcıları Proje Türüne Göre Yeniden Ağırlıklandırın
Eşleştirme tablosu birincil, ikincil ve seçici bakış açılarını değiştirir; bir açılış sayfasında birincil Jakub, ikincil Jhey'dir, Emil ise yalnızca formlar ve gezinme için kullanılır.
Görünürlüğü Kalite Testi Olarak Kullanın
Her tek etkileşimde övgü toplayan bir hareket, üretim için fazla belirgin sayılır.
Modun Zorunlu Kıldığı Referansları Yükleyin
Create modu her zaman Motion Cookbook'u yükler (giriş/çıkış, easing, spring'ler, clip-path, @property, FLIP, kaydırmayla tetiklenen animasyonlar için tarifler); Audit modu ise kendi her zaman etkin dosyalarını yükler.

04 İşe koyun

Claude Code veya Codex'e design-motion-principles Yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza design-motion-principles Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles

skills/design-motion-principles/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk Hareket ve Video Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Hareketin ağırlığının etkileşimin görünüşünden değil, fiilen ne sıklıkla tetiklendiğinden gelmesini doğrulayın.
Üretim düzeyindeki cila çalışmasını tek bir global süre yerine 200-500ms'lik Jakub bandına göre ölçün.
Audit modunda, animasyonu gözle değerlendirmek yerine sistematik denetim kontrol listesini adım adım uygulayın.
Bulguları, AI-slop hareket kategorilerini ve anti-pattern'leri adlandıran anti-checklist kalite kapısından geçirin.
Karmaşık animasyonlarda GPU optimizasyonunu, will-change kullanımını ve layout thrash'i kontrol edin.

OpenDesign'da design-motion-principles'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles Branch main
Skill dosyası: skills/design-motion-principles/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 4a9ca87
License: MIT LICENSE dosyasından.
Repository yıldızları: 1.048 Tüm kylezantos/design-motion-principles deposu için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. design-motion-principles için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

ADIM 0: Modu Belirleyin (ÖNCE BUNU YAPIN)İsteğin ifadesini Create veya Audit ile eşleştirir ve belirsiz olduğunda sorar.
Üç TasarımcıEmil, Jakub ve Jhey'in kim olduğu, her birinin yanıtladığı soru ve saygı ifadesi.
Bağlamdan Perspektife EşlemeYedi proje türünün birincil, ikincil ve seçici tasarımcı ağırlığıyla eşleştirilmesi.
Temel İlkeler (Her İki Mod)Sıklık kapısı, süre ilkeleri, altın kural ve isteğe bağlı olmayan erişilebilirlik.
Referans DiziniHer referans dosyası, yüklenmesi gereken koşullarla eşleştirilmiştir.
Workflow Diziniİki workflow dosyası: bileşen inşa etme veya hareketi inceleyip rapor verme.

Skill'in Kendi Açıklaması

"Emil Kowalski, Jakub Krehel ve Jhey Tompkins'in tekniklerine dayalı hareket ve etkileşim tasarımı uzmanı. İki mod — amaçlı hareketle etkileşimli bileşenler oluşturun veya AI-slop hareket kalıplarını yakalamak için mevcut animasyonları denetleyin (denetim, döngüsel demolarla markalı bir HTML raporu yayar). UI hareketi oluştururken, eklerken, canlandırırken veya gözden geçirirken kullanın: React, Framer Motion, CSS veya HTML'de geçişler, hover durumları, mikro etkileşimler, giriş/çıkış animasyonları veya herhangi bir hareket tasarımı çalışması. Bağlama duyarlı ağırlıklandırmayla tasarımcıya özel perspektifler sağlar."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 6.794 karakterdir. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

design-motion-principles Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

React'e ihtiyacım var mı, yoksa düz CSS ve HTML ile de çalışıyor mu?

Her ikisi de kapsam dahilinde. Skill, HTML/CSS, React, Framer Motion veya Motion, iOS/Android geçişleri ve design system animasyonları genelinde web ve uygulama arayüzü hareketini kapsar.

Bir şeyi inşa etmesi mi yoksa incelemesi mi gerektiğine nasıl karar veriyor?

İsteği Create veya Audit sinyalleri için okur, bunlar belirsizse sorar. AskUserQuestion kullanılamıyorsa iki modu sunan düz metin bir soruya geri döner.

Bir çocuk uygulaması, bir dashboard ile aynı hızlı ve ölçülü hareketi mi alır?

Hayır. Ağırlıklandırma bağlama bağlıdır, dolayısıyla bir çocuk uygulaması Emil'in üretkenlik odaklı hız kurallarından ziyade cila ve keyif için Jakub ile Jhey'e öncelik verir — bu bağlamda keyif hedef olarak kabul edilir.

Bu skill'in arkasında bu üç tasarımcı mı var?

Hayır. Lensler, onların kamuya açık şekilde yayımlanmış kurslarını, makalelerini, konuşmalarını ve açık kaynak projelerini damıtır; ağırlıklandırma çerçevesi ise skill'in kendi yorumudur ve onların onuruna adlandırılmıştır.

Design Motion Principles

design-motion-principles'i gerçek bir hareket ve video görevi üzerinde çalıştırın.

OpenDesign'ı indirin, SKILL.md bağlantısından design-motion-principles'i içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın