83.3K+İndir
Kullanım kılavuzuna geç
shadcn-uiyazan Google Labs

shadcn UI Skill.

Claude Code ve Codex için UI tasarım skill'i: shadcn/ui bileşenlerini entegre etme ve özelleştirme: keşfetme, kurulum, en iyi uygulamalar.

  • Web & UI
  • UI kodu
OpenDesign İndirKullanım kılavuzunu görüntüle
google-labs-code/stitch-skills · plugins/stitch-build/skills/shadcn-ui/SKILL.mdSKILL.md
--- name: shadcn-ui description: Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices. --- ## Core Principles ## Component Discovery and Installation ## Project Setup ## Component Architecture ## Customization Best Practices ## Blocks and Complex Components
Üst akış dosyasından 2026-09-14 tarihinde okunan ön bilgi ve bölüm başlıkları · tam metinde 9.117 karakter

01 Ne yapar

Claude Code ve Codex'te shadcn-ui Skill'i Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Bu skill, bir ajana Radix UI veya Base UI ile Tailwind CSS kullanılarak oluşturulan erişilebilir, özelleştirilebilir bileşenler koleksiyonu olan shadcn/ui ile uygulama geliştirme konusunda uzman rehberlik sağlar. shadcn MCP araçlarıyla bileşen keşfini, CLI ile kurulumu veya manuel entegrasyonu, create ve init komutlarıyla proje kurulumunu ve style, baseColor, cssVariables, rsc ve rtl gibi components.json seçeneklerini kapsar.

components/ui/ dosya düzenini ve cn() yardımcı fonksiyonunu açıklar, ardından app/globals.css içindeki CSS değişkenleri, class-variance-authority varyantları ve sarmalayıcı (wrapper) bileşenler üzerinden özelleştirmeyi ele alır. Bloklar kategoriye göre düzenlenmiştir; ardından erişilebilirlik kuralları, yaygın form, dialog ve tablo desenleri, sorun giderme ve beş adımlı bir doğrulama listesi gelir.

Neler üretir

  • components/ui/ içine yazılan ve içe aktarımlarınıza bağlanan bileşen kaynak dosyaları.
  • Yapılandırmayı ve eklenen bileşenleri yansıtan güncellenmiş bir components.json.
  • Panolar veya giriş akışları gibi çok dosyalı arayüzler için alınan blok kaynak kodu.
  • Kendi sarmalayıcı (wrapper) bileşen dosyalarınız, örneğin components/custom-button.tsx.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Önce Kataloga Göz Atın

    İsimleri tahmin etmek yerine list_components, get_component_metadata ve get_component_demo kullanarak shadcn MCP araçları üzerinden mevcut bileşenleri inceleyin.

  2. 02
    Bileşeni CLI ile Ekleyin

    Önerilen yol, yapılandırmanıza uyarlanmış kaynağı indiren, bağımlılıkları kuran ve dosyaları components/ui/ içine yerleştiren add komutudur.

  3. 03
    Ya da Kaynağı Elle Entegre Edin

    Elle entegrasyon için get_component ile kodu çekin, dosyayı kendiniz oluşturun, eşdeğer (peer) bağımlılıkları kurun ve importları düzenleyin.

  4. 04
    Proje Yapılandırmasını Başlatın

    Yeni projeler stil, yazı tipi ve bileşen kitaplığını seçmek için create kullanır; mevcut projeler ise components.json dosyasını yazan init komutunu çalıştırır.

  5. 05
    CSS Değişkenleriyle Temalandırma

    Renkler Tailwind yapılandırmasında ve CSS değişkenlerinde tutulur; koyu mod geçersiz kılmaları bir .dark bloğuyla sağlanır.

  6. 06
    Commit Etmeden Önce Doğrulayın

    Tip kontrolü yapın, lint çalıştırın, erişilebilirliği test edin, açık ve koyu modları kontrol edin ve breakpoint'leri doğrulayın.

02 Uyumunuzu bulun

shadcn-ui Skill Ne Zaman Kullanılır

Bu tür UI tasarım işleri için Claude Code veya Codex'te shadcn-ui skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Stilin, yazı tiplerinin ve bileşen kitaplığının önceden seçilmesi gereken yeni bir projeye başlamak.
  • Bir components.json yapılandırması gerektiren mevcut bir koda shadcn/ui'yi entegre etmek.
  • components.json içinde tanımlı özel veya ekip register'ıyla çalışmak, ya da genel Registry Directory'ye göz atmak.
  • Kimlik doğrulama akışları veya panolar gibi daha büyük ekranları hazır bloklardan oluşturmak.
  • Klavye gezinmesinin, ARIA özniteliklerinin ve odak yönetiminin taviz verilemez olduğu projeler.

Sınırları Bilin

  • Bileşen ve primitive sürümleri zamanla değişir, bu nedenle güncellemeler bozulabilir ve sürüm notlarının kontrol edilmesini gerektirir.

Ne Sağlamalısınız

  • Primitive kitaplığıRadix UI veya Base UI'ı seçin; indirilen kaynak bu seçime göre uyarlanır.
  • Registry adlarıVarsayılan register'dan fazlası yapılandırıldığında, öğeleri çekmeden önce mevcut olanları listeleyin.
  • Blok kategorisiİsteğe bağlı bir kategori filtresi, kaynakları getirmeden önce hangi blokların listeleneceğini daraltır.

03 Skill'in içinde

shadcn-ui Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 7 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Bileşen Koduna Sahip Çıkın

    Bileşenleri, toplu olarak güncellenmesi gereken bir bağımlılık değil, kopyaladığınız ve yeniden yazabileceğiniz kaynak kod olarak ele alın; stili, davranışı ve yapıyı özgürce değiştirebilirsiniz.

  2. Wrapper'ları Components/ui/ Dışında Tutun

    Birleştirilmiş veya genişletilmiş bileşenler components/ içinde yer alır, shadcn bileşenlerinin kendisini barındıran components/ui/ içinde asla olmaz.

  3. Sınıfları Cn() ile Birleştirin

    Her shadcn bileşeni, çakışmaların önüne geçmek için clsx ile tailwind-merge birleşimi olan cn() yardımcısını kullanır.

  4. Varyantları Cva ile İfade Edin

    Varyant ve boyut mantığı class-variance-authority'ye aittir; defaultVariants, hiçbiri belirtilmediğinde hangi varyant ve boyutun geçerli olacağını tanımlar.

  5. Özelleştirirken Erişilebilirliği Koruyun

    ARIA özelliklerini elde tutun, klavye işleyicilerini koruyun, ekran okuyucularla test edin ve görünür fokus göstergelerini sürdürün.

  6. Çalışma Zamanı Gereksinimlerine Uyun

    shadcn/ui v4, React 18+ gerektirir ve Next.js projelerinde Next.js 13+ ister; bazı bileşenler ayrıca belirli Radix UI sürümlerine sabitlenmiştir.

  7. Manuel Kurulumda Peer Bağımlılıkları Kendiniz Yükleyin

    Manuel entegrasyon, peer bağımlılıkları CLI'ya bırakmak yerine kendi elinizle çözmeniz ve import'ları düzeltmeniz anlamına gelir.

04 İşe koyun

Claude Code veya Codex'te shadcn-ui Kurulumu

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza shadcn-ui Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui

plugins/stitch-build/skills/shadcn-ui/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Set up shadcn/ui in my existing [Next.js app] with the new-york style and zinc base color, then add Button, Card and Dialog. Use the login block for the sign-in page, and wrap Button in a LoadingButton in components/ that shows a spinner while [the form submission] is pending. Keep the ARIA attributes and keyboard handling intact.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Kopyalanan kaynaktaki stil sorunlarını yakalamak için proje linter'ını çalıştırın.
  • axe DevTools gibi araçlarla erişilebilirliği kontrol edin.
  • Hem açık hem koyu modda görsel bir geçiş yapın.
  • Farklı breakpoint'lerde davranışı doğrulayın.

OpenDesign'da shadcn-ui birlikte gelir: Plugins → Skills, üst çubukta seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
Skill dosyası
plugins/stitch-build/skills/shadcn-ui/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 0337446
License
Apache-2.0 LICENSE dosyasından.
Repository yıldızları
8.304 12 skill içeren google-labs-code/stitch-skills deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. shadcn-ui için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Temel İlkelerSahip olduğunuz kopyalanmış kodun neden bir bağımlılıktan daha iyi olduğu.
  2. Bileşen Keşfi ve KurulumuMCP araçları, CLI'ya karşı manuel kurulum, özel registry'ler.
  3. Proje Kurulumucreate'e karşı init, components.json seçenekleri, gerekli bağımlılıklar.
  4. Bileşen MimarisiDizin yapısı ve cn() sınıf birleştirme yardımcı programı.
  5. Özelleştirme En İyi UygulamalarıCSS değişken temaları, cva varyantları, components/ui/ dışındaki wrapper bileşenler.
  6. Bloklar ve Karmaşık BileşenlerÇok dosyalı blokları kategoriye göre listeleme, getirme ve kurma.
  7. ErişilebilirlikKorunması gereken Radix tabanlı klavye, ARIA, odak ve devre dışı bırakma davranışları.
  8. Yaygın KalıplarFormlar, diyaloglar ve veri tabloları için içe aktarma tarifleri.
  9. Sorun Gidermeİçe aktarma, stil çakışması, bağımlılık ve sürüm sorunlarına çözümler.
  10. Doğrulama ve KaliteTip kontrolünden duyarlı QA'ya kadar beş commit öncesi kontrol.
  11. KaynaklarKurulum, katalog, özelleştirme ve geçiş referans dosyaları.
  12. ÖrneklerÖrnek uygulamalar ile form, panel, kimlik doğrulama ve veri tablosu kalıpları.
Skill'in Kendi Açıklaması
"shadcn/ui bileşenlerini entegre etme ve uygulama geliştirme konusunda uzman rehberlik: bileşen keşfi, kurulum, özelleştirme ve en iyi uygulamalar."

SKILL.md dosyasındaki front-matter açıklaması. Dosyanın tamamı yaklaşık 9.117 karakter uzunluğunda. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

shadcn-ui Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Radix UI mı, Base UI mı?

İkisi de olabilir. Yapılandırmanızda hangi primitive'i seçeceğinize siz karar verirsiniz ve CLI, indirilen kaynağı buna göre uyarlar. Açıklanan erişilebilirlik garantileri, Radix UI primitive'leri üzerine kurulu bileşenlere bağlıdır.

shadcn UI

shadcn-ui'yi Gerçek Bir UI Tasarım Görevinde Çalıştırın.

shadcn-ui skill, OpenDesign içinde hazır gelir. Uygulamayı indirin, Plugins → Skills menüsünden skill'i seçin, yukarıdaki prompt'u yapıştırın ve sonuca geçmeden önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui