shadcnyazan shadcn

shadcn Skill.

Claude Code ve Codex için UI tasarım skill'i: bir projede shadcn bileşenlerini ekler, arar, düzeltir, stillendirer ve oluşturur.

Web & UI
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

shadcn-ui/ui · skills/shadcn/SKILL.mdSKILL.md

--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". --- ## Current Project Context ## Principles ## Critical Rules ## Key Patterns ## Component Selection ## Key Fields

Üst akış dosyasından 2026-09-14 tarihinde okunan ön bilgi ve bölüm başlıkları · tam metinde 19.427 karakter

01 Ne yapar

shadcn Skill'i Claude Code ve Codex'te 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, bileşen ekleyip aratarak, düzelterek ve birleştirerek shadcn/ui projelerini yönetir. components.json dosyasından canlı proje bağlamı enjekte eder, formlar, stil, kompozisyon, ikonlar ve sohbet arayüzü için çerçeveye özgü kuralları uygular ve tüm işlemler için shadcn CLI'sını kullanır. Bileşenler, npx shadcn@latest (veya projenin paket çalıştırıcısı) aracılığıyla kaynak kod olarak yüklenir.

Bu skill, shadcn/ui, bileşen kayıtları (component registries), önceden tanımlı kodlar veya bir components.json dosyasına sahip herhangi bir projeyle çalışırken uygulanır. RSC yönergelerini, Tailwind v3/v4'ü, Base UI ile Radix ilkellerini ve ikon kitaplığı tespitini ve monorepo düzenlerini kapsar. Her komut, projenin gerçek takma adlarına (aliases), paket yöneticisine ve çözümlenmiş yollarına (resolved paths) atıfta bulunur.

Neler üretir

Projenin çözümlenmiş ui yoluna eklenen shadcn bileşenleri için kaynak kod dosyaları
Güncelleme yapılırken, üst akış (upstream) güncellemelerini uygularken yerel değişiklikleri koruyan birleştirilmiş bileşen dosyaları

Örnek istemi görün ↗

Nasıl Çalışır

01
Proje Bağlamını Enjekte Et
Proje yapılandırmasını, yüklü bileşenleri, takma adları (aliases), RSC bayrağını, Tailwind sürümünü, ikon kitaplığını, tabanı (radix veya base) ve çözümlenmiş yolları almak için npx shadcn@latest info --json komutunu çalıştırır.
02
Özel Arayüz Yazmadan Önce Kayıtları Arayın
İhtiyaca uyan mevcut bileşenleri kontrol etmek için shadcn kaydında ve topluluk kayıtlarında npx shadcn@latest search komutunu kullanır.
03
Bileşen Belgelerini ve Örneklerini Getir
Belgeleri ve örnek URL'leri almak için npx shadcn@latest docs <component> komutunu çalıştırır, ardından bir bileşen oluşturmadan veya düzeltmeden önce doğru API kullanımını doğrulamak için bunları getirir.
04
CLI ile Bileşen Ekleyin veya Güncelleyin
Bileşenleri yüklemek için npx shadcn@latest add komutunu kullanır.
05
Üçüncü Taraf Bileşenlerde İçe Aktarmaları Düzeltin
Topluluk kayıtlarından bileşenler eklendikten sonra, arayüz olmayan dosyalarda @/components/ui/... gibi sabit kodlanmış yolları kontrol eder
06
Eklenen Bileşenleri İnceleyin ve Doğrulayın
Eksik alt bileşenleri, hatalı kompozisyonları, kritik kural ihlallerini ve uyumsuz simge (icon) içe aktarımlarını kontrol etmek için eklenen tüm dosyaları okur.

02 Uyumunuzu bulun

shadcn Skill Ne Zaman Kullanılır

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

İyi Uyum

components.json dosyası bulunan mevcut bir projede shadcn/ui bileşenleriyle UI oluşturma
Bir ön ayar kodu veya nova ya da vega gibi adlandırılmış bir ön ayarla yeni bir shadcn projesi başlatma
MessageScroller, Message, Bubble, Attachment ve Marker kullanarak sohbet veya konuşma arayüzleri oluşturma

Sınırları Bilin

CLI kullanmak yerine bileşen dosyalarını GitHub'dan manuel olarak alma
Kullanıcı hangi registry'nin kullanılacağını belirtmediğinde varsayılan bir registry'ye yönelme
Kullanıcının açık onayı olmadan bileşenleri güncellemek için --overwrite kullanma
Proje bağlamında bulunmayan yetenekler, entegrasyonlar veya dosya adları icat etme

Ne Sağlamalısınız

Bileşen veya blok adıEklenecek veya aranacak bir shadcn bileşeninin (button, dialog, select) veya bir registry öğesinin (@magicui/shimmer-button, owner/repo/item) adı.
Ön ayar kodu veya adlandırılmış ön ayarui.shadcn.com'dan sürüm önekli bir base62 dizesi (örneğin a2r6bw) veya init ya da apply için adlandırılmış bir ön ayar (nova, vega, maia, lyra, mira, luma).

03 Skill'in içinde

shadcn Skill'in Claude Code ve Codex'e Verdiği Kurallar

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

gap- Kullanın, Asla space-x- veya space-y- Kullanmayın
Flex çocukları arasındaki boşluk için gap- kullanın. Dikey yığınlar için flex flex-col gap- kullanın. space-x- ve space-y- kesinlikle kullanılamaz.
Formlar FieldGroup + Field Kullanmalıdır
Form düzenleri FieldGroup ve Field bileşenlerini kullanmalıdır. Form düzeni için asla space-y- veya grid gap- ile ham div kullanmayın.
Butonlardaki Simgeler data-icon Kullanmalıdır
Button içindeki simgeler data-icon="inline-start" veya data-icon="inline-end" içermelidir. Bileşenlerin içindeki simgelerde size-4 veya w-4 h-4 gibi boyutlandırma sınıfları kullanılamaz.
Öğeler Her Zaman Kendi Grubunun İçinde Olmalıdır
SelectItem, SelectGroup içine; DropdownMenuItem, DropdownMenuGroup içine; CommandItem, CommandGroup içine yerleştirilir. Öğeler asla doğrudan render edilmez.
Ham Değerler Yerine Anlamsal Renk Token'ları Kullanın
bg-primary, text-muted-foreground gibi token'ları kullanın. bg-blue-500 veya text-emerald-600 gibi ham Tailwind renklerini asla kullanmayın. Manuel dark: renk geçersiz kılmaları yapılamaz.
Dialog, Sheet ve Drawer Her Zaman Bir Başlığa Sahip Olmalıdır
Erişilebilirlik için DialogTitle, SheetTitle ve DrawerTitle gereklidir. Başlığın görsel olarak gizlenmesi gerekiyorsa className="sr-only" kullanın.
Ön Ayar Kodlarını Asla Manuel Olarak Çözmeyin
npx shadcn@latest preset decode <code>, preset url <code> veya preset open <code> kullanın. Projeye duyarlı preset tespiti için preset resolve kullanın. Preset URL'lerini asla elle oluşturmayın.
Tüm CLI Komutlarını Projenin Paket Çalıştırıcısıyla Çalıştırın
Projenin packageManager alanına göre npx shadcn@latest, pnpm dlx shadcn@latest veya bunx --bun shadcn@latest kullanın. Proje pnpm veya bun kullanıyorsa npx'i asla sabit kodlamayın.

04 İşe koyun

Claude Code veya Codex'e shadcn yükleyin

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 ekleyin

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

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

skills/shadcn/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

I need a settings page with tabs for profile, account, and notifications. Each tab should have form fields grouped by section, with a save button at the bottom. Use the project's existing shadcn components and follow the FieldGroup pattern. The profile tab needs an avatar upload, the account tab needs email and password inputs with inline buttons to change them, and the notifications tab needs toggle groups for frequency (daily, weekly, monthly) and a set of checkboxes for notification types. Make sure all validation states use data-invalid and aria-invalid correctly.

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:

Bileşenin yüklü bileşenler listesine eklendiğini doğrulamak için npx shadcn@latest info çalıştırın
Simge içe aktarmalarının projenin iconLibrary alanıyla eşleştiğini kontrol edin (lucide-react, @tabler/icons-react vb.)

OpenDesign'da shadcn'i SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta seçin.

OpenDesign İndir Hı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: shadcn
Repository: github.com/shadcn-ui/ui Dal main
Skill dosyası: skills/shadcn/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 2b3e6d4
License: MIT LICENSE.md dosyasından.
Repository yıldızları: 123.708 GitHub anlık görüntüsü shadcn-ui/ui deposunun tamamı için 2026-09-14 tarihinde alındı. shadcn için kullanım sayısı veya değerlendirme puanı 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 dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Mevcut Proje Bağlamınpx shadcn@latest info --json'dan canlı proje yapılandırmasını ve yüklü bileşenleri enjekte eder
İlkelerÖnce mevcut bileşenleri kullanın, yeniden icat etmek yerine birleştirin, yerleşik varyantları kullanın, semantik renkler kullanın
Kritik KurallarStil, formlar, kompozisyon, simgeler, sohbet ve CLI için her zaman uygulanan kurallar, ayrıntılı dosyalara bağlantılarla birlikte
Temel DesenlerEn yaygın kod desenleri: form düzeni, doğrulama, butonlarda simgeler, boşluklandırma, eşit boyutlar, durum renkleri
Bileşen SeçimiUI gereksinimlerini doğru shadcn bileşenlerine eşleştiren tablo (butonlar, formlar, kaplamalar, geri bildirim, gezinme, sohbet)
Temel AlanlarProje bağlamından aliases, isRSC, tailwindVersion, base, iconLibrary, resolvedPaths, framework, packageManager, preset alanlarını açıklar
Bileşen Belgeleri, Örnekler ve KullanımURL'leri almak için npx shadcn@latest docs çalıştırın, doğru API ve kullanım desenleri için bunları getirin
İş akışıDokuz adımlı süreç: bağlamı al, kurulu olanı denetle, ara, dokümanları al, kur, import'ları düzelt, incele, registry'leri yönet, ön ayarları değiştir
Bileşenleri GüncellemeYerel değişiklikleri korurken üst akış değişikliklerini birleştirmek için --dry-run ve --diff kullanın, onay olmadan asla --overwrite kullanmayın
Hızlı Referansinit, apply, add, search, docs, view, preset işlemleri için bayraklar ve registry sözdizimiyle CLI komut örnekleri
Ayrıntılı ReferanslarFormlar, kompozisyon, sohbet, simgeler, stil, base-vs-radix, CLI, registry, özelleştirme için ayrı kural dosyalarına bağlantılar

Skill'in Kendi Açıklaması

"shadcn bileşenlerini ve projelerini yönetir — ekleme, arama, düzeltme, hata ayıklama, stil verme ve UI kompozisyonu dahil, sohbet arayüzlerini de kapsayacak şekilde. Proje bağlamı, bileşen dokümantasyonu ve kullanım örnekleri sağlar. shadcn/ui, bileşen kayıtları, hazır ayarlar, --preset kodları veya components.json dosyası içeren herhangi bir projeyle çalışırken devreye girer. Ayrıca \"shadcn init\", \"--preset ile bir uygulama oluştur\" veya \"--preset'e geç\" komutlarında da tetiklenir."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 19.427 karakter uzunluğunda. GitHub'da dosyanın tamamını okuyun.

shadcn

shadcn'i gerçek bir UI tasarım görevinde çalıştırın.

OpenDesign'ı indirin, shadcn'i SKILL.md bağlantısından içe aktarın, yukarıdaki promptu yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

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

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

shadcn Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

shadcn Skill'in Claude Code ve Codex'e Verdiği Kurallar

gap- Kullanın, Asla space-x- veya space-y- Kullanmayın

Formlar FieldGroup + Field Kullanmalıdır

Butonlardaki Simgeler data-icon Kullanmalıdır

Öğeler Her Zaman Kendi Grubunun İçinde Olmalıdır

Ham Değerler Yerine Anlamsal Renk Token'ları Kullanın

Dialog, Sheet ve Drawer Her Zaman Bir Başlığa Sahip Olmalıdır

Ön Ayar Kodlarını Asla Manuel Olarak Çözmeyin

Tüm CLI Komutlarını Projenin Paket Çalıştırıcısıyla Çalıştırın