---
title: UI
category: product
entity_type: skill
price: ₺369
canonical: https://forgehouse.ai/tr/skiller/ui/
lang: tr
hreflang_alt: https://forgehouse.ai/skills/ui/
last_updated: 2026-06-20
---

# UI

> Frontend development patterns for React components, Next.js pages, forms, and Tailwind styling

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.

## Ne için kullanılır
- Yükleme, hata, boş ve başarı durumlarını düzgün işleyen veri listeleri
- React Hook Form, Zod doğrulama ve toast geri bildirimli formlar
- Taranabilir ve hızlı render olan sayfalar için Server Component'ler
- Asenkron params/searchParams ile Next.js 15 dinamik rotaları
- cn() yardımcısıyla koşullu Tailwind stillendirmesi
- 375px'ten 1440px'e erişilebilir, duyarlı arayüz

## Faydalar
- Boş ekranlara son: her asenkron durum varsayılan olarak işlenir
- Server Component HTML çıktısıyla daha hızlı ve SEO dostu sayfalar
- Sessiz hatalar yerine gerçek doğrulamayla tutarlı formlar
- Erişilebilir arayüzler (WCAG AA, klavye, ekran okuyucu) baştan dahil

## Ne içerir
- Server mı Client mı bileşen karar kuralları
- Durum mimarisi haritası (TanStack Query, Zustand, RHF, nuqs, useState)
- Kopyala-kullan veri-gösterimi, form ve server-fetch bileşen kalıpları
- Bileşen kütüphanesi yönlendirmesi (shadcn/ui, Magic UI, Preline, Prompt Kit)
- Erişilebilirlik ve tamamlanma kontrol listeleri
- Anti-pattern'leri çözümlere eşleyen kırmızı-bayrak tablosu (sahte veri, boş handler, eksik durum)

## Kimler için
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.

## Nasıl çalışır
Skill her frontend işinde tam olarak bu döngüyü koşar. Kara kutu yok, yaptığı iş budur:
1. Ö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
2. 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
3. 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
4. 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
5. 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
6. 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

## Sık sorulanlar
### 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.

## Fiyat
₺369, tek seferlik, abonelik yok. KDV dahil.

İlgili rehber: [Yapay zekâ ile tasarım sistemi](https://forgehouse.ai/tr/rehberler/yapay-zeka-ile-tasarim-sistemi/)