106.9K+İndir
Kullanım kılavuzuna geç
CSS Animationyazan neonwatty

CSS Animation Skill'i.

Gerçek bir uygulamanın arayüzünü temel alan HTML/CSS özellik gösterimleri oluşturun.

  • CSS
  • Anahtar kareler
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · css-animationSKILL.md
Görev Gerçek bir uygulamanın arayüzünü temel alan HTML/CSS özellik gösterimleri oluşturun. Çıktılar Tasarım token’larını, geometriyi ve sahne zamanlamasını kaydeden yapılandırılmış bir brif. Başlamadan önce Kaynak iş akışı Claude-in-Chrome ve erişilebilir bir uygulama bekler. Başka bir ortamda eşdeğer bir inceleme yolu sağlanmalı veya eksik kanıtlar belirtilmelidir.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Gerçek bir uygulamanın arayüzünü temel alan HTML/CSS özellik gösterimleri oluşturun

Bir uygulamayı araştırın, özellik tanıtımı brifi yazın ve ayrı masaüstü/mobil düzenler ile dondurulmuş durum incelemesi kullanan HTML/CSS gösterimleri oluşturun.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

css-animation, gerçek uygulama özelliklerinin tarayıcı tabanlı gösterimlerini oluşturur. Önce uygulamanın görsel dilini ve düzenini araştırır; ardından önce–eylem–sonra gösterimi veya ekran karuseli planlar. Çıktı, bir brifin eşlik ettiği bağımsız HTML/CSS animasyonudur.

İnceleme süreci, sabit durumların doğruluğunu zamanlamadan ayırır. Önceki ve sonraki düzenler dondurulup incelenir; ardından ritmi ayarlamak için tam döngü oynatılır. Masaüstü ve mobil ayrı kompozisyonlardır; mobil yaklaşım sahneyi sadeleştirir ve imlecin yerine dokunma göstergesi koyar.

Beklenen Çıktılar

  • Tasarım token’larını, geometriyi ve sahne zamanlamasını kaydeden yapılandırılmış bir brif.
  • Bağımsız HTML özellik gösterimi veya ekran karuseli.
  • Her ikisi de istendiğinde ayrı masaüstü ve mobil dosyaları.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    Gerçek arayüzü araştırın

    Erişilebilir uygulamayı ve ilgili durumları inceleyin. Hedef görünüm alanındaki renkleri, tipografiyi, boşlukları ve gerçek geometriyi kaydedin.

  2. 02
    Gösterimi planlayıp oluşturun

    Tek bir özellik dönüşümü veya çok ekranlı karusel seçin. Brifi yazın, öğe konumlarını hesaplayın ve küçük, sınıf tabanlı bir döngü kontrolüyle CSS kullanın.

  3. 03
    Önce sabit durumları, sonra zamanlamayı inceleyin

    Düzeni ve etiketleri kontrol etmek için önemli durumları dondurun. Bunlar doğru olduktan sonra tam döngüyü oynatın ve fazla hızlı ya da yavaş olan belirli aşamayı ayarlayın.

02 Kullanım Alanları

Ne zaman kullanılır

Kaynak iş akışı Claude-in-Chrome ve erişilebilir bir uygulama bekler. Başka bir ortamda eşdeğer bir inceleme yolu sağlanmalı veya eksik kanıtlar belirtilmelidir.

İyi Bir Uyum

  • Gerçek bir özellik için pazarlama gösterimi gerektiğindeİş akışı, genel bir arayüz uydurmak yerine görsel dili uygulamadan türetir.
  • Mobilde odaklı bir açıklama gerektiğindeKaynak, masaüstü sahnesini küçültmek yerine düzeni açıkça sadeleştirir.

Kontrol Edilecek Sınırlar

  • Araştırma tarayıcı araçlarını varsayarKaynak iş akışı Claude-in-Chrome ve erişilebilir bir uygulama bekler. Başka bir ortamda eşdeğer bir inceleme yolu sağlanmalı veya eksik kanıtlar belirtilmelidir.
  • Birincil çıktı HTML’dirBelgelenen çıktı, kodlanmış bir GIF veya MP4 değil, web animasyonudur.
  • Brif bir inceleme noktasıdırKaynak, üretimden önce brif onayı ister; bu incelemenin nasıl yürütüleceğini yine mevcut kullanıcı yetkilendirmesi ve yerel iş akışı belirler.

Bu Girdileri Getirin

  • Uygulamaya erişimÖzellik URL’sini veya yerel önizlemeyi ve gerekli durumlara erişimi sağlayın.
  • Özellik senaryosuBaşlangıç koşulunu, eylemi ve yararlı görünür sonucu belirleyin.
  • Görünüm alanı ve kullanım yeriMasaüstü, mobil veya her ikisini ve dosyaların nerede kullanılacağını belirtin.

03 Önemli Kararlar

Önemli kararlar

  1. Uygulamaya özgü görünüm

    Ölçülen renkler, tipografi ve geometri, gösterimi tanınabilir kılar.

  2. Yeniden üretilebilir revizyon

    Brif, düzen ve zamanlama kararlarını HTML ile birlikte kaydeder.

  3. İnceleme sorunlarını ayırma

    Dondurulmuş durumlar düzen kusurlarını, oynatma ise ritim sorunlarını ortaya çıkarır.

04 Örnek Görev Tanımı

Odaklı bir brief deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kaynağı ve kurulumu inceleyin

Özellik URL’sini veya yerel önizlemeyi ve gerekli durumlara erişimi sağlayın.

Üst Kaynak Dosyası
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md

Aşağıdaki referans, özgün talimatları açar. Kullanmadan önce depo kurulumunu inceleyin; bu bir kurulum komutu değildir.

Tek bir çıktıyla başlayın

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif
Yerel olarak çalışan planlama uygulamamdaki gruplama özelliğini göstermek için css-animation kullan. Önce–eylem–sonra animasyonunu taslaklaştırmadan önce gerçek özelliği incele: gruplanmamış öğeler, kullanıcı eylemi, ardından düzenlenmiş sonuç. Uygulamanın renklerini ve tipografisini eşleştir, gerçek etiketleri koru. Masaüstü brifi ve temel eyleme odaklanan ayrı bir mobil kompozisyon oluştur. Mobilde dokunma göstergesi kullan. Tam döngüyü ayarlamadan önce dondurulmuş başlangıç, işlem ve son durumları incele. Brifi ve HTML dosyalarını teslim et; inceleyemediğin uygulama davranışlarını belirt.

Sonucu inceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Dondurulmuş düzenleri ve etiketleri gerçek uygulamayla karşılaştırın.
  • Masaüstü ve mobil kompozisyonlarda içerik sınırlarını ayrı ayrı test edin.
  • Durum düzeyindeki düzeltmelerden sonra ritmi değerlendirmek için döngünün tamamını izleyin.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in paketle birlikte geldiği veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign İndirHızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
neonwatty
Depo
neonwatty/css-animation-skill
Skill Dosyası
SKILL.md
Lisans
MIT
İncelenen Sürüm
2026-11-02 · 68580a34101c
Editoryal Kaynak Özeti
Gerçek bir uygulamanın arayüzünü temel alan HTML/CSS özellik gösterimleri oluşturun.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan önce sorular

Teslim edilen çıktı video mu?

Kaynağın birincil çıktısı, asgari JavaScript içeren bağımsız HTML/CSS’dir. Video kodlamak, belgelenen bu varsayılan kapsamın dışındadır.

Masaüstü ve mobil aynı ölçeklenmiş düzeni kullanabilir mi?

Kaynak, ayrı dosyalar ve daha az öğe ile dokunma odaklı eylem göstergeleri içeren, amaca yönelik mobil sadeleştirme önerir.

Uygulama incelenemiyorsa ne olur?

Kaynak talimatlar, tarayıcı aracı eksikliğinin açıklanmasını öngörür ve kullanıcı açıklamasıyla ilerlemeye izin verir. Böyle bir sonuç, erişilemeyen uygulamaya gözleme dayalı sadakat iddiasında bulunmamalıdır.

OpenDesign

Brief'inizi ve tasarım çalışmanızı bir arada tutun.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndirTasarım Skill'lerine Göz At
Üst Kaynak Dosyası
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md