Claude Code için 5 ücretsiz animasyon becerisi: Three.js, GSAP, design-dna, LottieFiles ve Genjutsu kurulumu (adım adım)

Beceri (skill), Claude Code'a belli bir işi nasıl yapacağını öğreten hazır talimat paketidir. Kurduktan sonra her seferinde açıklamana gerek kalmaz: "3D sahne ekle" ya da "ScrollTrigger ile animasyon yap" dediğinde Claude ilgili becerinin bilgisini kullanır. Sonuç şablon gibi değil, o kütüphanenin doğru kullanımına göre çıkar.

Bu, daha önce yazdığımız [animasyon komutları rehberinden](https://dijikocum.com/rehber/claude-code-animasyon-komutlari) farklı bir şey. O rehberde .claude/commands/ klasörüne kendi komut dosyanı koyup /grafik gibi bir komutla, senin cümlenden video klip ürettiriyorsun. Buradaki beceriler ise başkalarının hazırladığı, internetten tek komutla kurulan paketler ve çoğunlukla web sitesi ve arayüz animasyonu içindir. İkisi birlikte de kullanılabilir.

Beşi de ücretsiz ve açık kaynak (MIT). Karuseldeki yıldız sayıları 29 Ekim 2026 itibarıyla GitHub'dan alındı.

• Claude Code kurulu olsun: code.claude.com.
• Node.js kurulu olsun: nodejs.org adresinden LTS sürümü. Kurulum komutlarındaki npx, Node.js ile birlikte gelir; Node.js yoksa komut "npx bulunamadı" gibi bir hata verir.

Kurulu olup olmadığını anlamak için terminale (Windows'ta PowerShell ya da Terminal, Mac'te Terminal) aşağıdakini yaz. İki satırda da bir sürüm numarası görmelisin.

• npx skills add ... ile başlayan komutlar terminale yazılır, Claude Code sohbetine değil. Komutu kopyala, terminale yapıştır, Enter'a bas.
• /plugin ... ile başlayan komutlar ise Claude Code'un içine, sohbet kutusuna yazılır. Bunlar alternatif kurulum yoludur; ikisinden birini yapman yeter.
• Kurulum sırasında hangi araca kurulacağını sorarsa Claude Code'u seç.
• Kurduktan sonra Claude Code'u kapatıp yeniden aç; beceriler yeniden açılışta yüklenir.

Komutlar açık kaynak depolardan kod indirir. Yalnız burada adı geçen depoları kur; bir komutun ne yaptığından emin değilsen önce deponun GitHub sayfasındaki README'yi oku.

Ne katar: İnteraktif 3D sahneler, ışıklandırma kurulumu, kamera kontrolleri, parçacık efektleri, GLTF modelleri. Karuseldeki kayıt threejs.org'un kendi örneğinden ("Littlest Tokyo" sahnesi, model: Glen Fox, CC BY).

Kur: Terminale aynen yaz:

Claude Code'u sitenin klasöründe aç ve sohbet kutusuna aşağıdaki istemi yaz. Bu bir komut değil, düz cümle: başına / koymazsın. "Ana sayfama" yerine sahnenin gireceği sayfayı, "ürün" yerine kendi ürününü yazabilirsin. Kendi 3D modelin (GLTF dosyası) varsa dosyanın yerini de cümleye ekle.

Ne katar: Resmî GreenSock becerisi; metin ortaya çıkarma efektleri, zaman çizelgesi (timeline) animasyonu, React entegrasyonu, ScrollTrigger (kaydırdıkça çalışan animasyon). Karuseldeki kayıt gsap.com'un kendi animasyonu.

Kur: Terminale ilk satırı yaz. Ya da terminal yerine Claude Code'un içinden ikinci satırdaki komutla da kurabilirsin; ikisinden biri yeter.

Sitenin klasöründe Claude Code'a şunu yaz. "Hero başlığı" sayfanın en üstündeki büyük başlık demek; başka bir başlığı canlandırmak istiyorsan onun adını yaz.

Ne katar: Tasarımı tersine mühendislikle çözer: tipografi, yerleşim analizi, renk paleti; her arayüz stilini kopyalar. Karuseldeki kayıt deponun kendi örneği: aynı içerik, üç farklı tasarım DNA'sıyla.

Kur: Terminale aynen yaz. Sondaki eklerin anlamı: -a claude-code Claude Code'a kur, -g bütün projelerinde kullanılabilsin (genel kurulum), -y kurulumdaki soruları onaylayarak geç.

Önce beğendiğin arayüzün ekran görüntüsünü Claude Code'a ver (dosyayı sohbet kutusuna sürükle ya da proje klasörüne koyup adını yaz). Sonra şunu yaz. "Benim içeriğim" kısmı için sayfada olacak metinleri (başlık, hizmetler, iletişim) ayrıca ver ya da klasördeki dosyayı göster.

Dikkat: Başka bir sitenin stilinden ilham almak başka, birebir kopyalamak başka. Logo, marka adı ve görselleri alma; renk, yazı tipi ve yerleşim fikrini kendi içeriğinle kullan.

Ne katar: Yalnız Lottie'ye özel değil, hareket tasarımı ilkelerine dayanıyor: Lottie, CSS, GSAP ile çalışır; etkileşimli durumlar, zamanlama ve easing tabloları, Disney'in 12 hareket ilkesi, öğeler arası koreografi. Karuseldeki kayıt deponun kendi dotLottie animasyonu.

Kur: Terminale aynen yaz:

Formun olduğu projede Claude Code'a şunu yaz. Bu istem önce gerekçe, sonra kod istediği için Claude neden o hızı ve yumuşatmayı (easing) seçtiğini anlatır; beğenmezsen kod yazılmadan önce değiştirebilirsin. "Form gönder butonu" yerine canlandırmak istediğin başka bir düğmeyi yazabilirsin.

Ne katar: Önce fikri onaylatır; yaratıcı yönlendirme, üst düzey animasyon, modern düzen, şablon olmayan görsel özen. Karuseldeki kayıt becerinin kendisiyle yapılmış sitesi (genjutsu.athevon.dev).

Kur: Terminale ilk satırı yaz. Dikkat: depo adıyla değil bu adresle kur; depo adıyla kurunca modüller eksik geliyor.

Claude Code eklentisi olarak kurmak istersen terminal yerine Claude Code'un içine sırayla son iki satırı yaz.

Bu sefer düz cümle değil, komutla başlıyorsun: /genjutsu:cast yazıp arkasına kendi isteğini ekliyorsun (komut boş yazılmaz). Aşağıdaki örnekte "fiyat kartlarım" yerine canlandırmak istediğin bölümü, "fiziksel bir nesne gibi hissettirsin" yerine istediğin hissi yazabilirsin.

Genjutsu önce sana bir fikir (etkileşim tezi) sunar, onaylarsan kodu yazar. Beğenmezsen başka bir fikir iste.

Not: Genjutsu'nun büyük "bunshin" modu (bütün siteyi ajan ekibiyle yapan) çok token harcar; başlarken cast ve paint yeterli.

Kuruldu mu: Komut hata vermeden biterse kurulum tamamdır; terminalde kırmızı bir hata satırı ya da "not found" görürsen Node.js'i ve komutu (harfi harfine) kontrol et. Ardından Claude Code'u yeniden aç ve "Hangi becerilerin kurulu?" diye sor; kurduğun beceriyi saymalı.

Kaldırmak istersen: npx skills ile kurulan beceriler bilgisayarında bir klasör olarak durur; genel kurulumda (-g) genellikle kullanıcı klasöründeki .claude/skills/, proje kurulumunda projenin .claude/skills/ klasörü. O becerinin klasörünü silip Claude Code'u yeniden açman yeter. /plugin ile eklenti olarak kurduklarını Claude Code'daki /plugin menüsünden kaldırabilirsin. Klasör yolu ya da menü adı senin kurulumunda farklıysa, Claude Code'a "X becerisini kaldır" demen de olur; silmeden önce ne sileceğini sana söyler.

Aynı istemi iki kişi yazınca aynı tarz çıkar ama birebir aynı sayfa çıkmaz; Claude kodu her seferinde yeniden yazar. Beğenmediğin bir şey olursa aynı sohbette ikinci mesaj olarak söyle: "Animasyon daha yavaş olsun", "Mobilde 3D sahneyi kapat, yerine görsel koy", "Renkleri markamın renkleriyle değiştir" gibi.

Animasyonu canlıya almadan önce sayfayı telefonda da aç: ağır 3D sahne ve çok sayıda kaydırma animasyonu eski telefonlarda yavaşlatabilir.

Hepsi örnek; kendi işini ve sayfanı yazarak kullan:

• Restoran (Three.js + GSAP): Menü sayfasında tabak fareyle döndürülebilen bir 3D sahnede dursun, aşağı kaydırdıkça yemek kategorileri sırayla girsin.
• Mimarlık ofisi (design-dna): Beğendiğin bir portfolyo sitesinin ekran görüntüsünden tasarım DNA'sını çıkar, kendi projelerinin fotoğraflarıyla benzer havada ama kendine ait bir açılış sayfası yaptır.
• E-ticaret mağazası (Hareket Tasarımı): "Sepete ekle" düğmesine yükleniyor → eklendi → stok yok geçişlerini tasarlat; önce zamanlama gerekçesini oku, sonra kodu yazdır.
• Muhasebe / danışmanlık bürosu (Genjutsu): /genjutsu:cast hizmet paketlerim üzerine gelince öne doğru kalksın yazıp gelen fikri onayla.