Kategoriler

settings.json, Claude Code'a "şunu yapabilirsin, şunu yapamazsın, şu modeli kullan" gibi kuralları söyler. Birden fazla yerde tanımlanabilir ve bazıları diğerlerini geçersiz kılar.

Hangi ayar kazanır?

"Kurumsal politika" ve "--flag" tam olarak ne?

İkisi de dosya tabanlı ayarlardan (settings.json) daha yüksek önceliklidir çünkü biri organizasyon zorunluluğu, diğeri o anki bilinçli seçimdir — ikisi de "arkada kalıcı bir dosyada mı yazıyor" sorusuna hayır der, bu yüzden en tepede dururlar.

Kurumsal politikayı kim belirliyor?

Sen değil — bunu şirketin IT/güvenlik ekibi belirler. Kişisel kullanımda (kendi bilgisayarında, kendi hesabınla) bu katman genelde hiç yoktur; devreye girdiği yer, şirketin sana verdiği/yönettiği bir bilgisayardır.

Dosya nerede durur (işletim sistemine göre)

Bu yollar sistem seviyesinde olduğu için normal kullanıcı hesabı buraya yazamaz — sadece bilgisayarın yöneticisi (IT) değiştirebilir. Kişisel/bireysel kurulumlarda bu dosya genelde hiç mevcut değildir; o yüzden ev bilgisayarında bu katmanı hiç görmeyebilirsin.

Örnek settings.json

{
  "permissions": {
    "allow": ["Bash(git *)"],
    "deny": ["Bash(rm -rf *)"],
    "ask": ["Bash(git push*)"]
  },
  "model": "claude-sonnet-5",
  "env": {
    "NODE_ENV": "development"
  },
  "hooks": {
    "PostToolUse": [
      { "matcher": "Edit", "hooks": [{ "type": "command", "command": "npx prettier --write $CLAUDE_FILE" }] }
    ]
  },
  "statusLine": { "type": "command", "command": "git branch --show-current" },
  "cleanupPeriodDays": 30
}

Ne gibi değişiklikler yapılabilir?

• permissions: hangi araç/komutun otomatik izinli (allow), yasak (deny) veya her seferinde sorulacak (ask) olduğu.
• hooks: bir araç çalışmadan önce/sonra otomatik komut tetikleme (ör. dosya kaydedilince otomatik format).
• env: oturum boyunca geçerli ortam değişkenleri.
• model: varsayılan kullanılacak model.
• statusLine: ekranın altında özel bilgi göstermek (ör. git dalı).
• cleanupPeriodDays: eski oturum kayıtlarının kaç günde temizleneceği.

Yeni trendler

Ayar dosyalarının kullanımında öne çıkan yönelimler: hooks ile otomasyonun artması (format/lint/test'i manuel hatırlamak yerine ayara bağlamak), izin listelerini daraltma (varsayılan izin isteme sıklığını azaltıp sadece güvenli komutları allowlist'e almak), ve kurumsal (managed) ayarlarla merkezi governance — şirketlerin AI araçlarını IT politikasıyla standartlaştırması. Bunlar genel yönelimler; kesin anahtar isimleri için güncel resmi dokümantasyonu kontrol et.

Ne zaman etkili olur?

Çoğu ayar, dosyayı kaydettiğin an sonraki isteğe yansır. İzinlerle ilgili büyük değişikliklerde veya bazı hook tanımlarında Claude Code'u yeniden başlatmak gerekebilir.

Komutlar, tekrar tekrar yazacağın uzun talimatları tek kelimeye indirger. En çok kullanılan hazır komutlar aşağıda; kendi özel komutlarını da ekleyebilirsin.

Kendi komutunu yazmak

.claude/commands/ klasörüne bir .md dosyası koyarsan, dosya adı yeni bir komut olur. Örneğin deploy-checklist.md dosyası /deploy-checklist komutunu oluşturur.

Zaman çizgisinde geri dönüş

Neyi geri alamaz?

• Gönderilmiş bir e-posta veya mesaj
• git push ile uzak sunucuya gönderilmiş bir commit
• Harici bir API'ye yapılmış çağrı (ör. bir ödeme isteği)

Bunlar "yan etki" (side effect) sayılır — Claude Code'un kendi konuşma/kod geçmişinin dışında, gerçek dünyada bir iz bırakır.

Bağlam penceresi neyle dolar?

Ne zaman kontrol edilmeli?

Uzun süren bir oturumda, özellikle çok dosya okunduysa, /context ile doluluğu kontrol et. Pencere dolmaya yaklaştıysa iki seçeneğin var:

• /compact — geçmişi özetler, aynı işe devam edersin.
• /clear — tamamen sıfırlar, yeni bir işe başlarsın.

Ücretsiz katman sınırları (özet)

Sınırı aştığında istekler hataya düşer veya (ücretli plana geçtiysen) kullanım başına ücretlendirilir — örneğin Workers'ta 1 milyon istek yaklaşık 0,30 dolar.

Güncel trendler

En çok kullanılan komutlar

Kurulum ve yapılandırma

npm install -g wrangler
wrangler login
wrangler dev
wrangler deploy

Proje, kök dizindeki wrangler.jsonc (yeni önerilen format) veya wrangler.toml dosyasıyla yapılandırılır — Worker adı, ortam değişkenleri, bağlı KV/D1/R2 kaynakları burada tanımlanır.

Ne için kullanılır?

Ne için kullanılır?

Redis kurmana, kuyruk altyapısı yönetmene veya cron sunucusu çalıştırmana gerek kalmaz — normal kod yazar gibi TypeScript'te görevini tanımlarsın, trigger.dev zamanlama, yeniden deneme (retry) ve izlenebilirliği (observability) kendisi yönetir.

Güncel trendler

Ne sağlıyor?

Ücretsiz katımı ayda 20.000 araç çağrısı içerir — kişisel projeler için genelde yeterli bir başlangıç noktası.

Güncel trendler

Ne için kullanılır?

Kullanım alanları: pazar araştırması, rekabet analizi, SEO takibi, makine öğrenmesi için veri toplama.

Güncel trendler

İki seçenek karşılaştırması

İkisini birlikte kullanmak yaygın bir çözüm: Cloudflare gelen postayı yönlendirir, Zoho kimliği doğrulanmış gönderim (SMTP) sağlar — ikisi birlikte hem alma hem gönderme için tamamen ücretsiz bir kurulum oluşturur.

Kurulum adımları (özet)

IMAP/POP desteğiyle SMTP: Kendi VPS'inde email server

Zoho Mail Free Plan IMAP/POP desteği sunmadığı için, istemci uygulamalara (Outlook, Thunderbird, Apple Mail) direkt bağlanamazsın. IMAP/POP isteyen kullanıcılar iki yolu var:

Nerede çalışırlar?

aider — öne çıkan özellikler

• Açık kaynak, ücretsiz — kendi API anahtarınla kullanım başına ödersin (abonelik yok).
• 130'dan fazla dil için tree-sitter tabanlı sözdizimi desteği.
• Her değişiklik için otomatik, açıklamalı git commit'i oluşturur.
• Sesli komutla kod isteği verebilme (voice input).

Roo Code — öne çıkan özellikler

• VS Code Marketplace üzerinden kurulan bir eklenti.
• Dosya sistemi erişimi, terminal kontrolü, web tarayabilme gibi çok adımlı yetenekler.
• Architect / Code / Debug / Ask gibi hazır modlar + kendi özel modunu tanımlama.
• Cline projesinden türemiş bir topluluk projesi.

Güncel trendler

Claude'a (özellikle Claude Code gibi ajan araçlarında) verdiğin promptun kalitesi, aldığın sonucun kalitesini doğrudan belirler. İyi bir prompt; net bir hedef, gerekli bağlam ve "bittiğinde nasıl anlaşılır" bilgisini içerir. Kötü bir prompt bunları modele tahmin ettirir — ve model senin aklından geçeni değil, en olası yorumu uygular.

Bir prompt neleri içermeli?

Neleri içermemeli?

Kullanılabilecek teknikler

Claude Code'da (ajan/CLI kullanımında) ek olarak nelere dikkat edilmeli?

Claude Code, düz metin üreten bir sohbet değil; dosya okuyan, komut çalıştıran bir ajan olduğu için promptların bazı ek unsurlara ihtiyacı var:

Commit mesajlarında, kod incelemesinde veya PR açıklamasında, ana konudan bağımsız küçük bir noktayı belirtmek için kullanılır.

.md dosyaları düz metindir ama yapılandırılmış bir biçimde yazılır — hem insan tarafından kolayca okunur, hem de otomatik olarak biçimli bir sayfaya dönüştürülebilir.

Nerede kullanılır?

Kısa örnek

# Başlık
## Alt başlık

**Kalın metin** ve bir liste:
- Madde 1
- Madde 2

`kod satırı`

HTML etiketleri (<h1>, <strong>) yazmak yerine, Markdown'da aynı sonucu çok daha kısa işaretlerle elde edersin.

Yazdığından göründüğüne

Sık kullanılan işaretler

# Başlık          -> büyük başlık
**kalın**         -> kalın metin
*italik*          -> italik metin
- madde           -> madde işaretli liste
[metin](url)      -> link
`kod`             -> satır içi kod

CLI ile GUI karşılaştırması

Örnek komut akışı

Claude Code'da CLI

Claude Code'un terminal panelinde bu komutları doğrudan çalıştırabilirsin. Proje türüne göre Bash (Linux/Mac) veya PowerShell (Windows) kullanılır.

Dosyalar nasıl filtrelenir?

Kısa örnek

node_modules/
.env
*.log
dist/

Standart bölümler

Kısa şablon

# Proje Adı

Tek cümlede ne yaptığı.

## Kurulum
```bash
npm install proje-adi
```

## Kullanım
```js
import { yapBirSey } from "proje-adi";
yapBirSey();
```

## Katkı
PR'lar için önce bir issue açın.

## Lisans
MIT

Güncel trendler

Nasıl çalışır?

Nasıl oluşturulur, nerede tutulur?

Örnek subagent dosyası

Aşağıdaki dosya .claude/agents/code-reviewer.md olarak kaydedilirse, tanımlı yeni bir subagent oluşur:

---
name: code-reviewer
description: Kod değişikliği veya PR incelemesi istendiğinde kullan.
  Kullanıcı "review this", "kodu incele", "diff'i kontrol et" dediğinde
  ya da önemli bir değişiklik yapıldıktan hemen sonra proaktif çağır.
tools: Read, Grep, Glob
---

Sen kıdemli bir kod inceleme uzmanısın. Çağrıldığında:

1. `git diff` ile son değişiklikleri gör
2. Şunlara odaklan: doğruluk, güvenlik, okunabilirlik
3. Bulguları önem sırasına göre, tek satır özetle raporla
4. Dosyaları DEĞİŞTİRME — sadece incele ve raporla

Dosyanın parçaları ne işe yarar?

Sonuç ana konuşmayı nasıl etkiler?

Subagent kendi ayrı, boş bir bağlam penceresinde başlar; sen ona ne gönderirsen sadece onu görür. İçeride onlarca dosya okusa, çok adım atsa bile, bunların HİÇBİRİ ana konuşmaya yansımaz — sadece en sonda yazdığı özet metin, sanki bir fonksiyon çağrısının dönüş değeriymiş gibi ana konuşmaya "sonuç" olarak döner. Ana Claude bu özeti okur ve ona göre bir sonraki adıma karar verir. Bu yüzden ana bağlam şişmez; ama bu da demektir ki özet ne kadar eksik yazılırsa, ana Claude o kadar eksik bilgiyle karar verir — agent'ın raporu ne kadar net ve eksiksizse sonuç o kadar güvenilir olur.

Nasıl yönetilir / test edilir?

• /agents ile mevcut tüm agent'ları listele, birini seçip düzenle veya sil.
• Yeni bir agent'ı küçük, zararsız bir görevle test et — açıklaması doğru tetikleniyor mu, doğru araçlara erişiyor mu kontrol et.
• Proje-özel agent'lar git ile versiyonlanır — ekip aynı agent'ları paylaşabilir.
• description'ı zamanla gözden geçir: yanlış anda tetikleniyorsa veya hiç tetiklenmiyorsa, muhtemel sebep description'ın belirsizliğidir.

Ne zaman kullanılmalı?

• Geniş bir kod taramasında (çok dosya, belirsiz konum)
• Birbirinden bağımsız birkaç araştırmayı paralel yürütürken
• Ana konuşmanın bağlamını doldurmaması gereken uzun, ayrıntılı bir iş varken

Riskler

Kötü sonuç ihtimali var: subagent, ana konuşmanın tüm inceliğini görmez — sadece verdiğin talimatı görür. Yanlış varsayımla ilerleyebilir, bu yüzden sonucunu körü körüne kabul etme. Ayrıca her agent'a dar ve net bir görev ("tek iş") vermek, hem doğru zamanda tetiklenmesini hem de güvenilir sonuç vermesini sağlar.

Temel fark

Ajanlar skilleri kullanabilir mi?

Evet. Bir subagent kendi görevini yürütürken, uygun bir skill'in talimatlarını da takip edebilir. Yani ikisi birbirini dışlamaz — bir "çalışan" (ajan), elindeki "el kitabına" (skill) bakarak çalışabilir.

Nerede tutulur?

Kısa örnek yapı

.claude/skills/
  deploy-checklist/
    SKILL.md   # name, description + adımlar

Değiştirilebilir mi, yenisi eklenebilir mi?

• Değiştirme: Evet — SKILL.md içeriğini düzenlemek yeter.
• Yeni ekleme: Evet — yeni bir klasör + SKILL.md oluştur, name ve description yaz.
• Eskiyi düzenleme: Evet — özellikle description'ı netleştirmek önemli, çünkü Claude hangi skill'i ne zaman tetikleyeceğine bu açıklamaya bakarak karar verir.

Nasıl çalışır?

Daha çok soru ile başlaması için

Görevi bilerek biraz açık uçlu bırak veya doğrudan iste: "önce bana sorular sor, varsayımla ilerleme." Net, tek yorumlu bir talimat verirsen Claude soru sormadan direkt plana geçebilir — belirsizlik bıraktığın kadar soru gelir.

Nasıl yönetilir?

• Plan modundayken sadece okuma araçları çalışır, dosya değişmez.
• Plan bittiğinde onay istenir; onaylarsan uygulama başlar, reddedersen plan güncellenir.
• Net hedef + kısıt ver ("neden" kısmını da açıkla) — plan kalitesi buna bağlı.

Ne tür içerik olabilir?

Yaşam döngüsü

Gizlilik ve paylaşım

Artifact'ler varsayılan olarak private'tır — sadece sen görürsün. Başkasıyla paylaşmak istersen sayfanın kendi paylaşım menüsünden bilinçli olarak paylaşman gerekir; otomatik herkese açık olmaz.

Ne zaman artifact kullanmalısın? (kullanım senaryoları)

Kendi işlerine nasıl uyarlarsın?

Artifact'i "Claude'un kod yazdığı bir chat mesajı" gibi değil, ayrı bir mini-proje gibi düşün. Genel akış:

Plan moduyla nasıl daha etkili hale getirilir?

Basit/tek parçalı bir artifact için (kısa bir SVG diyagram, tek soru-cevap sayfası) plan moduna gerek yok — direkt iste. Ama çok bölümlü, etkileşimli veya veri tutan bir artifact (bu rehber gibi 20+ bölümlü bir sayfa, veya form+veritabanı olan bir araç) için plan modu riski azaltır:

Bu rehberin kendisi de tam bu şekilde büyüdü: önce plan modunda hangi sorular/bölümler ekleneceği netleşti, sonra içerik yazılıp tek tek yayınlandı — bkz. ➜ Plan Modu.

Başlangıç için örnek iş ve promptlar

Nasıl çalışır?

Kısa örnek

/loop 10m /check-ci
# 10 dakikada bir CI durumunu kontrol et, sonuç değişince haber ver

Doğru prompt nasıl verilir?

• Net bir durma koşulu belirt: "X olursa dur", yoksa sonsuz döner.
• Interval'i işin doğasına göre seç — saniyelerle ölçülen kontrolü dakikalarla, günlük bir kontrolü saatlerle yapma.
• Interval belirtmezsen Claude kendi hızını (dynamic) ayarlar — çoğu durumda bu yeterlidir.

Nasıl çalışır?

İki yönlü çalışır: yazar tarafı Claude'un cevaplarını kısaltır (kod ve hata mesajlarına dokunmadan); okur tarafı (proxy modu) Claude'un okuduğu log/test/JSON çıktısını da sıkıştırır. Güvenlik uyarıları veya geri alınamaz işlemler gibi kritik anlarda otomatik olarak normal dile döner — kısaltma anlamı bozacaksa devre dışı kalır.

Kurulum

# Küçük versiyon (sadece skill)
npx skills add JuliusBrussee/caveman -g

# Tam versiyon (proxy dahil)
npm install -g @caveman-ai/cli
caveman setup --install

Claude Code, Codex, Gemini CLI, Cursor, Windsurf dahil 30'dan fazla ajanda çalışıyor.

Yoğunluk seviyeleri

Ölçülen sonuçlar

Güncel trendler / son eklenenler

Pixel Mode: Skill talimatlarını PNG resmine çevirip ek tasarruf sağlıyor. caveman learn: Geçmiş kullanım verisini analiz edip en çok token tüketen kalıpları buluyor. Trial modu: caveman'lı ve caveman'sız gerçek oturumları karşılaştırıyor. Ayrıca Wenyan modları (klasik Çince tabanlı, en agresif sıkıştırma seviyeleri) eklendi.

Nasıl çalışır?

Desteklenen komut kategorileri

Kurulum

# macOS/Linux (Homebrew)
brew install rtk

# Windows (winget)
winget install rtk-ai.rtk

# Claude Code'a hook olarak bağlama
rtk init -g

Güncel trendler / son eklenenler

Native Windows desteği (v0.37.2+) — artık Unix shell (WSL) gerektirmiyor. SQLite tabanlı kurtarma modu — bir komut başarısız olursa tam çıktı ayrıca kaydediliyor. Opt-in telemetri — anonim kullanım verisi topluyor ama varsayılan kapalı, GDPR uyumlu, kaynak kodu/gizli bilgi toplamıyor.

Nasıl çalışır? — 7 kademeli kontrol

Kurulum ve komutlar

# Claude Code içinde
/plugin marketplace add DietrichGebert/ponytail

Ölçülen sonuçlar

Not: Kod zaten minimal ise fark küçük olur; asıl fark aşırı mühendislik olan durumlarda (ör. gereksiz bir tarih seçici bileşeni) ortaya çıkıyor.

Güncel trendler / son eklenenler

20 ajan desteği: Claude Code'un yanı sıra Codex, Gemini, GitHub Copilot CLI, Cursor, Windsurf ve daha fazlası. Subagent injection: Oluşturulan alt ajanlar (subagent) da bu kuralları otomatik miras alıyor — tek tek ayarlamana gerek kalmıyor.

Nasıl çalışır?

Kurulum

# macOS (Homebrew)
brew install --cask headroom

# Diğer platformlar: GitHub Releases sayfasından indir
# Desteklenen: macOS 14+, Windows 10+, Linux (x86_64)

Paket içeriği

Sıkıştırma oranları

Güncel trendler / son eklenenler

Menü çubuğunda tasarruf analitik panosu (günlük/aylık grafik), otomatik güncelleme sistemi ve macOS Keychain / Windows Credential Manager entegrasyonu gibi "kurumsal masaüstü uygulaması" standartlarına yaklaşan özellikler ekleniyor. Bağımsız Python runtime yönetimi sayesinde sistem Python'unu etkilemiyor.

İçeriğinde neler olmalı, neler olmamalı?

Her satır için kendine şunu sor: "Bu satırı silsem Claude hata yapar mıydı?" Cevap hayırsa, o satırı sil.

Nasıl oluşturulur?

# Code style
- ES modules (import/export) kullan, CommonJS (require) değil
- Mümkünse import'ları destructure et (ör. import { foo } from 'bar')

# Workflow
- Kod değişikliği serisi bitince mutlaka typecheck çalıştır
- Performans için tüm test paketini değil, tekli testleri çalıştır

Uzunluk ve yapı

Önerilen sınır 200 satırın altı — bazı ekipler 60 satıra kadar iner. Dosya şişince Claude bazı kuralları "gürültüde kaybeder" ve göz ardı etmeye başlar; bu yüzden nadiren gereken, konuya özel bilgi için CLAUDE.md yerine ➜ skill kullanmak daha doğrudur — skill'ler sadece konu uygun olduğunda yüklenir, her oturumda bağlamı şişirmez.

Kimler için gereklidir?

Avantaj / dezavantaj

Neden kullanılır?

Nasıl kurulur? (VS Code örneği)

Proje köküne .devcontainer/devcontainer.json dosyası eklenir:

{
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
  "features": {
    "ghcr.io/anthropics/devcontainer-features/claude-code:1.0": {}
  }
}

Sonra VS Code'da Dev Containers: Rebuild Container komutu çalıştırılır, container içinde açılan terminalde claude yazılıp giriş yapılır. Claude Code'un kendi resmi "Dev Container Feature"ı, VS Code eklentisini de otomatik ekler.

Dev container / sandbox / VM karşılaştırması

Mevcut arayüzler

IDE eklentisi ne katar?

Dört bileşen

Parçalar birlikte nasıl çalışır?

Hangi işe hangi parça bakar?

Nasıl çalışır?

n8n'i benzerlerinden ayıran ne?

Kimler için uygun?

Tekrarlayan, birden fazla uygulama arasında geçen işleri olan herkes için: freelancer'lar müşteri süreçlerini otomatikleştirebilir, küçük işletmeler form→CRM→e-posta gibi zincirleri elle yapmak yerine otomatikleştirebilir, geliştiriciler ise self-hosted olduğu için veri gizliliği gereken senaryolarda tercih edebilir.

Ücretli mi?

Kişisel kullanım için ücretsiz plan çoğu zaman fazlasıyla yeterlidir — içerik miktarı sınırı yoktur, sadece bazı gelişmiş dosya/işbirliği özellikleri ücretli planlarda kilitlidir.

Temel özellikler

Nasıl kullanılır? (başlangıç adımları)

Kullanım senaryoları

Nasıl çalışır?

Kimler için uygun?

Kendi verisinin bir bulut şirketinden geçmesini istemeyen, teknik olarak kendi sunucusunu/bilgisayarını yönetebilen kişisel kullanıcılar için uygundur. Kurulumu ve bakımı kendine aittir — hazır bir SaaS ürünü değil, kendi barındırdığın (self-hosted) bir sistemdir.

Öne çıkan özellikler

OpenClaw ile farkı ne?

İkisi de aynı kategoriye girer — "her zaman açık, kendi barındırdığın kişisel AI ajanı" — ama Hermes hafıza/öz-gelişim tarafına, OpenClaw ise hazır beceri/kanal genişliğine daha çok vurgu yapıyor.

Neden özel bir ajan gerekir?

Genel bir promptla ("bana sunum hazırla") her seferinde farklı uzunlukta, farklı tonda, tutarsız formatta bir çıktı alırsın. Özel bir ajan, bu kararları bir kere verip tekrar tekrar aynı kaliteyi almanı sağlar — bkz. ➜ Doğru Prompt Yazımı.

Nasıl tanımlanır?

.claude/agents/sunum-ajani.md dosyası olarak, YAML başlıkla birlikte:

---
name: sunum-ajani
description: Slayt tabanlı sunum/prezentasyon hazırlar
tools: Read, Write, Artifact
model: sonnet
---
Sen bir sunum tasarımcısısın. Kurallar:
- Her slaytta en fazla 1 başlık + 4 madde
- Madde başına en fazla 12 kelime
- Her 3 slaytta bir görsel/diyagram önerisi ekle
- Ton: [kullanıcının belirttiği ton, ör. "resmi ama sıcak"]
- Sunumu HTML/reveal.js tabanlı bir artifact olarak yayınla
- Bitirmeden önce slayt sayısını ve tahmini süreyi özetle

İçermesi gereken kurallar

Artifact ile birlikte kullanım

Sunum ajanı, çıktısını bir ➜ Claude Code Artifact'i olarak yayınlarsa, sunum kendi linkiyle paylaşılabilir hale gelir — dosya indirip başka bir programda açmaya gerek kalmaz, tarayıcıda tam ekran gösterilebilir.

Neden özel bir ajan gerekir?

Genel bir promptla her sayfa farklı bir "AI tasarımı" gibi görünebilir — tutarsız renk paleti, farklı font çiftleri, birbirini tutmayan bileşen stilleri. Özel bir ajan, marka/tasarım kurallarını bir kere sabitler.

Nasıl tanımlanır?

.claude/agents/arayuz-ajani.md dosyası olarak:

---
name: arayuz-ajani
description: Web arayüzü/UI bileşenleri tasarlar ve kodlar
tools: Read, Write, Edit, Artifact
model: sonnet
---
Sen bir frontend/UI tasarımcısısın. Kurallar:
- Renk paleti: [marka renklerini buraya yaz]
- Tipografi: başlık için [font], gövde metni için [font]
- Açık VE koyu tema her zaman tanımlanır
- Mobil genişlikte (~400px) yatay taşma olmaz
- Tekrarlanan bileşenler (kart, buton) aynı kenar/gölge/köşe kuralını paylaşır
- Yeni bir sayfa/component'ten önce mevcut tasarım sistemini oku, tekrar icat etme

İçermesi gereken kurallar

Artifact ile birlikte kullanım

Arayüz ajanı çıktısını doğrudan bir ➜ Claude Code Artifact'i olarak yayınlarsa, sonucu hemen tarayıcıda görüp linkle paylaşabilirsin — kod indirip yerelde çalıştırmaya gerek kalmadan hızlı geri bildirim alırsın.

Üç temel bileşen

Nasıl uygulanır? (minimum örnek)

1. manifest.json oluştur ve sayfaya bağla:

{
  "name": "Yapılacaklar Listem",
  "short_name": "Todo",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#5A9E1A",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

<link rel="manifest" href="/manifest.json">

2. Bir Service Worker kaydet (basitleştirilmiş örnek):

// sw.js
self.addEventListener('install', (e) => {
  e.waitUntil(caches.open('v1').then((cache) => cache.addAll(['/', '/index.html'])));
});
self.addEventListener('fetch', (e) => {
  e.respondWith(caches.match(e.request).then((res) => res || fetch(e.request)));
});

// index.html içinde
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

3. Gerekli ikon boyutlarını (genelde 192×192 ve 512×512) hazırla, HTTPS üzerinden yayınla — bu kadarı, tarayıcının "ana ekrana ekle" seçeneğini göstermesi için genelde yeterlidir.

Örnek kullanım senaryoları

PWA'nı App Store / Play Store'ye eklemek

PWA varsayılan olarak tarayıcıdan "ana ekrana ekle" ile kurulur, ama resmi App Store'lara girmek isterseniz:

Güncel trendler ve sınırlamalar

Tarayıcı desteği eşit değildir: Chrome/Edge (Android dahil) PWA'yı tam destekler, Safari/iOS ise tarihsel olarak daha kısıtlıdır (bazı bildirim/depolama özellikleri sınırlı veya geç gelir) — iOS'ta test etmeden "her yerde aynı çalışır" varsayma. Play Store'a koymanın avantajı: daha geniş dağıtım ve kullanıcı bulma, ama dezavantajı: PWA'nın tek kod tabanı avantajı kısmen kaybolur (her store için ayrı build/review).

Bu sayfada ara

Arama yaparak kategorileri filtrele:

Üst menü (top nav) — İngilizce / Türkçe

Sol menü (Components sayfasındaki kategori listesi)

Bileşenler sayfasında (21st.dev/components) sol tarafta, sayfanın soldaki "☰" simgesiyle açılan uzun bir kategori listesi var. İki ana grupta toplanır: Marketing Blocks (pazarlama/tanıtım sayfası parçaları) ve UI Components (uygulama içi arayüz parçaları).

Marketing Blocks (Pazarlama Blokları)

UI Components (Arayüz Bileşenleri)

Sol menünün en üstündeki diğer linkler

Bir bileşen nasıl kullanılır?

Ücretli mi?

Kişisel/tek kullanıcı kullanımında tarama ve tekil bileşen inceleme büyük ölçüde ücretsizdir; sık ve sınırsız kopyalama/kurulum istiyorsan Builder planı gerekir.

Skills / Connectors / Plugins arasındaki fark nedir?

Ekrandaki bölümler ne anlama geliyor?

Bir eklenti kartının üzerinde neler var?

Discover'da bir Skill/Connector/Plugin kartına tıkladığında açılan detay sayfası her zaman aynı düzeni izler:

Sol tam Ayarlar (Settings) menüsü — tüm başlıklar

Sol üstteki arama kutusunun altında üç grup halinde sıralanır: Settings, Desktop app, Customize. Her satır ayrı bir sayfa açar:

Sohbet ekranının üst araç çubuğu (sol üstteki ikonlar)

Sağ üstteki ikonlar ve ⋮ (üç nokta) menüsü

Sol kenar çubuğu (sidebar) altındaki "More" menüsü

Mesaj kutusunun altındaki bar

Masaüstü uygulamasının kendi pencere menü çubuğu

Windows'ta pencerenin en üstünde (bazen Alt tuşuna basınca) görünen klasik menü çubuğu; bunlar Claude'un kendi ayarları değil, işletim sistemi seviyesinde pencere kontrolleridir:

Masaüstü uygulamasına birşey eklemek/çıkarmak istiyorsan

İsim parça parça ne anlatıyor?

Pratikte ne anlama geliyor?

Nasıl çalıştırılır?

ollama pull qwen2.5-coder:32b-instruct-q4_K_M
ollama run qwen2.5-coder:32b-instruct-q4_K_M "Bu fonksiyonu refactor et: ..."

Sunucuyu başlatma / durdurma

Continue (VS Code eklentisi) ile bağlama

Continue'nin config.yaml (veya eski config.json) dosyasında, her Ollama sunucusunu ayrı bir model girdisi olarak tanımlarsın:

models:
  - name: Qwen Coder (8080)
    provider: ollama
    model: qwen2.5-coder:32b-instruct-q4_K_M
    apiBase: http://127.0.0.1:8080

  - name: Autocomplete (8081)
    provider: ollama
    model: qwen2.5-coder:7b-base-q4_K_M
    apiBase: http://127.0.0.1:8081
    roles:
      - autocomplete

Böylece Continue, sohbet/chat isteklerini 8080'deki modele, satır-içi otomatik tamamlama isteklerini 8081'deki (genelde daha küçük/hızlı) modele yönlendirebilir.