Yeni @shadcn/lint, agent dostu Tailwind design-system kurallarını ESLint ve Oxlint'a getiriyor

Agent'larla konuşan bir linter

@shadcn/lint adlı yeni araç, AI destekli frontend çalışmalarındaki belirli bir sürtünme noktasını hedefliyor: üretilen kodun projenin design system'i içinde tutulması. Projeyi tanıtan bir dev.to yazısına göre linter, Tailwind design system'leri için geliştirildi ve yalnızca insan geliştiricilerle değil, açıkça kodlama agent'larıyla etkileşim kuracak şekilde tasarlandı.

Temel fikir basit. Bir ekip, projesinin stil kurallarını tanımlar ve linter bu kuralları uygular. Yazıya göre @shadcn/lint'i farklı kılan şey, bir kural ihlal edildiğinde olanlar: hata mesajı ihlali detaylandırır ve düzeltmeye, projede halihazırda var olan bileşen, varyant ve temaları işaret ederek yön verir. Bu tür bağlam açısından zengin bir çıktı, tam da otonom bir agent'ın bir sonraki düzenlemede kendini düzeltmek için ihtiyaç duyduğu şeydir.

Nerede konumlanıyor

Yazıya göre araç, Tailwind v4 ile geliştirilen projelerde AI agent kullanan geliştiricileri hedefliyor. ESLint ve Oxlint olmak üzere iki linting motoruyla çalışıyor ve React, Svelte ile Vue'yu destekliyor. Paket adına rağmen shadcn/ui bileşen kütüphanesi bir ön koşul değil; linter, bu kütüphaneden bağımsız olarak benimsenebilir.

Açıklanan hedefler tutarlılık odaklı: mevcut bileşenlerin istenmeyen şekilde yeniden stillendirilmesini engellemek ve rastgele (arbitrary) değerlerin sızmasını bloke etmek — tüm bunları, projenin halihazırda sunmuş olduğu bileşen API'lerini değiştirmeden yapmak.

Bugün gelen kurallar

İki kural öne çıkıyor. shadcn/no-restyle, bir projeye bileşen bileşen hangi özelliklerin değiştirilebileceğini bildirme imkanı veriyor; böylece bir agent ya da insan izin verilen ayarlarla oynayabilir ama bir bileşenin stilini serbestçe baştan yazamaz. shadcn/no-arbitrary-values, kodun tek seferlik değerler yerine temanın ölçeklerini kullanmasını zorunlu kılıyor ve Tailwind projelerinde tanıdık bir görsel kayma kaynağına — zamanla markup içinde biriken geçici ölçü ve renklere — hitap ediyor.

Her iki kural da projenin normal linter yapılandırma dosyasında etkinleştiriliyor; böylece zorunlu kılmak, ayrı bir araç zinciri gerektirmek yerine mevcut lint iş akışlarına ve CI hatlarına yerleşiyor.

Kurulum ve başlangıç

Başlamak gördüğü kadarıyla agent dostu. Yazı, projenin SETUP.md kurulum belgesini doğrudan kodlama agent'ınıza vermenizi ve kurulumu onun halletmesine izin vermenizi öneriyor; işi kendisi yapmak isteyen ekipler içinse alternatif olarak manuel kurulum sunuluyor.

Manuel kurulum tek bir npm komutu: npm install -D @shadcn/lint eslint @typescript-eslint/parser; ardından istenen kuralların bir ESLint veya Oxlint yapılandırmasında etkinleştirilmesi gerekiyor. Resmi depo, GitHub üzerindeki shadcn-ui organizasyonunda barındırılıyor.

Neden önemli

Bu tür araçlar, lint'in amacındaki bir değişimi yansıtıyor. Geleneksel olarak bir linter'ın kitlesi terminali okuyan geliştiricidir; burada ise birincil okuyucu, mesajı ayrıştırıp üzerinde işlem yapacak olan bir agent. Projenin kendi bileşenlerine ve temasına atıfta bulunan hata çıktısı, genel stil tavsiyesi yerine agent'lara geçerli bir çözüme giden somut bir yol sunuyor ve bir tahmin daha denemelerini önlüyor.

Araç ayrıca, bir AI agent'ının UI ile çalışmasına izin vermiş herkesin tanıyacağı iki başarısızlık modunu hedefliyor: bileşeni sıfırdan yeniden inşa ederek "düzeltip" design system'den uzaklaşan agent'lar ve markup içine rastgele değerler serpiştiren agent'lar. Bu kısıtlamaları lint kuralları olarak kodlamak, design-system zorunluluğunu otomatik geri bildirim döngüsüne taşıyor; böylece bir insan incelemeci diff'i görmeden önce ihlaller fark ediliyor.

Tailwind v4 üzerinde agentic kodlama iş akışlarına yatırım yapan ekipler için bu, çok gerçek bir koordinasyon sorununu ele alan küçük bir araç: agent'a UI kodu yazma özgürlüğü verirken sonucu, tasarımcılarınızın gerçekte tanımladığı sistemin içinde tutmak.