Frontend Glassmorphism

Frontend Glassmorphism Skill

Bu skill, modern SaaS landing page ve UI bileşenlerini glassmorphism estetiğiyle üretmek için kurallar ve şablonlar sağlar.

Ne zaman kullanılır?

• “Landing page”, “hero”, “pricing”, “features”, “navbar”, “CTA”, “dashboard UI” gibi isteklerde
• “3D glassmorphism”, “blur”, “frosted glass”, “neon”, “soft shadow”, “premium UI” gibi ifadeler geçtiğinde
• UI üretimi istenirken tasarım dili + kod kalitesi birlikte istendiğinde

Çıktı hedefleri

1. Görsel kalite: premium, yormayan, modern
2. Okunabilirlik: kontrast, tipografi, spacing
3. Uygulanabilir kod: React/Next.js + Tailwind ile copy/paste çalışır
4. Performans: blur ve gölgeler ölçülü, gereksiz animasyon yok
5. Erişilebilirlik: buton/Link states, focus ring, semantik yapı

Tasarım İlkeleri (Glassmorphism Standardı)

A) Cam katman (glass surface)

• Arka plan: gradient + yumuşak noise hissi
• Kart: backdrop-blur + yarı şeffaf beyaz/siyah katman
• Border: ince ve yarı saydam (ışık kırılması efekti)
• Shadow: soft, çok yayık, “floating” hissi

Önerilen Tailwind pattern:

• bg-white/5 veya bg-black/20
• backdrop-blur-xl
• border border-white/10
• shadow-2xl shadow-black/20
• rounded-2xl

B) Renk ve kontrast

• Metin kontrastı “cam üstünde” okunacak şekilde ayarlanmalı
• Minimum: body metinlerinde yeterli kontrast
• Parlak neon sadece vurgu (accent) olarak kullanılmalı

C) Tipografi ve hiyerarşi

• Hero başlık: büyük, kısa, net
• Alt metin: 2-3 satır, fayda odaklı
• CTA: 1 ana + 1 ikincil

D) Layout

• Grid tabanlı düzen (12-col veya 2/3 kolon)
• Bol whitespace
• Kartlar arası tutarlı spacing

Kod Kuralları (Frontend)

• React bileşenleri: tek sorumluluk
• Tailwind: className’ler aşırı şişmesin, gerektiğinde yardımcı fonksiyon kullanılabilir
• State yönetimi gerekiyorsa minimal
• Animasyon: framer-motion kullanımı varsa kontrollü
• Her bileşende:
  • hover/focus/active state
  • mobile responsive
  • semantik tag (nav, header, main, section)

İş Akışı (Decision Tree)

1. Kullanıcı “sadece tasarım konsepti” istiyorsa:

• resources/prompt-templates.md içinden uygun prompt şablonu ver

2. Kullanıcı “kod” istiyorsa:

• examples/ dosyalarına benzer şekilde TSX bileşeni üret
• Tailwind tokenlarını resources/tokens.json ile uyumlu tut

3. Kullanıcı “tam landing page” istiyorsa:

• Hero + Social proof + Features + Pricing + FAQ + CTA bloklarını üret
• Her blok glass kart temasıyla tutarlı olsun

4. Kullanıcı “performans” diyorsa:

• Blur seviyesini azalt, gölgeleri sadeleştir, animasyonları minimuma indir

Script Kullanımı

Skill içindeki scriptler “black box”tır:

• Önce --help çalıştır
• Sonra amaca uygun parametrelerle kullan

Scriptler:

• scripts/check-ui.sh: proje içinde UI hygiene check (opsiyonel)
• scripts/generate-component.ts: örnek bileşen şablonu üretir (opsiyonel)

Çıktı Formatı

• Kod istenirse: tek bir TSX dosyası veya bileşen blokları
• Tasarım yönergesi istenirse: bullet list + tokenlar + örnek className pattern’leri
• Gereksiz uzun açıklama yok, direkt kullanılabilir çıktı