Claude Code Plan Mode: AI ile Yazılım Mimarisi Planlama

1Kullanıcı: "Header'a dark mode toggle ekle"
2Claude: [Hemen header.tsx'i acar, kodu degistirir]
3         [Belki context'i kacirir, eksik kalir]

1Kullanıcı: "Header'a dark mode toggle ekle"
2Claude: [önce header.tsx, theme-provider, layout.tsx okur]
3        [Bagimliliklari analiz eder]
4        [Plan cikarir: 4 dosya, 3 adım]
5        [Onay bekler]
6        [Tek seferde uygular]

11. Glob ile dosya yapısı kesfet
22. Grep ile pattern'leri bul
33. Read ile kritik dosyalari oku
44. Import/export zincirlerini takip et
55. Bagimliliklari haritala

1Değişiklik Haritasi:
2├-- src/components/header.tsx (DUZENLEME)
3│   ├-- DarkModeToggle component import
4│   └-- Toggle buton ekleme
5├-- src/providers/theme-provider.tsx (YENI DOSYA)
6│   ├-- ThemeContext oluşturma
7│   └-- useTheme hook export
8├-- src/app/layout.tsx (DUZENLEME)
9│   └-- ThemeProvider wrapper ekleme
10└-- src/styles/globals.css (DUZENLEME)
11    └-- Dark mode CSS değişkenleri

1# Proje Adi
2 
3## Tech Stack
4- Next.js 15, React 19, TypeScript, Tailwind CSS
5- Static export (middleware/server actions KULLANILAMAZ)
6 
7## Golden Rules
81. Build sadece sunucuda — local build YASAK
92. LazyMotion zorunlu (motion değil, m component kullan)
103. use client + generateStaticParams ayni dosyada OLMAZ
11 
12## Code Rules
13 
14### TypeScript
15- Strict mode, any YASAK
16- Interface for objects, type for unions
17 
18### React
19- Hooks sirasi: useState > useRef > custom > useEffect > handlers > return
20 
21### Tailwind
22- Mobile-first: base > sm > md > lg > xl
23 
24## Commands
25- /deploy: rsync + build + copy + verify
26- /audit: Sayfa bazli site denetimi

1~/.claude/CLAUDE.md          # Global (tum projeler)
2~/proje/.claude/CLAUDE.md    # Proje spesifik
3~/proje/CLAUDE.md            # Proje root (version controlled)
4~/proje/.claude/rules/*.md   # Ek kurallar

11. Proje root'u incele (package.json, tsconfig, next.config)
22. src/ dizin yapısıni tara
33. Hedef dosyalari oku
44. Import zincirlerini takip et

11. Degisecek dosyayi oku
22. Bu dosyayi import eden dosyalari bul
33. Bagimliliklari haritalat
44. Etki alanini belirle

11. Anahtar kelimeyi tum codebase'de ara
22. Tum kullanım noktalarini belirle
33. Propagasyon haritasi çıkar
44. Değişiklik planini oluştur

1// Örnek: "stats" değerini değiştirmek istiyorsun
2// Grep-first strateji:
3 
4// 1. Tum kaynaklari tara
5Grep({ pattern: "60\+", path: "src/" })
6// Sonuç: 8 dosyada 12 kullanım
7 
8// 2. Her kullanımi incele
9Read({ file_path: "src/lib/constants.ts" })    // Ana kaynak
10Read({ file_path: "src/components/about.tsx" }) // UI
11Read({ file_path: "src/app/layout.tsx" })       // SEO
12 
13// 3. Değişiklik haritasi:
14// constants.ts → about.tsx → layout.tsx → seo-config.ts
15// 4 dosya, 12 yer, tek tutarlı değişiklik

1## Değişiklik Haritasi
2 
3### Etkilenen Dosyalar (5 dosya)
4 
5| Dosya | İşlem | Satir | Risk |
6|-------|-------|-------|------|
7| src/lib/constants.ts | DUZENLE | ~20 | Dusuk |
8| src/components/header.tsx | DUZENLE | ~50 | Orta |
9| src/providers/theme.tsx | YENI | ~80 | Dusuk |
10| src/app/layout.tsx | DUZENLE | ~10 | Yuksek |
11| src/styles/globals.css | DUZENLE | ~30 | Dusuk |
12 
13### Bagimllik Zinciri
14constants.ts → header.tsx → layout.tsx
15                          → theme.tsx (yeni)
16 
17### Riskler
18- layout.tsx degisikligi tum sayfalari etkiler
19- Theme provider SSR/hydration uyumlulugu kontrol edilmeli
20- globals.css degisikligi cascade etkisi yaratabilir
21 
22### Test Plani
231. Build başarılı mi?
242. Homepage doğru render mi?
253. Dark/light toggle çalışıyor mu?
264. Hydration hatasi var mi?

1Claude: Değişiklik plani hazir. 5 dosya, 3 yeni fonksiyon.
2 
3[Plan detaylari...]
4 
5Onayliyor musunuz? (Evet / Değiştir / Iptal)
6 
7Kullanıcı: "Layout.tsx degisikligini biraz daha detaylandir"
8 
9Claude: [Plani günceller, tekrar sunar]
10 
11Kullanıcı: "Tamam, uygula"
12 
13Claude: [5 dosyayi tek seferde degistirir]

1{
2  "permissions": {
3    "defaultMode": "plan"
4  }
5}

1EPCT+ Fazlari:
21. Explore — CLAUDE.md + MEMORY.md oku, codebase tara
32. Plan    — Plan Mode'da değişiklik haritasi çıkar, onay al
43. Code    — Onaylanan plani tek seferde uygula
54. Test    — Lint/analyze/build çalıştır
65. Verify  — Canli doğrulama (Playwright, curl)
76. Document — MEMORY.md + lessons.md güncelle

1// Örnek: Karmaşık is - Plan Mode zorunlu
2// "19 yeni proje ekle" gorevi
3 
4// Explore: Mevcut proje yapısı, interface, standards
5// Plan: 19 proje x 11K karakter = ~200K içerik, 5 paralel agent
6// Code: Her agent 3-4 proje yazar (paralel)
7// Test: TypeScript strict, lint, build
8// Verify: Playwright canli test (82 assertion)
9// Document: MEMORY.md + worklog güncelle

1Gorev: 94 blog'a 7 yeni blog ekle (part15)
2 
3Plan:
41. Mevcut blog yapısıni incele (blog-data.ts, interface)
52. Slug benzersizligini kontrol et (94 mevcut slug)
63. blog-posts-part15.ts oluştur (7 blog, 10K+ karakter)
74. blog-data.ts'e import ekle
85. RSS güncelle (94 > 101)
9 
10Etkilenen Dosyalar:
11- blog-posts-part15.ts (YENI)
12- blog-data.ts (IMPORT)
13- public/rss.xml (GUNCELLE)

1Gorev: Admin panele analytics dashboard ekle
2 
3Plan:
41. Recharts kutuphane kurulumu
52. page-tracking.ts servis oluştur
63. analytics/page.tsx dashboard sayfasi
74. Sidebar link ekleme
85. Firestore rules güncelleme
9 
10Etkilenen Dosyalar: 6 dosya (2 yeni + 4 güncelleme)
11Sprint: 4 faz, multi-agent ile 2. ve 3. paralel

1Gorev: 11 sayfa SEO metadata zenginlestirme
2 
3Plan:
41. Tum layout.tsx dosyalarini tara
52. Eksik Schema.org, OG, Twitter Card belirle
63. Her sayfanin meta description uzunlugu kontrol
74. Toplu güncelleme (Grep-first strateji)
8 
9Etkilenen Dosyalar: 12 layout.tsx + sitemap.ts