Denemeniz Gereken 4 Claude Code Eklentisi

Claude Code'u akıllı bir asistandan otonom bir geliştirme motoruna dönüştürün.

Ön Gereksinimler

• Node.js 18+ kurulu
• Claude Code CLI kurulu
• Claude API erişimi (Pro abonelik veya API anahtarı)
• Terminal / komut satırı

01 — Frontend Design Skill

Jenerik AI arayüzlerine son

Varsayılan Claude Code deneyimi işlevsel ama sıradan görünen arayüzler üretiyor. Bu skill bunu düzeltiyor. Gerçek tasarım anlayışıyla üretim kalitesinde bileşenler oluşturuyor — doğru boşluklar, tipografi hiyerarşisi, renk sistemleri ve duyarlı davranış. React, Vue, Svelte ve vanilla HTML/CSS ile çalışıyor.

Kurulum

claude plugins add frontend-design@claude-code-plugins

Temel Komutlar

• /frontend-design — Üretim kalitesinde bileşen oluştur
• /ui — Tek bileşenler için hızlı versiyon
• /layout — Tam sayfa yapısı oluşturma

02 — Figma MCP

Tasarımdan koda, anında

Tasarım ile uygulama arasındaki boşluğu kapatıyor. Claude, Figma dosyalarınızı doğrudan okuyor — tasarım token'larını, renkleri, tipografiyi, boşlukları ve layout verilerini çıkarıyor, ardından gerçek tasarımla örtüşen kod üretiyor. Kalite doğrudan Figma dosya yapınıza bağlı: anlamlı katman isimleri ve Auto Layout en iyi sonuçları veriyor.

Kurulum

claude mcp add figma -- npx -y @anthropic-ai/mcp-figma

Not: OAuth akışı için Figma masaüstü uygulaması gereklidir.

Temel Komutlar

• /figma-inspect — Figma dosyasından özellikleri çıkar
• Tasarımlara doğal dil promptlarıyla referans ver
• Piksel mükemmelliği için Frontend Design ile birleştir

03 — Context7 MCP

Her zaman güncel dokümantasyon

Upstash tarafından geliştirilen Context7, 50'den fazla framework için güncel, sürüme özgü dokümantasyonu doğrudan Claude'un bağlamına çekiyor — React, Next.js, Tailwind CSS, Prisma ve daha fazlası. v15'teyken Claude'un v13'ten deprecated bir API önermesi yüzünden hata ayıklamak zorunda kalmayın.

Kurulum

claude mcp add context7 --scope user -- npx -y @upstash/context7-mcp

API anahtarı gerekmez. Hemen çalışır.

Temel Komutlar

• /docs next.js — Next.js dokümantasyonunu çek
• /api-ref prisma findMany — Belirli API referanslarını getir
• Otomatik dokümantasyon araması için promptlarda use context7 yaz

04 — Supabase MCP

Veritabanı ve kimlik doğrulama, terminalinizde

Claude Code'dan tam backend yönetimi. SQL sorguları çalıştırın, şema migration'larını yönetin, kullanıcı ve kimlik doğrulamayı idare edin, edge function'ları deploy edin — terminalinizde Supabase dashboard'u gibi. Migration iş akışı özellikle parlıyor: ne istediğinizi tarif edin, Claude uygun up/down script'leriyle migration'ı oluşturup çalıştırsın.

Kurulum

claude mcp add supabase -- npx -y @supabase/mcp-server

Supabase API token'ı gereklidir. Ortam değişkeni veya kurulum sırasında ayarlayın.

Temel Komutlar

• /supabase-query — SQL sorguları çalıştır
• /supabase-migrate — Şema değişikliklerini yönet
• /supabase-auth — Kullanıcıları yönet
• /supabase-functions — Edge function'ları deploy et

Birlikte Nasıl Çalışırlar

Figma → Frontend Design → Context7 → Supabase
Tasarım özelliklerini çıkar → Şık UI oluştur → Doğru API'leri kullan → Backend'e bağlan → Her şeyi test et

Pro İpuçları

Kullanmadığınız MCP sunucularını devre dışı bırakın: Bağlı her sunucu token bağlamınıza eklenir. Playwright özellikle ağır. Yalnızca aktif olarak kullandıklarınızı etkinleştirin.

2-3 eklentiyle başlayın: Her şeyi birden kurmayın. Context7 ile başlayın (her zaman işe yarar), ardından UI çalışmaları için Frontend Design veya backend görevleri için Supabase ekleyin.

Ağır sunucular için proje kapsamı kullanın: Playwright ve Supabase'i --scope project ile kurun; böylece yalnızca ilgili projelerde yüklenir, global olarak değil.

claude mcp list ile doğrulayın: Kurulumun ardından aktif sunucuları ve kapsamlarını görmek için bu komutu çalıştırın. Her şeyin doğru yüklendiğinden emin olun.

Hızlı Kurulum Referansı