Break UIyazan Emil Kowalski

Break UI Skill.

Gösterişli demo verilerinin gizlediği arayüz hatalarını bulun. Break UI, kodlama ajanınıza gerçek bileşenleri makul uç değerlerle test etme yöntemi sunar ve tasarımı değiştirmeden önce bulunan hataları sunar.

Arayüz Stres Testi
Uç Durum Test Verileri
İnceleme Raporu

OpenDesign İndir Kullanım Kılavuzunu Gör

Kaynak İncelemesi · break-uiSKILL.md

Görev Tasarım İncelemesi ve Erişilebilirlik Çıktılar • Kaynakları, sınırları ve isteğe bağlı değerleri içeren alan envanteri • En kötü durum test verileri ve yalnızca geliştirmede kullanılan veri seti değiştirici • Öncelik sırasına konmuş hatalar, önerilen düzeltmeler ve sahibin vermesi gereken kararlar Başlamadan Önce Bileşen kaynağı, mevcut demo verileri ve alan sınırları; görsel doğrulama için çalışan bir uygulama ve tarayıcı.

Editoryal özet · kaynak incelendi 2026-10-12 · üretilmiş bir örnek değildir

01 Ne Yapar?

Taklit Edilmiş Bir Hatayı Değil, Bileşeni Test Edin

Bu iş akışı sabitlenmiş kaynakta anlatılmaktadır. Kayıtlı bir çalıştırma veya kıyaslama değildir.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

Bir üye listesi kısa isimlerle çalışırken e-posta uzadığında eylem menüsünü kaybedebilir. Break UI, görüntülenen her değeri prop'lara, test verilerine veya API verilerine kadar izler, kabul edilen sınırları kontrol eder ve veriyi aynı sınırda değiştirir. Yalnızca hata üretmek için düzeni değiştirmez.

Karşılaştırmanın denetlenebilir kalması amaçlanır: demo ve en kötü durum verileri arasında geçiş yapın; gerektiğinde boş, tek öğeli ve büyük liste durumlarını ayrı inceleyin. Rapor, okunamayan veya erişilemeyen içeriği, görsel bozulmayı ve kırılgan varsayımları ayırır; ayrıca zaten sorunsuz çalışanları da kaydeder.

Beklenen Çıktılar

Kaynakları, sınırları ve isteğe bağlı değerleri içeren alan envanteri
En kötü durum test verileri ve yalnızca geliştirmede kullanılan veri seti değiştirici
Öncelik sırasına konmuş hatalar, önerilen düzeltmeler ve sahibin vermesi gereken kararlar

Örnek Talimata Bak

Girdiden Bulgulara

01
Görüntülenen Her Değeri Eşleyin
Bileşeni, doğrulama kurallarını ve API yapılarını okuyun. Sınırları ve eksik alan davranışını kaydedin; yalnızca metin girişlerini değil, sayıları, rozetleri, görselleri ve liste uzunluğunu da dahil edin.
02
İnandırıcı Uç Durumlar Oluşturun
Uzun isimleri, kısa isimleri, eksik alanları ve yerelleştirilmiş etiketleri mevcut verilerle aynı yapıdaki bir test verisinde birleştirin. Biliniyorsa şema sınırlarını kullanın; sınırsız alanları sınır uydurmak yerine not edin.
03
Gerçek Boyutlarda Karşılaştırın
Değiştiriciyi geliştirme ortamında veya prototip rotasında tutun. Bileşenin gerçek kapsayıcısını, 320px'i ve en geniş düzenini, ayrıca büyütülmüş metni inceleyin; ürün destekliyorsa karanlık modu ve RTL'yi de ekleyin.
04
Onarmadan Önce Raporlayın
Her hata için önem derecesi, tetikleyen değer, önerilen düzeltme ve dosya konumu verin. Satır kaydırma ile kısaltma gibi kararlar için durun; düzeltmeleri yalnızca istendiğinde uygulayın, ardından demo ve uç durumları yeniden test edin.

02 Ne Zaman Kullanılır?

Ne Zaman Kullanılır?

İçeriği değişen mevcut bir bileşende kullanın. Bu bir veri dayanıklılığı incelemesidir, görsel yeniden tasarım değildir.

Uygun Kullanım

Yoğun Listeler ve KartlarÜye satırları, arama sonuçları ve dosya kartları; sınırlı alan için yarışan isimleri, meta verileri, rozetleri ve eylemleri bir araya getirir.
Yerelleştirilmiş ArayüzlerUzun çevrilmiş etiketler, Latin olmayan isimler ve desteklenen RTL düzenleri, İngilizce demo metninin gözden kaçırdığı varsayımları açığa çıkarabilir.
Boş ve Büyük KoleksiyonlarSıfır öğeyi, tek öğeyi, sayfa boyutu sınırlarını ve gerçekçi büyük bir listeyi; çoğul biçimlerini ve kaydırma davranışını da dahil ederek kontrol edin.

Kontrol Edilecek Sınırlar

Zevk Eleştirisi DeğildirBeceri yeni bir görsel yön seçmez veya bileşeni yeniden tasarlamaz. Bulguları gerçekçi verilere ve mevcut tasarıma ilişkindir.
Otomatik Ürün Kararı YokturBir alanın satır kaydırması, kısaltılması veya gizlenmesi sahibin kararını gerektirebilir. Varsayılan iş akışı önce raporlar ve düzeltmeleri uygulamadan önce durur.
Görsel Kanıt İçin Tarayıcı GerekirYalnızca kaynağa dayalı bir inceleme riskleri belirleyebilir ama kullanıcının ne gördüğünü kanıtlayamaz. Kaynak, çıkarım yoluyla bulunan bulguların görsel olarak doğrulanmış hatalardan ayrılmasını gerektirir.

Bu Girdileri Getirin

Gerçek BileşenBileşeni veya ekranı, olağan kapsayıcısını ve çalışan bir yerel rotayı sağlayın. Tek başına ekran görüntüsü veri sınırını veya doğrulama sınırlarını göstermez.
Veri Yapıları ve SınırlarDemo test verilerini, prop'ları veya API tiplerini, doğrulama kurallarını ve isteğe bağlı alanları ekleyin. Sentetik kayıtlar yeterlidir; gerçek müşteri verisi vermeyin.
Desteklenen Durumlar ve OrtamlarEn büyük liste boyutunu, desteklenen dilleri, karanlık mod ve RTL gereksinimlerini belirtin. İsteğin yalnızca rapor mu yoksa onaylı düzeltmeleri de mi içerdiğini belirtin.

03 Önemli Kararlar

Önemli Kararlar

Test Verileri Gerçek Sınırdan Girer
Bir prop'u veya sahte yanıtı değiştirmek bileşenin davranışını test eder. Kırılma zorlamak için işaretlemeyi veya CSS kodunu düzenlemek farklı bir bileşeni test etmek olur.
Kısa ve Eksik Değerler de Önemlidir
Tek harfli bir isim, olmayan bir avatar veya bir sayısı; uzun metinlerin asla ortaya çıkarmayacağı baş harf, yedek içerik ve çoğul biçimi kusurlarını açığa çıkarabilir.
En Kötü Durum Regresyon Test Verisine Dönüşür
Onaylanan onarımlardan sonra test verisini sonraki kontroller için saklayın ve normal verilerle karşılaştırın. Değiştirici yalnızca geliştirmede kalır ve üretime gönderilmemelidir.

04 Odaklı Bir Talimat Deneyin

Odaklı Bir Talimat Deneyin

Aşağıdaki örnek talimat test edilmemiştir. Kullanmadan önce becerinin kurulumunu kontrol edin.

Kurulumu İnceleyin

Emil Kowalski'ın herkese açık beceri deposundan kurun ve bu beceriyi ajanınız için seçin.

Kapsamlı Kurulum Komutu

npx skills@latest add emilkowalski/skills --skill break-ui

README, depo kurulumunu npx skills@latest add emilkowalski/skills ile belgeler. Aşağıdaki kapsamlı komut bu girdiyi seçer. npx için Node.js/npm gerekir; kaynak asgari bir sürüm belirtmez. Çalıştırmadan önce yukarı akış talimatlarını inceleyin.

Veriyle Çalışan Tek Bir Bileşenle Başlayın

Bu örnek talimat özgündür ve test edilmemiştir. Bileşen ve ortam ayrıntılarını projenizin gerçek bağlamıyla değiştirin.

Örnek Talimat

Mevcut prototip rotasındaki MemberList bileşenimizde break-ui kullan. Önce prop tiplerini ve doğrulama sınırlarını incele. Uzun ve tek harfli isimleri, uzun bir example.com e-postasını, eksik avatarı ve rolü, ayrıca desteklenen Latin olmayan metni kapsayan sentetik demo ve gerçekçi en kötü durum test verileri oluştur. Boş ve tek üyeli durumları, ayrıca kodda bulunan gerçekçi üst liste boyutunu ekle. Veri seti değiştiriciyi yalnızca geliştirmede tut ve test sırasında bileşenin işaretlemesini ve stillerini koru. Gerçek kenar çubuğu genişliğini, 320px'i, desteklenen en geniş düzeni ve %200 yakınlaştırmayı kontrol et. Hataları dosya konumları, önerilen düzeltmeler ve gereken kararlarla raporla. Tarayıcıda doğrulanan bulguları koda dayalı risklerden ayır, sorunsuz çalışanları kaydet ve düzeltmeleri henüz uygulama.

Düzeltmeden Önce Kanıtları İnceleyin

Raporu kod ve gerçek tarayıcı davranışıyla karşılaştırın. Doğrulanmamış gözlemleri yeniden üretilen hatalardan ayrı tutun.

Test edilen her alanın gerçek bir kaynağı ve belgelenmiş bir sınırı ya da açıkça belirtilmiş bir bilinmezliği vardır.
Veri değiştirme aynı bileşen sınırına ulaşır; kontrol geliştirme veya prototiple sınırlıdır.
Bulgular başarısız olan değeri, konumu ve kanıtı içerir; normal veriler ve başarılı durumlar dışarıda bırakılmaz.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, becerinin paketle birlikte geldiği veya harici araçların, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign İndir Hızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu anlatır. Yukarı akış davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi: Emil Kowalski
Depo: emilkowalski/skills
Beceri Dosyası: skills/break-ui/SKILL.md
Lisans: MIT
İncelenen Sürüm: 2026-10-12 · 2d228630ba14

Editoryal Kaynak Özeti

Mevcut arayüzü gerçekçi uç verilerle ve yalnızca geliştirmede kullanılan bir karşılaştırma anahtarıyla stres testine tabi tutun; hataları düzeltmeden önce raporlayın. Bu, sabitlenmiş kaynağın editoryal özetidir, çalıştırma raporu değildir.

OpenDesign tarafından bağlantılı kaynağa dayanılarak hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; beceri kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Break UI bileşeni otomatik olarak düzeltir mi?

Varsayılan olarak hayır. Hataları ve önerilen düzeltmeleri raporlar, sonra bekler. Kaynak ayrıca açıkça istenen düzeltmeyi de destekler; birden fazla geçerli yanıtı olan kararların yine de çözülmesi gerekir.

Yalnızca uzun metni mi test eder?

Hayır. Kataloğu eksik değerleri, sayıları, koleksiyonları, zamanı, medyayı, durumları ve ortamı kapsar. Boş ve tek öğeli listeler ayrı durumlardır; uzun metin test verisinin yerine geçmez.

Bir proje olmadan çalıştırabilir miyim?

Kaynak, bağımsız bir bileşene ve kendi içinde tamamlanmış HTML karşılaştırmasına izin verir. Tarayıcı erişimi yoksa bulgular görsel olarak doğrulanmış değil, çıkarım olarak işaretlenmelidir.

Break UI

Demonun Öngörmediği Verileri Deneyin

Tek bir bileşen ve gerçekçi sentetik kayıtlarla başlayın. Nelerin başarısız olduğunu inceleyin, düzeltmeleri seçin ve test verisini sonraki değişiklik için saklayın.

OpenDesign İndir Tasarım Becerilerine Göz At