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

1. •Kullanıcı “kod” istiyorsa:

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

1. •Kullanıcı “tam landing page” istiyorsa:

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

1. •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ı