98.8K+İndir
Kullanım kılavuzuna geç
animateyazan Emil Kowalski

Animate Skill.

Claude Code ve Codex için hareket ve video skill'i: sıfırdan bir animasyon oluşturur, amaç, araç, özellikler, eğri ve süreyi sırayla belirler.

  • Motion & Video
  • UI kodu
OpenDesign İndirKullanım kılavuzunu görüntüle
emilkowalski/skills · skills/animate/SKILL.mdSKILL.md
--- name: animate description: Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; … --- ## Operating Posture ## Hard Rules ## The Build Sequence ## Recipes ## Never Ship ## Output
Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 11.494 karakter

01 Ne yapar

animate Skill'in 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

Bu bir denetim değil, bir inşa skill'idir: hareket talebini, sıkı bir incelemeden geçebilecek bir uygulamaya dönüştürür; sabit bir sırayla çalışır — hiç animasyon olmalı mı, amaç, araç, özellikler, eğri ve süre, kesinti, çıkış — ardından kodu yazar.

Bu, bir seçenekler menüsü değil, kararın verilmesini isteyen tasarımcılar ve geliştiriciler içindir. Ayrıntılar sıkı tablolardan gelir: sıklık kademeleri, sadece transform ve opacity, adlandırılmış cubic-bezier eğrileri, öğe başına süre aralıkları ve animasyonla birlikte gelen reduced-motion ve hover kısıtlamaları. Bir kod tabanını denetlemek veya bir diff'i eleştirmek için kardeş skill'leri kullanın.

UI kodu
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Önce Sıklığa Göre Filtrele

    İlk adım, hiçbir kod yazılmadan işi sonlandırabilir: günde 100+ kez açılan veya bir klavye kısayoluyla tetiklenen her şey hiç animasyon almaz.

  2. 02
    Amacı Tek Kelimeyle Adlandır

    Amaç yoksa animasyon yoktur. Kullanıcının sürekli gördüğü bir öğede sadece havalı göründüğü için istenmesi, durmak için bir nedendir, inşa etmek için değil.

  3. 03
    İşe Yarayan En Ucuz Aracı Seç

    Araç tablosunda aşağı inin ve ilk uyan seçenekte durun: CSS transition, @starting-style, CSS animation, WAAPI, Motion.

  4. 04
    Özellikleri Sınırla

    Transform ve opacity işi yapar çünkü layout ve paint'i atlar ve GPU üzerinde çalışır; clip-path onaylanmış dördüncü seçenektir ve height animasyonuna sadece akordeonlar için göz yumulur.

  5. 05
    Eğri ve Süreyi Tablolardan Belirle

    Girişler ve çıkışlar ease-out, ekran üstü hareket ease-in-out, hover ve renk değişimleri ease, sabit hareket linear kullanır, varsayılan ease-out'tur.

  6. 06
    Kesinti ve Çıkışı Planla

    Hızla yeniden tetiklenen şeyler transition kullanır, hareketler spring kullanır ve çıkış girişi yansıtır, böylece swipe-to-dismiss açıkça anlaşılır.

02 Uyumunuzu bulun

animate Skill Ne Zaman Kullanılır

Claude Code veya Codex'te, iş hareket ve video türleriyken animate skill'ini kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Bir şeyi animasyonlu hale getirmeniz, hareket eklemeniz, bir bileşeni canlı hissettirmeniz veya bir geçiş oluşturmanız istendi.
  • Bu iş yaygın bir bileşen durumuna uyuyor, bu yüzden boş bir dosyadan değil bir tarifle başlıyorsunuz.

Sınırları Bilin

  • Bitirmeden önce kontrol edin.
  • Bunların her biri review-animations içinde otomatik engeldir:

03 Skill'in içinde

animate Skill'in Claude Code ve Codex'e Verdiği Kurallar

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

  1. Klavye ve Günde 100+ Kez Yapılan İşlemler Asla Hareketlenmez

    Klavyeyle başlatılan işlemler bir yargı meselesi değil, doğrudan diskalifiye sebebidir; günde onlarca kez tetiklenen öğeler ise ya fark edilmeyecek kadar az hareket alır ya da hiç almaz.

  2. Yaklaşık Değer Kullanılmaz

    Her eğri, süre ve spring ayarı skill'in tablolarından gelir. Tanıdık görünen bir cubic-bezier kaynak sayılmaz.

  3. Mevcut Token'ları Genişletin, Asla Çatallamayın

    Kod tabanında zaten bir --ease-out değişkeni veya bir süre skalası varsa onu kullanın; paralel bir hareket sistemi eklemek kusur sayılır.

  4. UI'de Asla ease-in Kullanmayın

    ease-in yavaş başlar ve kullanıcının tam olarak baktığı anı geciktirir, bu yüzden burada yasaktır; varsayılan olarak ease-out kullanın.

  5. Asla Scale(0) Kullanmayın

    Girişler scale(0.9–0.97) ve opacity 0'dan başlar, çünkü gerçek dünyada hiçbir şey yoktan ortaya çıkmaz.

  6. Reduced Motion ve Pointer Gating'i Kodla Birlikte Teslim Edin

    prefers-reduced-motion medya sorgusu ve hover gating, animasyonla aynı değişikliğe dahil edilmelidir; sonraki bir bilet veya takip işi olarak ele alınmaz.

  7. Kararı Siz Verin, Seçenek Sunmayın

    Animasyon seçeneklerini tercih olarak sunmak burada zaten bir hata biçimidir; gerekçeyi tek satırda belirtin ve uygulamayı yazın.

  8. Keyif Verici Efektler Sadece Nadir Katmanda

    Keyif verici efektlere yalnızca nadir veya ilk kez yaşanan katmanlarda (onboarding, başarı ve kutlama gibi) izin verilir; diğer yerlerde gerçek, adlandırılmış bir amacı olmalıdır.

04 İşe koyun

animate'i Claude Code veya Codex'e kurun

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

animate'i 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 animate

skills/animate/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

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

SKILL.md bir örnek prompt içermez; bu başlangıç, katalog tek satırından yazılmıştır. Görev satırını gerçek brief'inizle değiştirin.

Starter prompt
Use the animate skill on the material I attach. What the skill should do here: Builds an animation from scratch, deciding purpose, tool, properties, curve, and duration in order. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Kaynak: katalog tek satır kullanımından yazılmış başlangıç promptu (SKILL.md'den değil).

İlk Sonucu Kontrol Edin

Çıktıyı kabul etmeden önce, transkript ve dosyalarda bunları arayın:

  • 1. ve 2. adımlar her şeyi kapsar. Hiç animasyon yapılıp yapılmayacağını bilmeden bir eğriye ulaşmayın.
  • Her eğri, süre ve yay yapılandırması aşağıdaki tablolardan gelir. Tanıdık göründüğü için cubic-bezier(0.4, 0, 0.2, 1) uydurmayın.
  • --ease-out veya bir süre ölçeği zaten varsa, onu kullanın. Paralel bir sistem eklemek hata sayılır.
  • Bir solma için hareket kütüphanesi kurmayın.

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

OpenDesign İndirHı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/animate/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ü, bu katalogda 9 skill içeren tüm emilkowalski/skills deposu için 2026-09-14 tarihinde alınmıştır. animate 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'in Kendi Açıklaması
"Bir animasyonu sıfırdan oluşturun, kararları doğru hissettiren sırayla vererek — hiç animasyon yapılmalı mı, amacı ne, hangi araç, hangi özellikler, hangi eğri ve süre, nasıl kesintiye uğratır, nasıl çıkış yapar. Uygulamayı yazar. Bir şeyi canlandırmanız, hareket eklemeniz, bir bileşeni canlı hale getirmeniz veya bir geçiş oluşturmanız istendiğinde kullanın. Mevcut hareketi eleştirmek için review-animations kullanın; tüm bir kod tabanını denetlemek için improve-animations kullanın."

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

Animate

animate'i gerçek bir Hareket ve Video görevi üzerinde çalıştırın.

OpenDesign'ı indirin, SKILL.md linkinden animate'i içe aktarın, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/emilkowalski/skills --skill animate

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için