Tasarım & UX Skill
Accessibility Compliance
Ekran okuyucu desteği, klavye navigasyonu ve mobil erişilebilirlik içeren WCAG 2.2 AA uyumlu arayüzler oluşturmak için bir uygulama araç seti.
₺369
UI
React ve Next.js için üretim seviyesinde bir frontend kalıp kütüphanesi: bileşen sınıflandırması (Server mı Client mı), durum mimarisi, zorunlu veri-gösterimi ve form kalıpları, Tailwind stil disiplini.
Her asenkron arayüz dört zorunlu durumu da (yükleniyor, hata, boş, başarılı) içerir; böylece kullanıcı asla boş ya da bozuk bir ekranla baş başa kalmaz.
₺369 tek seferlik
Bir kit içine ekle → Fiyatlara KDV (%20) dahildir. · Gerçek ajans işinden çıkarıldı · tek seferlik, kilit yok
- Tür Skill
- Kategori Tasarım & UX
- Teslimat E-posta · anında
- Lisans Tek seferlik
Çalışmanın içinden · kara kutu yok
Satın almadan önce işin kendisini gör.
Skill her frontend işinde tam olarak bu döngüyü koşar. Kara kutu yok, yaptığı iş budur:
- Önce her parçayı sınıflandırır: etkileşimi olmayan Server Component kalır, hook veya event kullanan 'use client' alır, karma ihtiyaçlar veri çeken server ebeveyn ve etkileşimi yöneten client çocuk olarak bölünür
- State'i veri tipine göre doğru araca yönlendirir: sunucu verisi TanStack Query'ye, global arayüz Zustand'a, formlar React Hook Form'a, URL durumu nuqs'a gider. Her şeyi taşıyan tek useState yok
- Her veri komponentinde zorunlu 4 durumlu diziyi uygular: yüklenirken Skeleton, hatada yeniden dene aksiyonlu ErrorCard, liste boşken CTA'lı EmptyState, ancak ondan sonra gerçek içerik. Eksik durum varsa komponent kabul edilmez
- Formları sabit zincir olarak kurar: Zod şeması, zodResolver, başarıda cache invalidation yapan mutation, iki sonuçta da toast geri bildirimi, gönderim sürerken devre dışı buton
- Sonuç üzerinde erişilebilirlik listesini yürür: klavye gezinmesi çalışır, odak durumları görünür, yalnız ikonlu butonlarda aria-label vardır, renk kontrastı 4.5:1 tutar
- Kapatmadan önce kırmızı bayrakları tarar: elle gömülmüş sahte diziler, boş onClick'ler, eksik yükleme veya hata durumları, any tipleri, doğrulamasız formlar. Her biri çözülür, öyle teslim edilir
Tek güç kaynağı. 6 hat dışarı.
ui · çekirdek
çekirdek aktif · 6 hat
- ✓ yükleme, hata, boş ve ba…
Yükleme, hata, boş ve başarı durumlarını düzgün işleyen veri listeleri
- ✓ react hook form, zod doğ…
React Hook Form, Zod doğrulama ve toast geri bildirimli formlar
- ✓ taranabilir ve hızlı ren…
Taranabilir ve hızlı render olan sayfalar için Server Component'ler
- ✓ asenkron params/searchpa…
Asenkron params/searchParams ile Next.js 15 dinamik rotaları
- ✓ cn() yardımcısıyla koşullu
cn() yardımcısıyla koşullu Tailwind stillendirmesi
- ✓ 375px'ten 1440px'e erişi…
375px'ten 1440px'e erişilebilir, duyarlı arayüz
Aldıkların sende kalır.
Zamanı ileri sar. Ne kaldığını izle.
Sonsuza dek
Sahip olmak tam olarak bu.
Kiralık yığın
yapay zekâ yazım aracı: abonelik
süresi doldu · erişim gittianaliz paketi: abonelik
süresi doldu · erişim gittitasarım platformu: abonelik
süresi doldu · erişim gitti(geriye bir şey kalmadı)
Senin ocağın
-
Boş ekranlara son: her asenkron durum varsayılan olarak işlenir
lisans: kalıcı -
Server Component HTML çıktısıyla daha hızlı ve SEO dostu sayfalar
lisans: kalıcı -
Sessiz hatalar yerine gerçek doğrulamayla tutarlı formlar
lisans: kalıcı -
Erişilebilir arayüzler (WCAG AA, klavye, ekran okuyucu) baştan dahil
lisans: kalıcı
abonelikler biter · tapular bitmez
Kutudaki her şey.
Bir parçayı eline al. Çalışırken izle.
Server mı Client mı bileşen karar kuralları
6 parça · tek çalışan sistem · e-postayla anında teslim
Bu herkes için dövülmedi.
- Araç kiralamayı sahip olmaya tercih ediyorsan, sana göre değil.
- Yığınını senin yerine başkası yönetsin istiyorsan, sana göre değil.
- Tahmin etmekten memnunsan, sana göre değil.
Gerçek veriyle çalışan, eksik durumu olmayan, eksiksiz ve erişilebilir bileşenler isteyen React/Next.js arayüzü geliştiren frontend geliştiricileri için.
o zaman bu senin için dövüldü.Hangi AI ile çalışır
Tasarımı gereği evrensel: her yapay zekada çalışır. Açık Agent Skills + MCP biçiminde gelir (Claude’da yerleşik); ChatGPT, Gemini, Cursor ve Copilot aynı dosyaları kendine uyarlar.
- Claude Yerleşik biçim
- ChatGPT Açık standartla uyarlanır
- Gemini Açık standartla uyarlanır
- Cursor Açık standartla uyarlanır
- Copilot Açık standartla uyarlanır
Aklındakini yakala.
hava temizlendi. seninle ocak arasında hiçbir şey kalmadı.
bir kıvılcım yakala: ocak cevaplar
-
Hangi frontend yığınını varsayıyor?
Next.js 15 ve Tailwind ile React; üstüne belirli bir durum haritası: sunucu verisi için TanStack Query, istemci durumu için Zustand, formlar için Zod'lu React Hook Form, URL durumu için nuqs. Vue veya Angular kullanıyorsanız dört durum disiplini yine taşınır ama kopyala-kullan kalıplar taşınmaz.
-
'Boş ekran yok' ilkesi öneri olmaktan çıkıp nasıl zorunlu hale geliyor?
Her asenkron arayüzün dört durumu da içermesi şart koşulur: yükleniyor, hata, boş ve başarılı; bu bir tavsiye değil zorunlu kalıptır. Kırmızı bayrak tablosu alışıldık kestirmeleri (sahte veri, boş handler, eksik durum) çözümlerine eşler; tamamlanma kontrol listesi de bileşene bitti demeden önce gözden kaçanı yakalar.
-
Bu, kurup hazır stillenmiş butonlar alabileceğim bir bileşen kütüphanesi mi?
Hayır. Bu bir kalıp kütüphanesi: Server mı Client mı karar kuralları, durum mimarisi ve kopyala-kullan veri gösterimi ile form yapıları. Görsel bileşenler için kendi setini sunmak yerine sizi shadcn/ui ve Magic UI gibi kütüphanelere yönlendirir.
-
Nasıl teslim edilir?
Satın alımdan hemen sonra e-posta ile iletilir, kuruluma hazır, anında indirilir; bekleme yok.
-
Tek seferlik mi, abonelik mi?
Tek seferlik alımdır; abonelik veya gizli ücret yoktur. Fiyata KDV (%20) dahildir.
-
İade alabilir miyim?
Dijital ürün olduğu için indirildikten sonra iade yapılmaz. Bu yüzden ne içerdiğini ve kime uygun olduğunu burada açıkça paylaşıyoruz.