kolaytercih/.agents/skills/kolaytercih-tasarim/SKILL.md

name, description

name

description

kolaytercih-tasarim

KolayTercih'in kendi görsel dili — piksel imzası (SectionEyebrow, PixelDivider, PixelCorner), Cal Sans/Clarity City/Bricolage tipografisi, mavi bilgi + turuncu aksiyon rengi, slate nötrler, sondaki ArrowRight'lı CTA. Yeni ekran, bileşen, kart, modal, buton, form ya da sayfa tasarlarken; mevcut arayüzü değiştirirken; "AI gibi duruyor", "sitenin diline uymuyor", "piksel detayı kaybolmuş" denince kullanılır. docs/tasarim/DESIGN.md'nin giriş kapısıdır.

KolayTercih tasarım dili

Bu proje için genel tasarım kütüphanesi (stil katalogları, palet listeleri) kullanılmaz; yön zaten belli. Kaynak tek: docs/tasarim/DESIGN.md. Bu dosya onu nasıl uygulayacağını söyler.

1. Başlamadan önce (zorunlu)

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:

grep -rn "SectionEyebrow" src --include='*.tsx' -l          # rozetli başlık bloğu örnekleri
grep -rn "bg-orange-500" src --include='*.tsx' -l           # turuncu CTA örnekleri
grep -rn "PixelCorner\|PagePixelDivider" src -l --include='*.tsx'   # piksel imzası taşıyan ekranlar

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; 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

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

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

İstek: "Bölüm sayfasına 'Bu bölümü okuyanlar ne diyor' başlığı ekle." Çıktı:

<div className="flex flex-col items-center gap-4 text-center">
  <SectionEyebrow>Öğrenci görüşleri</SectionEyebrow>
  <h2 className="font-heading text-3xl font-bold sm:text-4xl">Bu bölümü okuyanlar ne diyor?</h2>
  <p className="max-w-xl text-lg leading-relaxed text-slate-600">…</p>
</div>

İstek: "Paket sayfasına satın alma butonu koy." Çıktı:

<Button size="lg" variant="cta" className="w-full">
  Paketi al
  <ArrowRight className="size-4" aria-hidden />
</Button>

(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ı:

<div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-card p-5">
  <PixelCorner className="absolute right-4 top-4" />
  <p className="text-xs font-semibold text-slate-500">URAP Türkiye</p>
  <p className="mt-1 font-heading text-2xl font-bold text-slate-900">18 <span className="text-base font-medium text-slate-400">/ 198</span></p>
</div>

İstek: "Modal ekle, çarpı sağ üstte olsun." Çıktı: DialogContent varsayılanını kullan; hiçbir sınıf verme. Özel yerleşim şartsa showCloseButton={false} + DESIGN.md §4.3'teki sınıf dizisi aynen.

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 · 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) · 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 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.