---
name: frontend-glassmorphism
description: Builds premium glassmorphism (3D-like, soft blur) frontend UI components and landing pages using React/Next.js + Tailwind conventions. Use when designing modern SaaS pages, hero sections, pricing, navbars, feature grids, and animations with accessible contrast and performance constraints.
---

# 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ı