Bu skill, "Şu sitenin kodunu yaz" "bu site gibi bir site yap" "şu site de ki bu alan gibi bir alan yap" komutundan çok daha fazlasını içerisinde barındırır. Modeli adeta bir şantiye şefi gibi çalıştırarak, hedeflediğiniz web sayfasını en ince ayrıntısına kadar analiz etmesini ve modern bir mimariyle (react) baştan inşa etmesini sağlar.
Etik Kullanım Uyarısı (Lütfen Okuyun) Bu skilli bir başkasının emeğini birebir kopyalayıp haksız kazanç elde etmek için kullanmamalısınız. Asıl amacı ve en verimli kullanım senaryoları şunlardır:
- Reverse-Engineering (Tersine Mühendislik): Çok beğendiğiniz ama CSS/JS kodlarını çözemediğiniz spesifik bir alanın (örneğin karmaşık bir slider, animasyonlu bir kart yapısı veya scroll-triggered bir menü) nasıl yapıldığını öğrenmek.
- Eğitim ve Pratik: Sektör standardı tasarımların modern framework'lerde nasıl kodlandığını satır satır incelemek.
- Kendi Projelerinizi Yenilemek: Eski, spagetti koda dönmüş web sitenizi modern bir React/Next.js yapısına geçirirken referans almak.
- Tüm siteyi klonlamak yerine, "Sadece şu URL'deki Hero section'ı incele ve bana komponent olarak ver" mantığıyla çalışmak en etik olan seçenektir.
Bu Skill Ne Yapar?
- Paralel Çalışma: Sayfayı bölümlere ayırır (Header, Hero, Footer vb.) ve her bölüm için ayrı bir "Builder Agent" çalıştırarak işi eşzamanlı ve hızlı yapar.
- Piksel Kusursuzluğu (Pixel-Perfect): Renkleri, tipografiyi, padding/margin değerlerini tahmini değil, doğrudan tarayıcıdan (getComputedStyle) çekerek birebir uygular.
- Davranış Klonlama: Sadece statik bir ekran görüntüsü almaz. Sayfadaki scroll (kaydırma), hover (üzerine gelme) ve tıklama animasyonlarını, geçiş sürelerini (transition) tespit edip kodlar.
- Varlık (Asset) Çıkarımı: Sayfadaki görselleri, videoları ve SVG ikonları otomatik tespit edip projenize dahil edilebilir hale getirir (Mock data oluşturur).
- Dokümantasyon: Kodlamaya geçmeden önce her komponent için bir spesifikasyon (spec) dosyası hazırlar. Böylece yapay zekanın neyi, neden yaptığını denetleyebilirsiniz.
Bu Skill Ne Yapmaz?
- Backend & Veritabanı: Sitenin arka planında çalışan veritabanı mimarisini, sunucu kodlarını veya API güvenlik önlemlerini klonlayamaz. Sadece Frontend (Görünüm) katmanında çalışır.
- Üyelik/Giriş Sistemleri: Çalışan bir Auth (kimlik doğrulama) sistemi kurmaz, sadece formun görsel tasarımını yapar.
- SEO Optimizasyonu: Çektiği kodları Google'da üst sıralara çıkacak şekilde semantik veya SEO kurallarına göre optimize etmez. Salt görünümü hedefler.
