ViraStack
  • Akademi
  • Hakkında
  • Destek
Genel BakışKaynaklarKatkı
ViraStack

Frontend geliştiricileri için DX odaklı araç seti: starter’lar, ajan kuralları, form hook’ları ve rehber.

Ürünler

  • ViraStack Start
  • ViraStack AI
  • ViraStack Mask
  • ViraStack Password
  • ViraStack Guide

Keşfet

  • Akademi
  • Hakkında
  • Marka
  • Destek

© 2026 ViraStack.

Açık kaynak · MIT

Yapay Zeka ile Frontend

03 / 13

Agentic Kodlama

Claude Code ve Cursor gibi araçlarla planla, kodla, test et döngüsü ve subagent'lar.

Ajanla çalışmak, sohbetteki "soruyu sor, cevabı kopyala" düzenine benzemez. Ajana bir iş verirsiniz: dosyaları açar, kodu değiştirir, komutları çalıştırır. Sizin işiniz görevi doğru kurmak ve çıkan sonucu kontrol etmektir.

Ajan döngüsü

Claude Code dokümanı ajanın çalışmasını üç aşamada anlatıyor: bağlam toplar, aksiyon alır, sonucu doğrular. Hedef bitene kadar döngüyü tekrarlar ve her adımda bir öncekinden öğrendiğine göre ne yapacağını seçer.1 Siz de döngünün içindesiniz, istediğiniz an durdurup yönlendirebilirsiniz.1

"Sepet toplamı yanlış çıkıyor, düzelt" dediğinizde ajan şöyle ilerler: testleri çalıştırır, hata çıktısını okur, ilgili dosyaları arar, CartSummary.tsx'i düzenler, testleri yeniden çalıştırır.1 Yani sonucun kalitesi, ajanın kullanabileceği bir kontrole (test, lint, tip kontrolü) bağlıdır. Prompt ve Context Engineering rehberinde buna "bitiş ölçütü" demiştik.

Planla, uygula, test et, commit et

Claude Code'un önerdiği akış dört adım: keşfet, planla, uygula, commit.2 Cursor ekibi de aynı yerden başlıyor: yapabileceğiniz en etkili değişiklik, kodlamadan önce planlamak.3

1. Planla

Her iş için plan gerekmez. Claude Code dokümanı pratik bir ölçüt veriyor: değişikliği tek cümleyle anlatabiliyorsanız planı atlayın.2

Shift+Tab ile Plan moduna geçin (iki araçta da aynı kısayol). Ajan dosyalara dokunmadan projeyi okur, gerekirse size soru sorar ve bir plan çıkarır.23 Planı düzenleyebilirsiniz.

Plan gerekirPlan gerekmez
Ürün listesine filtre ve sıralama eklemekButondaki metni değiştirmek
Sepet state'ini başka bir kütüphaneye taşımakBir log satırı eklemek
Tanımadığınız bir kod tabanında özellik eklemekDaha önce defalarca yaptığınız bir iş

2. Uygula

Planı onaylayıp ajana planı izleyerek kodlatın. Sonuç beklediğiniz gibi çıkmadıysa takip mesajlarıyla düzeltmeye çalışmayın: değişiklikleri geri alın, planı daha net yazın ve yeniden çalıştırın. Cursor bunun çoğu zaman daha hızlı ve daha temiz sonuç verdiğini söylüyor.3

3. Test et

Ajan "bitti" dediğinde kanıt isteyin: test çıktısı, çalıştırdığı komut, ekran görüntüsü. Kanıtı okumak, doğrulamayı baştan yapmaktan hızlıdır.2 Testleri önce yazdırmak da iyi çalışıyor (Cursor'ın TDD akışı):3

  1. Ajana beklenen girdi-çıktı çiftlerine göre test yazdırın. Henüz olmayan kod için sahte uygulama yazmamasını söyleyin.

  2. Testleri çalıştırıp başarısız olduklarını görün. Bu aşamada uygulama kodu yazmasın.

  3. Testleri commit edin.

  4. Ajandan testlere dokunmadan, hepsi geçene kadar kod yazmasını isteyin.

  5. Uygulamayı commit edin.

Frontend'de bu, Vitest ile Component Testi rehberinde yazdığınız component testlerini ajana hedef olarak vermek demektir.

4. Commit et

Küçük ve sık commit atın. Her commit, ajanın bir sonraki hatasında geri dönebileceğiniz bir kayıt noktasıdır. Addy Osmani'nin kuralı net: açıklayamadığınız kodu commit etmeyin.4

Claude Code'un checkpoint'leri git'in yerini tutmaz. Yalnızca ajanın dosya düzenleme araçlarıyla yaptığı değişiklikleri kapsar, terminal komutlarıyla yapılanları ve uzak sistemlerdeki işlemleri (deploy, veritabanı) kapsamaz.12

İpucu

Ajan hızlandıkça incelemeniz daha önemli hale gelir.3 Diff'i okuyun, yanlış yöne gidiyorsa durdurun. Ajanı gözetimsiz bırakıp kusursuz sonuç beklemeyin. Addy Osmani da ajanı denetimli kullandığını, her adımı izleyip gerektiğinde müdahale ettiğini yazıyor.4

Subagent'lar

Subagent, kendi context penceresi olan yardımcı bir ajandır. Ağır işi orada yapar, ana konuşmaya yalnızca özet döner.56 Böylece ana konuşmanızın bağlamı şişmez (bkz. Prompt ve Context Engineering).

Örnek: "Projedeki tüm fetch çağrılarına bak, hangilerinde hata yönetimi yok raporla." Ajan onlarca dosya okuyacak. Bunu subagent'a verirseniz o dosyaların içeriği ana konuşmaya girmez, yalnızca "şu dört dosyada eksik" özeti gelir.

Ne zaman subagent, ne zaman ana konuşma?

Subagent kullanınAna konuşmada kalın
Test çıktısı, log, kod arama gibi bir daha bakmayacağınız uzun çıktı üreten işlerSürekli ileri geri gereken işler
Birbirinden bağımsız araştırmalar (auth, API, veri katmanı)Planlama, uygulama ve testin aynı bağlamı paylaştığı işler
Yapılan işi bağımsız biriyle doğrulatmakHızlı, küçük değişiklikler

Hazır olanlar: Claude Code'da salt okunur ve hızlı arama yapan Explore ile plan modunda araştırma yapan Plan kendiliğinden devreye girer. Cursor'da Explore ve tarayıcıyı kontrol edip gürültülü DOM çıktısını özetleyen Browser var.56 Bunları ayarlamanız gerekmez.

Kendi subagent'ınızı yazmak: Aynı işi aynı talimatla tekrar tekrar veriyorsanız subagent'ı bir Markdown dosyasına yazın. Claude Code'da .claude/agents/, Cursor'da .cursor/agents/ klasörüne konur (Cursor .claude/agents/ klasörünü de okur).56 En önemli alan description: ajan ne zaman devredeceğine bunu okuyarak karar verir.56

---
name: a11y-reviewer
description: Değişen bileşenlerde erişilebilirlik sorunlarını inceler. Bir bileşen yazıldıktan veya değiştirildikten sonra kullan.
tools: Read, Grep, Glob
---

Sen erişilebilirlik konusunda titiz bir frontend geliştiricisin.
Değişen bileşenlerde şunlara bak: etiketsiz form alanları, `alt` metni
olmayan görseller, klavyeyle erişilemeyen etkileşimler, yetersiz kontrast.
Dosyalara yazma, bulduklarını dosya ve satır numarasıyla raporla.

Claude Code'da tools ile araçları kısıtlarsınız. Cursor'da karşılığı readonly: true.56

İpucu

Yazan ile kontrol eden ayrı olsun. Claude Code dokümanı yazar/inceleyici düzenini öneriyor: bir oturum kodu yazar, başka bir oturum (ya da subagent) temiz bağlamda inceler. Temiz bağlam, az önce yazılan koda yatkın olmaz.2 Cursor'ın verifier örneği de aynı fikir: ajan "bitti" dediği işi şüpheyle test eder, iddiayı olduğu gibi kabul etmez.6

Uyarı

"Boşluk bul" diye yönlendirilen inceleyici sağlam işte bile bir şeyler bulur, peşine düşmek de gereksiz soyutlama ve savunmacı kod üretir. İnceleyiciye yalnızca doğruluğu veya belirtilen gereksinimleri etkileyen boşlukları raporlamasını söyleyin.2

Paralel çalışma: Birden çok ajan aynı klasörde çalışırsa birbirinin dosyasını ezer. Her ajanı kendi git worktree'sinde çalıştırın. Cursor worktree'leri kendisi yönetir, Claude Code'da ayrı oturumları worktree'lerde açarsınız.236

Maliyet: Her subagent kendi token'ını harcar. Cursor'a göre beş subagent'ı paralel çalıştırmak, kabaca tek ajanın beş katı token demek. Bağlam izolasyonu hız değil düzen sağlar: basit işte ana ajan daha hızlıdır.6 İki-üç odaklı subagent'la başlayın, "yardımcı" diye onlarca genel subagent açmayın.6 Claude Code'da subagent açıklamaları da bağlamdan yer kaplar.5

Cursor'ın Debug Mode'u tahminle düzeltme yapmaz. Önce birkaç hipotez üretir, koda log ekler, sizden hatayı yeniden üretmenizi ister, çalışma anı verisine bakarak kök nedeni bulur ve ona göre düzeltir. Yarış durumları, performans sorunları ve "eskiden çalışıyordu" türü hatalarda işe yarıyor.3

İpucu

Claude Code'u geliştiren Cat Wu ve Boris Cherny'nin plan modunu ve subagent'ları kendi iş akışlarında nasıl kullandığını anlattığı sohbeti izleyebilirsiniz.7

Kendin dene

  1. Birkaç dosyaya dokunan küçük bir özellik seçin (örneğin ürün listesine fiyat sıralaması). Plan modunda isteyin, planı okuyun, bir adımı silip ya da ekleyip uygulatın.

  2. Aynı özellik için önce testleri yazdırın, başarısız olduklarını görün, sonra geçene kadar kod yazdırın. Kaç tur sürdüğünü not edin.

  3. Bir subagent'a "bu değişiklikte erişilebilirlik sorunu var mı, yalnızca raporla" dedirtin. Claude Code'daysanız /context ile ana konuşmanın bağlamının ne kadar değiştiğine bakın.

Kaynaklar

  • 1DokümanClaude Code: How Claude Code works

    Ajan döngüsü, araçlar, izin modları ve checkpoint'ler.

  • 2DokümanClaude Code: Best practices

    Keşfet-planla-uygula-commit akışı, doğrulama ve yazar/inceleyici düzeni.

  • 3MakaleCursor: Best practices for coding with agents

    Plan modu, TDD akışı, paralel ajanlar ve Debug Mode. Lee Robinson, 9 Ocak 2026.

  • 4MakaleAddy Osmani: My LLM coding workflow going into 2026

    Sık commit, açıklayamadığın kodu commit etmeme ve ajanı denetimli kullanma.

  • 5DokümanClaude Code: Subagents

    Subagent nedir, ne zaman kullanılır, nasıl yazılır.

  • 6DokümanCursor: Subagents

    Cursor'da subagent'lar, paralel çalışma ve maliyet.

  • 7VideoEvery: How to Use Claude Code Like the People Who Built It

    Claude Code'un geliştiricilerinin plan modu, subagent ve kod incelemesi kullanımı.

Bu sayfayı düzenle

Son güncelleme tarihi: 14 Ekim 2026

Önceki adım02. Prompt ve Context EngineeringSonraki adım04. Skills