baseline-uiyazan Julien Thibeaut

Baseline UI Skill.

Claude Code ve Codex için tasarım incelemesi skill'i: boşluk, hiyerarşi, tipografi ve küçük düzen sorunlarını düzelterek UI kodunu hızlıca iyileştirir.

Tasarım İncelemesi & Erişilebilirlik
UI kodu

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

ibelick/ui-skills · skills/baseline-ui/SKILL.mdSKILL.md

--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- ## How to use ## Stack ## Components ## Interaction ## Animation ## Typography

Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okunmuştur · tam hali 3.417 karakter

01 Ne yapar

baseline-ui Skill'inin Claude Code ve Codex'te Yaptıkları

Ö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

Baseline UI, bir kod tabanında AI tarafından üretilmiş arayüz özensizliğini önlemek için katı bir UI temel çizgisi uygulayan bir inceleme skill'idir. React primitive'leri kullanan Tailwind CSS projelerini hedefler ve konuşmadaki her UI çalışmasına kalıcı bir kısıtlama seti olarak veya dosya düzeyinde bir inceleme geçişi olarak kurulur.

Onu özgün kılan şey kullandığı terminolojidir: h-screen yerine h-dvh, başlıklar için text-balance'tan, 200ms ile sınırlı ve yalnızca compositor üzerinde çalışan animasyona ve keyfi z-index değerlerinin kullanılmamasına kadar kullanılacak veya kaçınılacak tam utility ve prop'ları adlandırır. Arayüzün hızlı bir temizlik veya cilalama geçişine ihtiyaç duyduğu durumlarda kullanın.

Neler üretir

Her ihlalin neden önemli olduğunu tek cümlede açıklayan bir gerekçe.
Her bulgu için somut, kod düzeyinde bir düzeltme.

Örnek istemi görün ↗

Nasıl Çalışır

01
Onu Konuşma Genişliğinde Bir Kısıtlar Kümesi Olarak Çağırın
Bare komutu çalıştırmak, bu dosyadaki tüm kısıtları o konuşmada yapılan tüm UI çalışmalarına uygular, sadece bir dosyaya değil.
02
Ya da Onu Tek Bir Dosyaya Yönlendirin
Bir dosya hedefi vermek, skill'i inceleme moduna geçirir ve o dosyayı aşağıda listelenen tüm kısıtlara karşı kontrol eder.
03
Üç Parçalı Bir İhlal Raporu Döndürün
Her bulgu, sorunlu kod parçasından alıntı yapar, neden önemli olduğuna dair kısa bir cümle verir ve kod düzeyinde bir düzeltme önerir.
04
Kısıt Gruplarını Sırayla İşleyin
Dosya, kurallarını Stack, Components, Interaction, Animation, Typography, Layout, Performance ve Design olarak düzenler; her biri MUST, SHOULD ve NEVER öğelerini karıştırır.

02 Uyumunuzu bulun

baseline-ui Skill Ne Zaman Kullanılır

Bu tür tasarım incelemesi işi olduğunda Claude Code veya Codex'te baseline-ui becerisini kullanın. Uygunluk ve sınırlar, becerinin kendi dosyasından alınmıştır.

İyi Uyum

Tutarlı bir taban çizgisinden uzaklaşmış bir arayüz üzerinde hızlı bir temizlik veya cilalama geçişi.
Belirli bir dosyayı boşluk, hiyerarşi, tipografi ve küçük düzen sorunları açısından incelemek.

Sınırları Bilin

Gradyanlara, özel easing eğrilerine veya özel harf aralığına bağlı olan tasarım çalışmaları; bunların tümü açık bir istek olmadan kilitlidir.
Açıkça istenmedikçe izin verilmeyen, klavye veya odak davranışını sıfırdan elle kodlamak.

Ne Sağlamalısınız

İncelenecek bir dosyaİsteğe bağlı. Bir dosya adı belirtmek, skill'i sadece o dosya için ihlalleri raporlayan bir inceleme geçişine çevirir.

03 Skill'in içinde

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

Tailwind CSS Varsayılanlarına Bağlı Kalın
Özel değerler, sadece projede zaten mevcutlarsa veya açıkça talep edilmişlerse kabul edilebilir; aksi halde ajan Tailwind'in varsayılanlarını kullanmalıdır.
İstenmedikçe Animasyon Yok
Animasyon varsayılan olarak kapalıdır. Açıkça istendiğinde, sadece compositor özellikleri animasyonlu olabilir; width, height, top, left, margin veya padding asla animasyonlu olamaz.
Etkileşim Geri Bildirimini 200ms ile Sınırlayın
Girişler ease-out kullanmalı, döngülü animasyonlar ekran dışına çıktığında duraklamalı ve prefers-reduced-motion'a uyulmalıdır.
İlkel Sistemleri Asla Karıştırmayın
Klavye veya odak davranışı içeren her şey, Base UI, React Aria veya Radix'ten erişilebilir bir ilkel gerektirir; mevcut proje ilkelleri önceliklidir ve açıkça istenmedikçe klavye veya odak davranışını elle yeniden inşa etmek yasaktır.
h-screen Değil, Her Zaman h-dvh Kullanın
Etkileşim bölümü ayrıca sabit elemanların safe-area-inset'e uymasını ve hataların işlemin gerçekleştiği yerin yanında gösterilmesini gerektirir.
Sabit Bir z-index Ölçeği Kullanın
Rastgele z- değerlerine izin verilmez ve kare elemanlar eşleştirilmiş w- ve h- yardımcı sınıfları yerine size- kullanmalıdır.
Tipografi Yardımcı Sınıflarını Değiştirmeden Kullanın
Başlıklar için text-balance, gövde metni için text-pretty, veriler için tabular-nums kullanılmalı ve letter-spacing açıkça istenmedikçe değiştirilmemelidir.
Varsayılan Olarak Gradyan veya Parıltı Yok
Gradyanlar için açık bir istek gerekir, mor ve çok renkli gradyanlar tamamen yasaktır ve parıltı efektleri birincil etkileşim göstergesi olarak kullanılamaz.

04 İşe koyun

baseline-ui'yi Claude Code veya Codex'e Yükleyin

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

baseline-ui'yi Claude Code, Codex veya Ajanınıza Ekleyin

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

Terminal

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

skills/baseline-ui/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Beceriye İlk Tasarım İnceleme Görevi Verin

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

Starter prompt

Review [src/components/SettingsDialog.tsx] against the baseline UI constraints. We generated this dialog quickly and the spacing, hierarchy and layout feel off, so report the violations with the exact lines, why they matter, and the code-level fix for each.

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:

transform ve opacity dışında animasyonlu bir özellik olmadığını doğrulayın.
Yalnızca ikonlu butonların bir aria-label taşıdığını ve yıkıcı eylemlerin bir AlertDialog arkasında olduğunu doğrulayın.

OpenDesign'da baseline-ui'yi SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan 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: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Skill dosyası: skills/baseline-ui/SKILL.md İçerik sağlama toplamı doğrulama sırasında kaydedildi; commit 79081ab
License: MIT LICENSE dosyasından.
Repository yıldızları: 8.402 GitHub anlık görüntüsü 2026-09-14 tarihinde, bu katalogda 5 skill içeren ibelick/ui-skills deposunun tamamı için alınmıştır. baseline-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 dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Nasıl kullanılırİki çağırma modu vardır: yalın komut kısıtlamaları uygular, dosya argümanı bir ihlal raporu tetikler.
YığınTailwind CSS varsayılanları, JS animasyonu için motion/react, tw-animate-css ve cn yardımcı fonksiyonu.
BileşenlerYalnızca erişilebilir temel bileşenler, önce mevcut proje temel bileşenleri, ikonlu butonlarda aria-label.
EtkileşimYıkıcı eylemler için AlertDialog, yükleme için skeleton'lar, h-dvh, safe-area-inset, engellenmemiş yapıştırma.
Animasyonİstenmedikçe animasyon yok; yalnızca compositor özellikleri, ease-out, 200ms sınırı, reduced-motion'a uyum.
TipografiBaşlıklarda text-balance, gövde metninde text-pretty, veriler için tabular-nums, tracking değişikliği yok.
DüzenRastgele değerler yerine sabit bir z-index ölçeği, kare elemanlar için size-*.
PerformansBüyük blur veya backdrop-filter animasyonundan kaçınma, will-change'i sınırlama, useEffect yerine render mantığını tercih etme.
TasarımGradyan veya parıltı etkileşim göstergesi yok, varsayılan gölge ölçeği, tek bir vurgu rengi, mevcut token'ların yeniden kullanımı.

Skill'in Kendi Açıklaması

"Arayüz hızlı bir temizlik veya cilalama işlemine ihtiyaç duyduğunda boşlukları, hiyerarşiyi, tipoğrafiyi ve küçük yerleşim sorunlarını düzelterek UI kodunu hızlıca düzeltir."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 3.417 karakterdir. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

baseline-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.

Hangi yığını varsayıyor?

Tailwind CSS varsayılanları, JavaScript animasyonu gerektiğinde motion/react (eski adıyla framer-motion), giriş ve mikro animasyonlar için tw-animate-css ve clsx ile tailwind-merge'den oluşturulmuş cn yardımcı fonksiyonu.

Daha iyi görünmesi için animasyon veya gradyan ekleyecek mi?

Hayır. Açıkça istenmediği sürece animasyon asla eklenmez ve açıkça istenmediği sürece gradyan kullanılmaz. Mor ve çok renkli gradyanlar tamamen dışlanmıştır.

Hangi bileşen kütüphanelerine izin veriyor?

Klavye veya odak davranışı içeren her şey için Base UI, React Aria veya Radix; projenin mevcut primitifleri tercih edilir. Yeni primitifler için, yığınla uyumluysa Base UI önerilen seçimdir ve bir etkileşim yüzeyinde primitif sistemlerin karıştırılmasına izin verilmez.

Baseline UI

baseline-ui'yi gerçek bir tasarım inceleme görevinde çalıştırın.

OpenDesign'ı indirin, baseline-ui'yi 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