animation-vocabularyyazan Emil Kowalski

Animation Vocabulary Skill.

Hareket ve video için bir Claude Code ve Codex skill'i: belirsiz bir hareket tanımını tam karşılığına dönüştüren ters arama sözlüğü.

Motion & Video

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

emilkowalski/skills · skills/animation-vocabulary/SKILL.mdSKILL.md

--- name: animation-vocabulary description: Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building … --- ## Quick Start ## Instructions ## Examples ## Glossary

Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 12.884 karakter

01 Ne yapar

animation-vocabulary Skill'inin Claude Code ve Codex İçinde Yaptığı Şey

Ö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

animation-vocabulary, web hareketini adlandırmak için ters arama işlevi gören bir sözlüktür. Bir efekti gevşek şekilde tanımlarsınız — "bir popover açıldığında olan zıplayan şey", "iOS'un lastik bandı gibi kaydırması" — ve o, tam terimi ve sözlüğün kendi tanımını, Stagger — Birkaç öğeyi birbiri ardına canlandırın biçiminde döndürür.

Bu, animasyonu tasarlamak veya oluşturmak için değil, bir AI'ya veya tasarımcıya yön vermek için doğru kelimeye ihtiyaç duyan tasarımcılar ve geliştiriciler içindir. Sözlük Girişler ve Çıkışlar, Sıralama ve Zamanlama, Hareket ve Dönüşümler, Yumuşatma (Easing), Yay Animasyonları, Kaydırma, Geri Bildirim ve Etkileşim, Performans ve Bilinmesi Gereken İlkeler konularını kapsar ve Clip-path ile Mask gibi birbirine yakın çiftleri karşılaştırır.

Neler üretir

Eşleşen terim ile sözlüğün kendi tanımı, biçimlendirilmiş tek bir satırda
Her birinde bir koşul bulunan, yakın alternatiflerin madde işaretli listesi
Hiçbir şey eşleşmediğinde açıkça işaretlenmiş bir yaklaşık eşleşme

Örnek istemi görün ↗

Nasıl Çalışır

01
Anahtar Kelimeleri Değil, Duyguyu Eşleştirin
Kullanıcı hareketin nasıl göründüğünü veya hissettirdiğini söyler, ve bu duygu teknik dizelerle eşleştirilmek yerine sözlük üzerine haritalanır.
02
Skill'in Sabit Biçiminde Yanıtlayın
Bir satır: terim kalın, ardından bir tire, ardından glossary'nin kendi tanımı. Yanıtın etrafında giriş cümlesi yok.
03
Eşleşmeyi Sıralayın, Sonra Alternatifleri Listeleyin
Birden fazla terim uyduğunda en iyi eşleşme önce gelir, ardından bir veya iki alternatif ve her birinin nasıl farklılaştığını açıklayan bir satır izler.
04
Terimle Başlayın ve Durun
Önce terim gelir, kullanıcı daha fazlasını istemedikçe gerekçe geride tutulur.

02 Uyumunuzu bulun

animation-vocabulary Skill Ne Zaman Kullanılır

Claude Code veya Codex'te iş bu türden hareket ve video olduğunda animation-vocabulary skill'ini kullanın. Uyum ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Efekti tam olarak zihninizde canlandırabilirsiniz ama adı eksik, örneğin kendisini açan düğmeden büyüyerek çıkan popover gibi.
Bir şey uygulamak için değil, bir yapay zekayı veya tasarımcıyı brief'lemek için kelime dağarcığına ihtiyacınız var.
İstek bir adlandırma sorusu olarak gelir: şuna ne denir…
Sadece bir fizik hissini tanımlayabilirsiniz, örneğin geri çekilip yerine oturan overscroll direnci gibi.

Sınırları Bilin

Animasyonu tasarlamak veya oluşturmak — skill sadece efekti adlandırmakla sınırlıdır.
Bu glossary'nin kapsamı dışında kalan terimler: skill glossary'yi genişletmek yerine bu boşluğu bildirir.

Ne Sağlamalısınız

GirdiBaşlangıçta teknik bir şey gerekmez; skill bir anahtar kelime listesini değil, tarif edileni okur.
GirdiHangi öğeden çıktığını veya hangisine bağlandığını belirtin, çünkü origin-aware animation gibi terimler bu ilişkiyle tanımlanır.

03 Skill'in içinde

animation-vocabulary Skill'inin 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ı.

Glossary'den Alıntı Yapın, Yeniden İfade Etmeyin
Tanımlar yetkili referans metin olarak kabul edilir, bu nedenle kullanıcı için yeniden ifade edilmek yerine kelimesi kelimesine aktarılır.
Rakip Terimleri Açıkça Karşılaştırın
Clip-path ile Mask, Pop in ile Bounce, Shared element transition ile Layout animation gibi birbirine yakın çiftler sessizce seçilmek yerine yan yana koyulmalıdır.
Asla Terim İcat Etmeyin
Tam terim glossary'de yoksa bu açıkça belirtilir; kavramı açıklamak için mevcut glossary kelimeleri kullanılabilir, ancak yeni bir ad türetilemez.
Niyete Göre Okuyun
Tetikleyici, kullanıcının gördüğünü sade bir dille tarif etmesidir, anahtar kelime araması değil; sezgisel his, çözümlenen girdidir.
Kısa ve Öz Tutun
Bir adlandırma sorusuna bir ad verilmelidir, deneme değil; uzunluk yalnızca kullanıcı bunu istediğinde artar.
Sözlüğü Senkronize Tutun
Skill içindeki sözlük, projenin /vocabulary sayfasının derlenmiş bir görüntüsüdür; ikisi de her değiştiğinde birlikte güncellenmelidir.

04 İşe koyun

animation-vocabulary'yi Claude Code veya Codex'e Yükleyin

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

animation-vocabulary'yi Claude Code, Codex veya Ajanınıza Ekleyin

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

Terminal

npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

skills/animation-vocabulary/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

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

Bu isteği kendi içeriğiniz ve kısıtlamalarınızla uyarlayın, ardından Claude Code veya Codex'te çalıştırın.

Example prompt

**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

Kaynak: SKILL.md § Examples (kod bloğu).

İlk Sonucu Kontrol Edin

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

Yanıt tek bir sözlük satırı gibi okunur: kalın terim, tire, dosyanın kendi ifadesi, örneğin rubber-banding girdisi.
Alternatifler mevcut olduğunda, her biri o terimin ne zaman geçerli olduğuna dair tek satırlık bir koşul taşıyan madde işaretleri olarak görünür.
Birbiriyle çatışan terimler, tek bir yanıtta birleştirilmek yerine seçim yapmanız için ayrı ayrı sunulur.

OpenDesign'da animation-vocabulary'yi kendi SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Skill dosyası: skills/animation-vocabulary/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit d23d7f8
License: MIT LICENSE dosyasından.
Repository yıldızları: 37.516 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm emilkowalski/skills deposu için alındı; bu katalogda 9 beceri içerir. animation-vocabulary için bir derecelendirme 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

Hızlı BaşlangıçTek satırlık yanıt biçimini gösterir: kalın terim, tire, sözlük açıklaması.
TalimatlarAltı numaralı kural: niyeti oku, kelimesi kelimesine alıntıla, belirsizliği gider, yaklaşık değer ver, sözlükte kal, kısa tut.
ÖrneklerÜç işlenmiş arama: hisse dayalı bir örnek, bir belirsizlik giderme ve bir fizik hissi.
SözlükGirişler ve Çıkışlardan Bilinmesi Gereken İlkelere kadar on iki gruplandırılmış terim listesi.

Skill'in Kendi Açıklaması

"Bir açılır pencerenin açıldığındaki zıplayan şey" → Pop in; "iOS lastik bant kaydırma" → Rubber-banding gibi belirsiz bir web animasyonu veya hareket efekti tanımını tam terimine çeviren ters arama sözlüğü. Kullanıcı "şuna ne denir..." diye sorduğunda veya adını bilmediği bir hareket efektini tanımlayıp bir yapay zekaya veya tasarımcıya yönlendirmek için doğru kelimeyi istediğinde kullanın. Bir efekti adlandırmak için, tasarlamak veya oluşturmak için değil.

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

06 Kurmadan önce

animation-vocabulary 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.

Bunu kullanmak için terimi önceden bilmem gerekir mi?

Hayır. Etkiyi elinizden geldiğince tanımlarsınız — dosyanın kendi örneği yalnızca "iOS lastik bandı kaydırması"dır — ve yanıt, sözlük açıklamasıyla birlikte Rubber-banding terimi olarak geri gelir.

Etkim sözlükte yoksa ne olur?

En yakın terimi adlandırır ve bunun sadece bir yaklaşım olduğunu açıkça belirtir, ya da etkiyi "bu bir scale-in girişlerinin stagger'ı" gibi sözlük sözcükleriyle yeniden ifade eder. Listede olmayan bir terim icat etmez.

Animasyonu benim için tasarlar veya oluşturur mu?

Hayır. Skill, etkiyi adlandırmakla sınırlıdır; onu tasarlamak veya oluşturmak açıkça kapsam dışıdır. Döndürdüğü terimi alıp hareketi oluşturacak kişiyi veya şeyi brief'lemek için kullanırsınız.

Animation Vocabulary

animation-vocabulary becerisini gerçek bir hareket ve video görevinde çalıştırın.

OpenDesign'ı indirin, SKILL.md bağlantısından animation-vocabulary'yi içe aktarın, yukarıdaki yönlendirmeyi yapıştırın ve sonuçtan önce planı okuyun.

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