@hd-agent-kit/cli 1.0.0

package/templates/.agents/skills/performance-check/SKILL.md

@@ -0,0 +1,250 @@
+# /performance-check — Performans Analiz Skill'i
+
+> **Tetikleyici:** `/performance-check [dosya/modül]`
+> **Amaç:** Bundle analizi, render performansı, Core Web Vitals ve genel performans değerlendirmesi sunmak.
+> **Çıktı:** Lighthouse benzeri puanlı rapor + aksiyon önerileri
+
+---
+
+## Temel İlkeler
+
+- **Ölçmeden optimize etme.** Önce darboğazı tespit et, sonra çöz.
+- **Premature optimization is the root of all evil.** Gerçek sorunlara odaklan.
+- **Core Web Vitals odaklı ol.** LCP, INP, CLS metrikleri öncelikli.
+- **Bundle size'ı her zaman göz önünde bulundur.** Her KB önemli, özellikle mobilde.
+
+---
+
+## Kullanım Formatları
+
+```
+/performance-check                         ← Tüm proje analizi
+/performance-check src/pages/Home.tsx      ← Belirli sayfa/component
+/performance-check bundle                  ← Sadece bundle analizi
+/performance-check render                  ← Sadece render performansı
+```
+
+---
+
+## Analiz Kategorileri
+
+### Kategori 1: Bundle Analizi
+
+Projenin bundle yapısını incele:
+
+```
+📦 Bundle Analizi:
+
+1. package.json Dependency Taraması:
+   ├── Toplam dependency sayısı: [N]
+   ├── Büyük dependency'ler (>100KB gzipped):
+   │   ├── [kütüphane]: ~[boyut]KB
+   │   ├── [kütüphane]: ~[boyut]KB
+   │   └── ...
+   ├── Duplicate dependency riski: [var/yok]
+   ├── Tree-shakeable olmayan import'lar: [liste]
+   └── Daha hafif alternatifler:
+       ├── [mevcut] → [alternatif] (boyut kazancı: ~[N]KB)
+       └── ...
+
+2. Import Analizi:
+   ├── Barrel export sorunları: [var/yok]
+   ├── Dynamic import kullanımı: [var/yok, nerede]
+   ├── Side-effect import'lar: [liste]
+   └── Unused export'lar: [tespit edilebiliyorsa]
+
+3. Code Splitting:
+   ├── Route-based splitting: [var/yok]
+   ├── Component-based splitting (lazy): [var/yok]
+   ├── Vendor chunk ayrımı: [var/yok]
+   └── Önerilen split noktaları: [liste]
+```
+
+**Kontrol Listesi:**
+
+| # | Kontrol | Durum | Etki |
+|---|---------|-------|------|
+| 1 | Tree-shakeable import kullanılıyor mu? | ✅/❌ | Yüksek |
+| 2 | Büyük kütüphaneler lazy load ediliyor mu? | ✅/❌ | Yüksek |
+| 3 | Görseller optimize mi? (WebP/AVIF) | ✅/❌ | Yüksek |
+| 4 | Font'lar optimize mi? (subset, swap) | ✅/❌ | Orta |
+| 5 | CSS purge/tree-shake aktif mi? | ✅/❌ | Orta |
+| 6 | Source map production'da kapalı mı? | ✅/❌ | Düşük |
+| 7 | Gzip/Brotli compression aktif mi? | ✅/❌ | Yüksek |
+
+### Kategori 2: Render Performansı
+
+Component render davranışını analiz et:
+
+```
+🔄 Render Performansı:
+
+1. Gereksiz Re-render Tespiti:
+   ├── [Component] → [sebep: parent re-render, context değişimi, prop referans değişimi]
+   ├── [Component] → [sebep]
+   └── ...
+
+2. Expensive Computation:
+   ├── [dosya:satır] → [hesaplama açıklaması] — useMemo önerisi: [Evet/Hayır]
+   └── ...
+
+3. State Yönetimi Sorunları:
+   ├── Gereksiz global state: [component-local olabilecek state'ler]
+   ├── Context granülarity: [çok geniş context → gereksiz re-render]
+   └── Derived state hesaplama: [hesaplanabilecek ama state'te tutulan değerler]
+
+4. Liste Performansı:
+   ├── Büyük listeler (>100 item): [var/yok]
+   ├── Virtualization kullanımı: [var/yok]
+   ├── Key prop uygunluğu: [index kullanılıyor mu?]
+   └── Öneriler: [virtualization, pagination, infinite scroll]
+```
+
+**Kontrol Listesi:**
+
+| # | Kontrol | Durum | Etki |
+|---|---------|-------|------|
+| 1 | Gereksiz re-render var mı? | ✅/❌ | Yüksek |
+| 2 | React.memo gerekli yerlerde kullanılmış mı? | ✅/❌ | Orta |
+| 3 | useMemo/useCallback gerekli yerlerde mi? | ✅/❌ | Orta |
+| 4 | Büyük listeler virtualize ediliyor mu? | ✅/❌ | Yüksek |
+| 5 | Key prop'ları stabil ve benzersiz mi? | ✅/❌ | Orta |
+| 6 | Context değerleri memoize ediliyor mu? | ✅/❌ | Orta |
+| 7 | Expensive hesaplamalar memoize mi? | ✅/❌ | Orta |
+
+### Kategori 3: Core Web Vitals
+
+```
+📊 Core Web Vitals Değerlendirmesi:
+
+1. LCP (Largest Contentful Paint) — Yükleme Hızı:
+   ├── Hero image/banner optimize mi?
+   ├── Critical CSS inline mı?
+   ├── Font loading stratejisi: [swap/block/optional]
+   ├── Preload kullanımı: [var/yok]
+   ├── Server-side rendering/static generation: [var/yok]
+   └── Öneri: [aksiyon listesi]
+
+2. INP (Interaction to Next Paint) — Etkileşim Hızı:
+   ├── Long task'lar var mı? (>50ms)
+   ├── Event handler'lar optimize mi?
+   ├── Heavy computation main thread'de mi?
+   ├── Debounce/throttle kullanımı: [var/yok]
+   └── Öneri: [aksiyon listesi]
+
+3. CLS (Cumulative Layout Shift) — Görsel Stabilite:
+   ├── Görsel boyutları belirtilmiş mi? (width/height)
+   ├── Font yüklenirken layout shift var mı?
+   ├── Dynamic content ekleme shift yaratıyor mu?
+   ├── Skeleton/placeholder kullanımı: [var/yok]
+   └── Öneri: [aksiyon listesi]
+```
+
+### Kategori 4: Network & Caching
+
+```
+🌐 Network & Caching:
+
+1. API Çağrıları:
+   ├── Gereksiz/duplicate API çağrıları: [var/yok]
+   ├── Waterfall request'ler: [var/yok — paralelize edilebilir mi?]
+   ├── Cache stratejisi: [TanStack Query staleTime, SWR revalidate vs.]
+   ├── Optimistic update: [kullanılıyor mu?]
+   └── Prefetching: [var/yok]
+
+2. Static Asset Caching:
+   ├── Cache-Control header'ları: [var/yok]
+   ├── Content hash (fingerprinting): [var/yok]
+   ├── CDN kullanımı: [var/yok]
+   └── Service Worker: [var/yok]
+
+3. Data Loading:
+   ├── Skeleton/loading state'leri: [var/yok]
+   ├── Progressive loading: [var/yok]
+   ├── Pagination vs infinite scroll: [hangi yaklaşım]
+   └── Server-side data fetching: [SSR/SSG/ISR]
+```
+
+### Kategori 5: Görsel & Asset Optimizasyonu
+
+```
+🖼️ Asset Optimizasyonu:
+
+1. Görseller:
+   ├── Format: [PNG/JPG/WebP/AVIF]
+   ├── Responsive images (srcset): [var/yok]
+   ├── Lazy loading: [var/yok]
+   ├── Next/Image veya benzeri optimizasyon: [var/yok]
+   ├── Placeholder (blur/LQIP): [var/yok]
+   └── Boyut optimizasyonu: [büyük görseller var mı?]
+
+2. Font'lar:
+   ├── Font format: [woff2 mi?]
+   ├── Subset kullanımı: [var/yok]
+   ├── font-display stratejisi: [swap/block/optional]
+   ├── Preload: [var/yok]
+   └── Variable font: [var/yok]
+
+3. SVG/İkon'lar:
+   ├── SVG sprite/inline: [hangi yaklaşım]
+   ├── İkon kütüphanesi tree-shakeable mi?
+   └── Gereksiz metadata temizlenmiş mi?
+```
+
+---
+
+## Puanlama Sistemi
+
+Her kategori için 0-100 puan ver:
+
+```
+📊 Performans Raporu:
+
+┌──────────────────────┬───────┬──────────┐
+│ Kategori             │ Puan  │ Seviye   │
+├──────────────────────┼───────┼──────────┤
+│ Bundle Size          │ XX/100│ 🟢/🟡/🔴│
+│ Render Performansı   │ XX/100│ 🟢/🟡/🔴│
+│ Core Web Vitals      │ XX/100│ 🟢/🟡/🔴│
+│ Network & Caching    │ XX/100│ 🟢/🟡/🔴│
+│ Asset Optimizasyonu  │ XX/100│ 🟢/🟡/🔴│
+├──────────────────────┼───────┼──────────┤
+│ GENEL                │ XX/100│ 🟢/🟡/🔴│
+└──────────────────────┴───────┴──────────┘
+
+🟢 90-100: Mükemmel
+🟡 60-89: İyileştirme alanı var
+🔴 0-59: Acil müdahale gerekli
+```
+
+---
+
+## Aksiyon Önerileri
+
+Her sorun için öncelikli aksiyon planı sun:
+
+```
+🎯 Aksiyon Planı (Öncelik Sırasına Göre):
+
+🔴 Acil (Yüksek Etki + Düşük Efor):
+1. [Aksiyon] — Tahmini etki: [LCP -Xms, bundle -XKB vs.]
+2. [Aksiyon]
+
+🟡 Orta Vadeli (Yüksek Etki + Orta Efor):
+3. [Aksiyon]
+4. [Aksiyon]
+
+🟢 Uzun Vadeli (Orta Etki + Yüksek Efor):
+5. [Aksiyon]
+6. [Aksiyon]
+```
+
+---
+
+## Çıktı Formatı
+
+1. **Genel skor** — Hızlı bakış puanlama tablosu
+2. **Kategori detayları** — Her kategori için kontrol listesi sonuçları
+3. **Sorun listesi** — Öncelik sırasına göre bulunan sorunlar
+4. **Aksiyon planı** — Efor/etki matrisine göre sıralı öneriler
+5. **Quick wins** — Hemen uygulanabilecek iyileştirmeler

package/templates/.agents/skills/refactor/SKILL.md

@@ -0,0 +1,240 @@
+# /refactor — Refactoring Skill'i
+
+> **Tetikleyici:** `/refactor [dosya/modül]`
+> **Amaç:** Belirtilen dosya veya modül için detaylı, güvenli bir refactor planı oluşturmak ve kullanıcı onayı ile uygulamak.
+> **Çıktı:** Etki analizi + adım adım uygulama planı → Onay sonrası kod değişiklikleri
+
+---
+
+## Temel İlkeler
+
+- **Asla direkt uygulamaya geçme.** Önce plan sun, onay al, sonra uygula.
+- **Her adım bağımsız çalışır (deployable) olmalı.** Yarım kalan refactor, bozuk kod demektir.
+- **Boy Scout Rule:** Dokunduğun dosyayı bulduğundan biraz daha iyi bırak — ama sadece dokunduğun dosyayı.
+- **Mevcut testler kırılmamalı.** Refactor sonrası tüm testler geçmeli.
+
+---
+
+## Kullanım Formatları
+
+```
+/refactor src/components/UserProfile.tsx
+/refactor src/hooks/useAuth.ts
+/refactor src/features/auth/            ← Tüm klasör
+/refactor UserService                    ← Modül adı ile (AI dosyayı bulur)
+```
+
+---
+
+## Uygulama Adımları
+
+### Adım 1: Kapsam Belirleme
+
+Hedef dosya/modülü oku ve şunları tespit et:
+
+```
+📋 Kapsam Analizi:
+├── Hedef dosya/modül: [dosya yolu]
+├── Dosya boyutu: [satır sayısı]
+├── Bağımlı dosyalar (import edenler): [liste]
+├── Bağımlılıklar (import edilenler): [liste]
+├── Mevcut test coverage: [var/yok, dosya yolu]
+├── Son değişiklik tarihi: [git log'dan]
+└── Dosyanın rolü: [component, hook, util, service vs.]
+```
+
+### Adım 2: Sorun Tespiti
+
+Refactor gerektiren sorunları kategorize et:
+
+```
+🔍 Tespit Edilen Sorunlar:
+
+🔴 Kritik (mutlaka düzeltilmeli):
+- [Güvenlik açığı, data loss riski, ciddi performans sorunu]
+
+🟡 Önemli (düzeltilmesi önerilen):
+- [Kod tekrarı, karmaşık mantık, okunabilirlik sorunu, deprecated API kullanımı]
+
+🟢 Kozmetik (isteğe bağlı):
+- [Adlandırma, import sırası, formatting tutarsızlığı]
+```
+
+### Adım 3: Risk Değerlendirmesi
+
+Her değişiklik için risk seviyesi belirle:
+
+```
+⚠️ Risk Değerlendirmesi:
+
+Yüksek Risk:
+- Auth, ödeme, veri kaybı riski olan alanlar → Ekstra dikkat, mutlaka test ile doğrula
+- Breaking change içeren değişiklikler → Tüm kullanım yerlerini güncelle
+
+Orta Risk:
+- Paylaşılan component'ler, hook'lar → Etki analizi zorunlu
+- Public API değişiklikleri → Tüm consumer'ları kontrol et
+
+Düşük Risk:
+- Kozmetik, adlandırma, dosya taşıma → Güvenle uygula
+- Internal/private fonksiyon değişiklikleri → Sadece birim testi yeterli
+```
+
+### Adım 4: Etki Analizi
+
+```
+💥 Etki Analizi:
+
+Bu refactor [N] dosyayı etkiliyor:
+1. [dosya yolu] → [ne değişecek] (Risk: [Yüksek/Orta/Düşük])
+2. [dosya yolu] → [ne değişecek] (Risk: [Yüksek/Orta/Düşük])
+3. ...
+
+Bağımlılık Grafiği:
+[hedef dosya] ← [import eden 1] ← [import eden 2]
+                ← [import eden 3]
+```
+
+### Adım 5: Uygulama Planı Sunumu
+
+```
+📝 Refactor Planı:
+
+Uygulama Sırası (inside-out):
+1. [İlk değişecek dosya] → [ne yapılacak]
+   Doğrulama: [test komutu veya kontrol adımı]
+
+2. [İkinci dosya] → [ne yapılacak]
+   Doğrulama: [test komutu veya kontrol adımı]
+
+3. ...
+
+Tahmini Etkilenen Dosya Sayısı: [N]
+Breaking Change: [Var/Yok]
+Geriye Dönük Uyumluluk: [Korunuyor/Kırılıyor — detay]
+
+Bu planı onaylıyor musunuz? (Evet / Hayır / Değişiklik öner)
+```
+
+### Adım 6: Onay Sonrası Uygulama
+
+Kullanıcı onayladıktan sonra:
+
+1. **Types/interfaces** → En derin bağımlılıktan başla
+2. **Services/utils** → İş mantığı katmanı
+3. **Hooks** → State ve side-effect katmanı
+4. **Components** → UI katmanı
+5. **Tests** → Güncelle veya yeni test ekle
+
+Her adım sonrası:
+- Değişikliği göster (önce/sonra karşılaştırması)
+- "Bu değişikliği uyguladıktan sonra devam edelim mi?" sor (büyük refactor'larda)
+
+---
+
+## Refactor Tipleri ve Stratejileri
+
+### Component Refactor
+```
+Kontrol listesi:
+□ Component 150 satırı aşıyor mu? → Parçala
+□ Birden fazla sorumluluk var mı? → Single Responsibility uygula
+□ Props 5'ten fazla mı? → Composition pattern veya compound component düşün
+□ Aynı logic birden fazla component'te mi? → Custom hook'a taşı
+□ Inline style veya magic number var mı? → Token/theme sistemine taşı
+□ Erişilebilirlik eksik mi? → ARIA, semantik HTML ekle
+```
+
+### Hook Refactor
+```
+Kontrol listesi:
+□ Hook birden fazla concern yönetiyor mu? → Ayır
+□ useEffect'te karmaşık logic var mı? → Custom hook'a taşı veya parçala
+□ Cleanup fonksiyonu eksik mi? → Ekle
+□ Dependency array doğru mu? → Kontrol et
+□ Gereksiz re-render'a yol açıyor mu? → Optimize et
+```
+
+### State Refactor
+```
+Kontrol listesi:
+□ Prop drilling 3+ seviye mi? → Context veya state lib'e taşı
+□ Server state client state ile karışmış mı? → Ayır (TanStack Query vs.)
+□ Derived state hesaplanıyor mu? → useMemo veya selector kullan
+□ Form state elle yönetiliyor mu? → Form library'ye taşı
+□ URL'de olması gereken state local'de mi? → URL'e taşı
+```
+
+### Dosya/Modül Yapısı Refactor
+```
+Kontrol listesi:
+□ Feature-based yapıya geçiş gerekli mi?
+□ Barrel export (index.ts) tree-shaking'i bozuyor mu?
+□ Circular dependency var mı?
+□ Dosya adlandırma convention'a uyuyor mu?
+□ Co-location prensibi sağlanıyor mu?
+```
+
+---
+
+## Büyük Dosya Refactor Stratejisi
+
+### 150 satırdan kısa dosyalar
+→ Dosyanın tamamını yeniden yazabilirsin.
+
+### 150-500 satır arası dosyalar
+→ Sadece değişen bölümleri diff/patch formatında göster.
+```
+📄 [dosya yolu] (satır X-Y arası)
+// Mevcut kod:
+[mevcut kod bloğu]
+
+// Önerilen değişiklik:
+[yeni kod bloğu]
+
+// Neden: [değişiklik sebebi]
+```
+
+### 500 satırdan uzun dosyalar
+→ Dosyayı bölümlere ayır, sadece ilgili bölümü göster.
+→ Asla tüm dosyayı yeniden yazmaya çalışma.
+→ Parçalama (extraction) stratejisi öner.
+
+---
+
+## İyileştirme Kapsamı Kuralları
+
+### Sessizce Yapılabilecekler (sormadan)
+- Import sıralamasını düzelt
+- Kullanılmayan import'ları kaldır
+- Tip hatalarını düzelt (any → doğru tip)
+- Basit adlandırma iyileştirmeleri
+
+### Sorarak Yapılacaklar (davranış değiştirebilir)
+- Deprecated API kullanımını güncelle
+- Basit performans iyileştirmeleri (gereksiz re-render düzeltme)
+- Eksik error handling ekleme
+
+### Yapılmayacaklar (açıkça istenmediği sürece)
+- State management yaklaşımını değiştirme
+- Farklı bir kütüphaneye migration
+- İlgisiz dosyalara dallanma
+- Tüm proje yapısını değiştirme
+
+---
+
+## Çıktı Formatı
+
+Refactor planı her zaman şu sırada sunulur:
+
+1. **Kapsam Özeti** — Ne refactor edilecek, neden
+2. **Sorun Listesi** — Kategorize edilmiş sorunlar
+3. **Etki Analizi** — Hangi dosyalar etkilenecek
+4. **Risk Değerlendirmesi** — Her değişikliğin risk seviyesi
+5. **Uygulama Planı** — Adım adım sıralı plan
+6. **Onay Talebi** — Kullanıcıdan onay bekle
+
+Onay sonrası her adımda:
+- Önce/sonra karşılaştırması
+- Değişiklik sebebi açıklaması
+- Sonraki adıma geçiş onayı (büyük refactor'larda)