feat(v2): 9–10 Ekim çalışma ağacı — deneyim dili 1. dalga, PWA manifest, revizyon niyet modeli, listem/tadımlık bileşen denetimi

9–10 Ekim oturumlarının commit'lenmemiş işi tek parça alındı (raporlar: docs/ekip-raporlari/2026-10-09, 2026-10-10): - Landing deneyim dili 1. dalga: sayfa geçişi (ViewTransition), piksel morf/şerit, sorun sahneleri, adım akışı, sayan sayı, mobil menü, adım göstergesi, logoya tepki; DESIGN.md §11 ve AGENTS.md kuralları, tasarım denetimine yeni kurallar - Tema: tema ikonu, D kısayolu, tema geçişi - PWA: manifest.ts ve ikonlar - Danışman: revizyon niyet modeli (OPENROUTER_NIYET_MODEL), sohbet geçmişi, soru API'si - /listem ve /sonuc tadımlığı bileşen denetimi düzeltmeleri - eslint: .venv-tts/ yok sayılır tsc, eslint ve tasarım denetimi sıfır hata. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-10-11 00:34:29 +03:00
parent da0e9dff7a
commit aec8a2ad76
80 changed files with 4134 additions and 654 deletions
--- a/.agents/skills/kolaytercih-tasarim/SKILL.md
+++ b/.agents/skills/kolaytercih-tasarim/SKILL.md
@@ -10,8 +10,8 @@ yön zaten belli. Kaynak tek: `docs/tasarim/DESIGN.md`. Bu dosya onu nasıl uygu

 ## 1. Başlamadan önce (zorunlu)

-1. `docs/tasarim/DESIGN.md` dosyasını **tamamını** oku (477 satır). Özellikle §1.1 temel his, §4 tek kaynaklar, §7 yap/yapma ve §9.2 ölç-tahmin-etme. Canlı referans ekran: `/universite/ankara-universitesi`.
-2. Dört satırlık brief'i doldur (DESIGN.md §9): amaç · referans ekran · tek kaynak parçalar · durumlar.
+1. `docs/tasarim/DESIGN.md` dosyasını **tamamını** oku (uzun bir belge; atlama). Özellikle §1.1 temel his, §4 tek kaynaklar, §6 hareket, §7 yap/yapma, §9.2 ölç-tahmin-etme ve **§11 deneyim ilkeleri**. Canlı referans ekran: `/universite/ankara-universitesi`.
+2. Beş satırlık brief'i doldur (DESIGN.md §9.1): amaç · referans ekran · tek kaynak parçalar · durumlar · his. Yanına bir satır ekle: **§11.1'deki hangi vaka bu işe en yakın ve hangi *nedeni* taşıyacağım?**
 3. Referans ekranı bul ve aç; kopyalayacağın sınıf dizilerini oradan al:

 ```bash
@@ -20,26 +20,54 @@ grep -rn "bg-orange-500" src --include='*.tsx' -l           # turuncu CTA örnek
 grep -rn "PixelCorner\|PagePixelDivider" src -l --include='*.tsx'   # piksel imzası taşıyan ekranlar
 ```

-Ana sayfa bölüm iskeleti: `src/app/page.tsx` (Problem bölümü, ~satır 268). Alt sayfa başlığı: `src/app/meraklisina/page.tsx`.
+Ana sayfa bölüm iskeleti: `src/app/page.tsx` ("Sorun" bölümü; `grep -n "SectionEyebrow" src/app/page.tsx`). Alt sayfa başlığı: `src/app/meraklisina/page.tsx`.

 ## 2. Yazarken

 - Kanonik parçaları içe aktar, yeniden çizme: `SectionEyebrow`, `PagePixelDivider`, `PixelCorner`
-  (`@/components/pixel-decor`); `Button` (`@/components/ui/button`); `Card` (`@/components/ui/card`);
-  `DialogContent` varsayılan çarpısı (`@/components/ui/dialog`); `ArrowRight`, `XIcon` (`lucide-react`).
+  (`@/components/pixel-decor`); `Button` (`@/components/ui/button`; turuncu CTA `variant="cta"`,
+  ikincil `variant="ikincil"`); `Card` (`@/components/ui/card`); `AdimGostergesi`
+  (`@/components/ui/adim-gostergesi`); `AltSayfa` (`@/components/ui/alt-sayfa`); `SayiRulo`
+  (`@/components/ui/sayi-rulo`); `DialogContent` varsayılan çarpısı (`@/components/ui/dialog`);
+  `ArrowRight`, `XIcon` (`lucide-react`).
 - Sınıf dizilerini DESIGN.md'den **birebir** kopyala; "yaklaşık aynı" yazma.
 - Her piksel süsüne o sayfaya özgü tek `seed` ver (mevcut seed'ler: `grep -rho "seed={[0-9]*}" src | sort -u`).
 - Risk rengi kullanıyorsan metin etiketini `RISK_ETIKET` / `DILIM_ETIKET`'ten (`src/lib/risk.ts`) al.
 - Türkçe tanımlayıcı, çevredeki kodla aynı yorum yoğunluğu (AGENTS.md).

+## 2.1 Hareket ve deneyim (DESIGN.md §6, §11)
+
+Site "web sitesi değil web uygulaması" gibi hissettirir. Yazdığın her parça için:
+
+- **Her eylemin cevabı var.** Basınca `active:scale-[0.97]`; sonucu olan eylem sonucunu gösterir
+  (sayı `SayiRulo` ile döner, seçim vurgusu `layoutId` ile kayar, tik `pathLength` ile çizilir).
+  Koşullu render ile anında yer değiştiren içerik son çaredir.
+- **Durumu yansıt.** Sıra (`useTercihProfili`), liste doluluğu (`liste-store`), giriş: ekranın
+  bunlardan haberi olmalı mı? Olmalıysa göster.
+- **Yay/eğri/süre uydurma.** Yalnız `src/lib/hareket.ts`: `YAY.varsayilan | akici | donusum |
+  birakma | adim`, `EGRI.giris | standart | gucluCikis | yerlesme`, `SURE.*`. Sekme yalnız bir
+  şey fırlıyorsa (`YAY.birakma`).
+- **Sahne tek.** Sıralı, sahnelenmiş belirme sayfanın ilk ekranında bir kez; alt bölümler `Reveal`.
+  Yüzey açılıyorsa önce imza sonra içerik (`AcilisSahnesi`).
+- **Sade karşılığı yaz.** `useReducedMotion` (değişken adı `azalt`) ya da `motion-reduce:`;
+  hareketi azalt'ta yalnız opaklık.
+- **Telefonda gizleme.** Hover'a bağlı her cevabın dokunmatik karşılığı olsun.
+- **Dış kaynaktan (Arc, React Bits, Skiper, Motion Primitives) alıyorsan** §11.3'ün yedi adımı:
+  kod bizim dosyamızda + kaynak/lisans yorumu · yeni bağımlılık yok (`motion` ile yeniden yaz) ·
+  renk token'a · hareket `hareket.ts`'e · biçim bize (hap, `font-heading`, ≥44 px, gölge yok) ·
+  sade karşılık + klavye/aria · lisans notu.
+
 ## 3. Bitirmeden önce

 ```bash
 pnpm tasarim:denetim        # sıfır hata olmadan iş bitmiş sayılmaz
 ```

-Uyarıları raporda listele; hataları düzelt. Sonra 375 px kontrol notu yaz: taşma, üst üste binme,
-dokunma hedefi < 44 px, uzun üniversite adı. (Tarayıcı açma kuralı AGENTS.md'de; koddan çıkarım yazıyorsan "koddan çıkarım" de.)
+Uyarıları raporda listele; hataları düzelt. **Yeni bir parça tasarladıysan ya da bir bölümü
+yeniden düzenlediysen ekrana bak** (AGENTS.md "Tarayıcı açma": 375 px + masaüstü ekran görüntüsü;
+önce Bilal'in açık sunucusunu ara). Küçük düzeltmede (metin, renk, tek sınıf) 375 px notu yeter:
+taşma, üst üste binme, dokunma hedefi < 44 px, uzun üniversite adı — koddan çıkarım yazıyorsan
+"koddan çıkarım" de. Sonra DESIGN.md §11.5 deneyim kontrol listesinden geç.

 ## 4. Örnekler

@@ -56,12 +84,18 @@ dokunma hedefi < 44 px, uzun üniversite adı. (Tarayıcı açma kuralı AGENTS.
 **İstek:** "Paket sayfasına satın alma butonu koy."
 **Çıktı:**
 ```tsx
-<Button size="lg" className="h-12 w-full cursor-pointer bg-orange-500 px-8 text-white transition-colors duration-200 hover:bg-orange-600">
+<Button size="lg" variant="cta" className="w-full">
  Paketi al
  <ArrowRight className="size-4" aria-hidden />
 </Button>
 ```
-(Yanlış: başta `<Sparkles />`, `bg-gradient-to-r`, `rounded-xl`, "Hemen Al ✨".)
+(Yanlış: elle `bg-orange-500 hover:bg-orange-600`, başta `<Sparkles />`, `bg-gradient-to-r`, `rounded-xl`, "Hemen Al ✨".)
+
+**İstek:** "React Bits'teki şu sayaç bileşenini fiyat bölümüne koy."
+**Çıktı:** Registry'den kurma. Önce sitede karşılığı var mı bak (`SayiRulo`); varsa onu kullan.
+Yoksa kaynağı oku (`curl -s https://reactbits.dev/r/<Ad>-TS-TW.json`), `src/components/ui/<türkçe-ad>.tsx`
+olarak yeniden yaz: başta `// Esin: React Bits "<Ad>" (MIT + Commons Clause); kod KolayTercih diline çevrildi.`,
+GSAP/renk/easing atılır, `YAY.*` + token + `useReducedMotion` dalı girer.

 **İstek:** "Üniversite sayfasına URAP kartı ekle."
 **Çıktı:**
@@ -79,12 +113,13 @@ dokunma hedefi < 44 px, uzun üniversite adı. (Tarayıcı açma kuralı AGENTS.
 ## 5. Kısa yasak listesi

 `Badge` import'u · elle pill span · CTA'da `Sparkles`/emoji · `indigo/purple/gray/zinc` · gradyan metin ·
-parlama gölgesi · `whileHover scale` · her elemanda fade-up · `dark:` · yüzeyde `bg-white` (yerine `bg-card`, §2.3) · Inter/Roboto/serif · `text-[#hex]` · renk tek başına anlam.
+parlama gölgesi · `whileHover scale` · her elemanda fade-up · `dark:` · yüzeyde `bg-white` (yerine `bg-card`, §2.3) · Inter/Roboto/serif · `text-[#hex]` · renk tek başına anlam ·
+`gsap`/`framer-motion` importu · kullanım yerinde `stiffness:`/`cubic-bezier(` · `Button` üstünde elle `bg-orange-500` · satır içi adım çubuğu · sessiz eylem · telefonda gizlenen deneyim.

 ## 6. Rapor

-İş sonunda: kullanılan kanonik parçalar (liste) · `pnpm tasarim:denetim` çıktısı (hata/uyarı sayısı) · 375 px notu · DESIGN.md ile çelişen bir şey bulduysan dosya:satır ile yaz, kendi başına kuralı değiştirme.
+İş sonunda: kullanılan kanonik parçalar (liste) · en yakın §11.1 vakası ve taşıdığın neden · `pnpm tasarim:denetim` çıktısı (hata/uyarı sayısı) · baktıysan hangi genişlikte ne gördüğün, bakmadıysan 375 px notu · §11.5 listesinde işaretleyemediğin madde · DESIGN.md ile çelişen bir şey bulduysan dosya:satır ile yaz, kendi başına kuralı değiştirme.

 ## 7. Skill'i ölçme

-Skill'in işe yarayıp yaramadığı `evals.md` içindeki üç istekle ölçülür (skill kapalı/açık karşılaştırması). Skill metnini ya da DESIGN.md'yi değiştirdikten sonra tekrar koşulur.
+Skill'in işe yarayıp yaramadığı `evals.md` içindeki dört istekle ölçülür (skill kapalı/açık karşılaştırması). Skill metnini ya da DESIGN.md'yi değiştirdikten sonra tekrar koşulur.
--- a/.agents/skills/kolaytercih-tasarim/evals.md
+++ b/.agents/skills/kolaytercih-tasarim/evals.md
@@ -1,7 +1,7 @@
 # kolaytercih-tasarim — değerlendirme seti

 Anthropic'in skill kılavuzu: önce eval, sonra skill. Bu üç istek, skill'in gerçekten
-işe yaradığını ölçer. Her biri **iki kez** koşulur: (A) skill kapalı, (B) skill açık.
+işe yaradığını ölçer (E4, 9 Eki 2026'da eklendi). Her biri **iki kez** koşulur: (A) skill kapalı, (B) skill açık.
 Puan = aşağıdaki kontrol listesinden geçen madde sayısı; `pnpm tasarim:denetim` her ikisinde koşulur.

 Nasıl koşulur: yeni bir oturumda isteği aynen yapıştır; çıktı `src/` altına değil
@@ -25,10 +25,10 @@ Kontrol:

 Kontrol:
 - [ ] `Button` bileşeni, `rounded-full` (özel radius yok)
- [ ] `bg-orange-500 … hover:bg-orange-600 text-white`
+- [ ] `variant="cta"` + `size="lg"`; elle `bg-orange-500 … hover:bg-orange-600` yok
 - [ ] Metin önce, sonda `<ArrowRight className="size-4" aria-hidden />`
 - [ ] Başta ikon yok, `Sparkles` yok, emoji yok, gradyan yok
- [ ] Yükseklik `h-11` ya da `h-12` (44 px dokunma hedefi)
+- [ ] Yükseklik sınıfı elle yazılmamış (`lg` = 48 px dokunma hedefi)
 - [ ] Denetim: 0 hata

 ## E3 — Bilgi kartı
@@ -36,18 +36,31 @@ Kontrol:
 **İstek:** "Bölüm sayfasına 'Mezun maaşı' kartı ekle; başlık, büyük sayı ve kaynak notu olsun."

 Kontrol:
- [ ] Kutu `rounded-2xl border border-slate-200 bg-white` (ya da `Card` + `border-slate-200/70 shadow-sm`)
+- [ ] Kutu `rounded-2xl border border-slate-200 bg-card` (ya da `Card` + `border-slate-200/70 shadow-sm`); `bg-white` yok
 - [ ] Sağ üstte `PixelCorner` (`absolute right-4 top-4`)
 - [ ] Sayı `font-heading … font-bold text-slate-900`; etiket `text-xs font-semibold text-slate-500`
 - [ ] Nötr yalnızca slate; gölge yalnızca `shadow-sm`
 - [ ] Kaynak notu için uydurma rakam/atıf yok ("kaynak: —" ya da prop)
 - [ ] Denetim: 0 hata

+## E4 — Dış bileşeni bizim dile çevir
+
+**İstek:** "React Bits'teki Stepper'ı (https://reactbits.dev/r/Stepper-TS-TW.json) paket satın alma akışına koy."
+
+Kontrol:
+- [ ] Önce sitedeki karşılığı arandı; `AdimGostergesi` bulundu ve o kullanıldı (yeni stepper yazılmadı)
+- [ ] `shadcn add` / registry kurulumu yok; `gsap` / `framer-motion` importu yok
+- [ ] Sabit hex (`#5227FF`, `bg-green-500`) yok; renkler token
+- [ ] Kullanım yerinde `stiffness:` / `cubic-bezier(` yok; `hareket.ts` adları
+- [ ] `useReducedMotion` dalı ve `aria-current="step"` var
+- [ ] Yeni dosya yazıldıysa başında kaynak + lisans yorumu
+- [ ] Denetim: 0 hata
+
 ## Sonuç tablosu

-| Tarih | E1 A/B | E2 A/B | E3 A/B | Not |
-|---|---|---|---|---|
-| | | | | |
+| Tarih | E1 A/B | E2 A/B | E3 A/B | E4 A/B | Not |
+|---|---|---|---|---|---|
+| | | | | | |

 B sütunu A'dan belirgin yüksek değilse skill'in metni ya da DESIGN.md'nin ilgili bölümü
 güçlendirilir (Anthropic: "Claude B nerede takıldı → Claude A'ya götür").