ui-stylingyazan nextlevelbuilder

UI Styling Skill.

UI tasarımı için bir Claude Code ve Codex skill: shadcn/ui, Tailwind CSS ve canvas tabanlı görsellerle erişilebilir UI stillendirme.

Web & UI
UI kodu

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

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-styling/SKILL.mdSKILL.md

--- name: ui-styling description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and … --- ## When to Use This Skill ## Core Stack ## Script Paths ## Quick Start ## Component Library Guide ## Theme & Customization

Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · Tam metin 10.626 karakter

01 Ne yapar

ui-styling 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, shadcn/ui bileşenlerini (Tailwind CSS ile birlikte Radix UI ilkelleri), Tailwind CSS ile utility-first stillendirmeyi ve canvas tabanlı görsel tasarım sistemlerini birleştirerek erişilebilir React kullanıcı arayüzleri oluşturur. Next.js, Vite, Remix ve Astro projelerini hedefler. Bileşenler CLI aracılığıyla kod tabanınıza kopyalanır, bu da size tam kontrol ve TypeScript tip güvenliği sağlar.

Skill; responsive düzenleri, karanlık modu, tasarım token'larını, form doğrulamayı, veri tablolarını ve müze kalitesinde görsel kompozisyonları kapsar. Bileşen desenleri, tema oluşturma, erişilebilirlik (ARIA, klavye navigasyonu), responsive breakpoint'ler ve Tailwind özelleştirmesi için referans dokümantasyon içerir. Python betikleri bileşen kurulumunu ve config oluşturmayı otomatikleştirir.

Neler üretir

Özel tema token'ları, renkler, fontlar, boşluklar ve breakpoint uzantılarıyla oluşturulmuş tailwind.config.js.

Örnek istemi görün ↗

Nasıl Çalışır

01
Shadcn/ui'yi Tailwind ile Başlatın
Hem shadcn/ui'yi hem de Tailwind CSS'i yapılandırmak için npx shadcn@latest init komutunu çalıştırın; bu komut framework, TypeScript, yollar ve tema tercihlerini sorar.
02
Kod Tabanınıza Bileşen Ekleyin
npx shadcn@latest add button card dialog form ile bileşenleri kurun; bu komut bileşenleri tam kontrol ve özelleştirme için projenize kopyalar.
03
Utility Sınıflarıyla Kompozisyon Oluşturun
Responsive düzenler, boşluklar, renkler ve hover durumları için shadcn/ui bileşenlerini Tailwind utility sınıflarıyla doğrudan JSX className özniteliklerinde birleştirin.
04
Karanlık Mod Varyantları Uygulayın
Tema değiştirme için next-themes kullanın ve tutarlı karanlık mod desteği sağlamak için tüm temalı öğelere dark: önekli utility sınıfları ekleyin.
05
Radix Erişilebilirliğinden Yararlanın
Radix UI ilkelleri, ek yapılandırma gerektirmeden yerleşik ARIA desenleri, klavye navigasyonu ve odak yönetimi sağlar.

02 Uyumunuzu bulun

ui-styling Skill Ne Zaman Kullanılır

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

İyi Uyum

Next.js, Vite, Remix veya Astro gibi React tabanlı framework'lerle UI oluşturma.
Dialog, form, tablo ve navigasyon gibi erişilebilir bileşenleri uygulama.
Utility-first CSS yaklaşımıyla responsive, mobile-first düzenler oluşturma.
Tutarlı token'lar ve karanlık mod desteğiyle tasarım sistemleri oluşturma.
Canvas tabanlı iş akışlarıyla görsel tasarımlar, posterler veya marka materyalleri oluşturma.

Sınırları Bilin

shadcn/ui, Tailwind CSS gereklidirSKILL.md bu bağımlılığı belirtir; projenizde bunlar olmadan skill çalışmaz.

Ne Sağlamalısınız

Kurulum için bileşen adlarıBağımlılık yönetimiyle kurulum yapmak için bileşen adlarını shadcn_add.py'a veya npx shadcn@latest add komutuna iletin.
Özel tema token'larıGenişletilmiş temayla tailwind.config.js oluşturmak için tailwind_config_gen.py'a özel renkler ve fontlar sağlayın.

03 Skill'in içinde

ui-styling 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ı.

Mobile-first Responsive
Mobil stillerle başlayın ve breakpoint'ler (sm, md, lg, xl, 2xl) kullanarak duyarlı varyantları katmanlayın. Tailwind varsayılan olarak mobile-first işlem yapar.
Utility-first Çıkarım
Tailwind sınıflarını doğrudan JSX içinde kullanın. Bileşenleri yalnızca gerçek tekrar durumları için çıkarın, tek kullanımlık desenler için değil.
Betik Yolları Skill Dizinine Göre Bağıl
Bu skill içindeki betik yolları, proje köküne değil SKILL.md dosyasını içeren dizine göre bağıldır.
Erişilebilirlik Öncelikli Bileşen Kullanımı
ARIA kalıpları için Radix UI ilkellerinden yararlanın, etkileşimli öğelere odak durumları ekleyin ve semantik HTML kullanın. Ekran okuyucu desteği shadcn/ui bileşenlerine dahildir.
Tutarlılık için Tasarım Token'ları
Tailwind yapılandırmasında tanımlanan tutarlı boşluk ölçeğini, renk paletlerini ve tipografi sistemini kullanın. Rastgele değerler yerine tema değişkenlerini uygulayın.
TypeScript Tip Güvenliği
Tüm bileşenler TypeScript öncelikli olup tam tip güvenliğine sahiptir. Daha iyi bir geliştirici deneyimi için tiplenmiş prop'lar ve form şemaları kullanın.
Dinamik Sınıf Adlarından Kaçının
Tailwind'in otomatik CSS temizliği statik sınıf adları gerektirir. Dinamik sınıf oluşturma, kullanılmayan kodun elenmesini engeller.
Uzman İşçilik Standardı
Her ayrıntı önemlidir—UI'yi bir zanaat olarak ele alın. Görsel kompozisyonlara sistematik desenler ve rafine estetikle müze kalitesinde bir uygulama uygulayın.

04 İşe koyun

Claude Code veya Codex'te ui-styling'i kurun

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 ui-styling ekleyin

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

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

.claude/skills/ui-styling/SKILL.md için genel skills CLI formu; 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

Build a responsive dashboard with a three-column card grid layout that shows analytics metrics. Add a data table component with sorting and filtering for user records. Implement dark mode using next-themes with consistent color variants across all cards and table elements. Include a form dialog with email and password validation using react-hook-form and zod schema. Make sure all interactive elements have proper focus states and keyboard navigation.

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:

Mobile-first düzenin doğru şekilde uyum sağladığından emin olmak için sm, md, lg, xl ve 2xl breakpoint'lerini test edin.
Diyaloglarda ve formlarda klavye gezinmesini, odak yönetimini ve ekran okuyucu duyurularını test ederek erişilebilirliği doğrulayın.
Hata mesajlarının doğru görüntülendiğinden emin olmak için react-hook-form ve zod resolver ile form doğrulamasını inceleyin.

OpenDesign'da ui-styling'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: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill dosyası: .claude/skills/ui-styling/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 7f69fed
License: Apache-2.0 .claude/skills/ui-styling/LICENSE.txt kaynağından; SKILL.md "MIT" diyor. Dosya düzeyinde LICENSE.txt Apache-2.0 diyor, ön madde ise MIT diyor; dosya düzeyindeki lisans ile listelenmiştir.
Repository yıldızları: 127.450 Bu katalogda 7 skill içeren nextlevelbuilder/ui-ux-pro-max-skill deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. ui-styling 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 dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Bu Skill Ne Zaman KullanılırSenaryoları listeler: React framework'leri, erişilebilir bileşenler, duyarlı düzenler, karanlık mod, tasarım sistemleri, görsel tasarımlar.
Temel Yığınshadcn/ui bileşenlerini, Tailwind utility stilini ve canvas görsel tasarım katmanlarını açıklar.
Betik YollarıBetik yollarının proje köküne değil skill dizinine göre bağıl olduğunu açıklar.
Hızlı BaşlangıçVite için shadcn/ui init, bileşen kurulumu ve yalnızca Tailwind kurulumunu gösterir.
Bileşen Kitaplığı KılavuzuFormları, düzenleri, overlay'leri, geri bildirimleri ve görüntüleme bileşenlerini kapsayan shadcn-components.md dosyasına yönlendirir.
Tema ve ÖzelleştirmeKoyu mod, CSS değişkenleri, renkler ve bileşen varyantları için shadcn-theming.md'ye yönlendirir.
Erişilebilirlik KalıplarıARIA, klavye navigasyonu, odak yönetimi ve ekran okuyucular için shadcn-accessibility.md'ye yönlendirir.
Tailwind Yardımcı SınıflarıDüzen, boşluk, tipografi, renkler, kenarlıklar ve gölgeler için tailwind-utilities.md'ye yönlendirir.
Duyarlı TasarımMobil öncelikli kırılma noktaları ve duyarlı yardımcı sınıf kalıpları için tailwind-responsive.md'ye yönlendirir.
Tailwind ÖzelleştirmeKonfigürasyon yapısı, özel yardımcı sınıflar, eklentiler ve tema uzantıları için tailwind-customization.md'ye yönlendirir.
Görsel Tasarım SistemiTasarım felsefesi, görsel iletişim ve sofistike kompozisyonlar için canvas-design-system.md'ye yönlendirir.
Yardımcı BetiklerBileşen kurulumu için shadcn_add.py'yi ve konfigürasyon oluşturma için tailwind_config_gen.py'yi açıklar.

Skill'in Kendi Açıklaması

"shadcn/ui bileşenleri (Radix UI + Tailwind üzerine inşa edilmiş), Tailwind CSS utility-first stillendirme ve canvas tabanlı görsel tasarımlarla güzel, erişilebilir kullanıcı arayüzleri oluşturun. Kullanıcı arayüzleri oluştururken, tasarım sistemleri uygularken, duyarlı düzenler oluştururken, erişilebilir bileşenler eklerken (dialoglar, açılır menüler, formlar, tablolar), temaları ve renkleri özelleştirirken, karanlık mod uygularken, görsel tasarımlar ve posterler oluştururken veya uygulamalar genelinde tutarlı stillendirme kalıpları oluştururken kullanın."

SKILL.md'den ön madde açıklaması. Tam dosya yaklaşık 10.626 karakter. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

ui-styling 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.

Görsel tasarım sistemi hangi çıktı biçimlerini üretir?

Canvas tabanlı görsel tasarım katmanı, görsel tasarımlar, posterler ve marka materyalleri için müze kalitesinde kompozisyonlar oluşturur. Minimal metin ve maksimum görsel etki hedefleyen felsefe odaklı bir yaklaşım izler.

UI Styling

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

OpenDesign'ı indirin, ui-styling'i SKILL.md bağlantısından içe aktarın, yukarıdaki istemi 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/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

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

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

ui-styling Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

ui-styling Skill'in Claude Code ve Codex'e Verdiği Kurallar

Mobile-first Responsive

Utility-first Çıkarım

Betik Yolları Skill Dizinine Göre Bağıl

Erişilebilirlik Öncelikli Bileşen Kullanımı

Tutarlılık için Tasarım Token'ları

TypeScript Tip Güvenliği

Dinamik Sınıf Adlarından Kaçının

Uzman İşçilik Standardı