Claude Code Plan Mode: AI ile Yazilim Mimarisi Planlama

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

1Kullanici: "Header'a dark mode toggle ekle"
2Claude: [once header.tsx, theme-provider, layout.tsx okur]
3        [Bagimliliklari analiz eder]
4        [Plan cikarir: 4 dosya, 3 adim]
5        [Onay bekler]
6        [Tek seferde uygular]

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

1Degisiklik 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 olusturma
7│   └── useTheme hook export
8├── src/app/layout.tsx(DUZENLEME)
9│   └── ThemeProvider wrapper ekleme
10└── src/styles/globals.css(DUZENLEME)
11    └── Dark mode CSS degiskenleri

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 degil, 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 yapisini 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 kullanim noktalarini belirle
33. Propagasyon haritasi cikar
44. Degisiklik planini olustur

1// Ornek: "stats" degerini degistirmek istiyorsun
2// Grep-first strateji:
3 
4// 1. Tum kaynaklari tara
5Grep({ pattern: "60\+", path: "src/" })
6// Sonuc: 8 dosyada 12 kullanim
7 
8// 2. Her kullanimi 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. Degisiklik haritasi:
14// constants.ts → about.tsx → layout.tsx → seo-config.ts
15// 4 dosya, 12 yer, tek tutarli degisiklik

1## Degisiklik Haritasi
2 
3### Etkilenen Dosyalar (5 dosya)
4 
5| Dosya | Islem | 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 basarili mi?
242. Homepage dogru render mi?
253. Dark/light toggle calisiyor mu?
264. Hydration hatasi var mi?

1Claude: Degisiklik plani hazir. 5 dosya, 3 yeni fonksiyon.
2 
3[Plan detaylari...]
4 
5Onayliyor musunuz? (Evet / Degistir / Iptal)
6 
7Kullanici: "Layout.tsx degisikligini biraz daha detaylandir"
8 
9Claude: [Plani gunceller, tekrar sunar]
10 
11Kullanici: "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 degisiklik haritasi cikar, onay al
43. Code    — Onaylanan plani tek seferde uygula
54. Test    — Lint/analyze/build calistir
65. Verify  — Canli dogrulama(Playwright, curl)
76. Document — MEMORY.md + lessons.md guncelle

1// Ornek: Karmasik is - Plan Mode zorunlu
2// "19 yeni proje ekle" gorevi
3 
4// Explore: Mevcut proje yapisi, interface, standards
5// Plan: 19 proje x 11K karakter = ~200K icerik, 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 guncelle

1Gorev: 94 blog'a 7 yeni blog ekle (part15)
2 
3Plan:
41. Mevcut blog yapisini incele (blog-data.ts, interface)
52. Slug benzersizligini kontrol et (94 mevcut slug)
63. blog-posts-part15.ts olustur (7 blog, 10K+ karakter)
74. blog-data.ts'e import ekle
85. RSS guncelle (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 olustur
63. analytics/page.tsx dashboard sayfasi
74. Sidebar link ekleme
85. Firestore rules guncelleme
9 
10Etkilenen Dosyalar: 6 dosya (2 yeni + 4 guncelleme)
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 guncelleme (Grep-first strateji)
8 
9Etkilenen Dosyalar: 12 layout.tsx + sitemap.ts