106.9K+İndir
Kullanım kılavuzuna geç
Component Canvasyazan ibelick

Component Canvas Skill'i.

Gerçek UI bileşenlerini ve varyantlarını kaydırılabilir, yakınlaştırılabilir bir tuvalde inceleyin.

  • Bileşen varyantları
  • Karşılaştırma
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · component-canvasSKILL.md
Görev Gerçek UI bileşenlerini ve varyantlarını kaydırılabilir, yakınlaştırılabilir bir tuvalde inceleyin. Çıktılar İstenen bileşenleri içeren yalıtılmış tuval rotası veya giriş noktası. Başlamadan önce Önizlemeyi çalıştırmak için tuval, bileşen kaynağını, hook'larını veya stilini değiştirmemelidir.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Gerçek UI bileşenlerini ve varyantlarını kaydırılabilir, yakınlaştırılabilir bir tuvalde inceleyin

Mevcut bileşenler için yalıtılmış bir tuval oluşturun, desteklenen varyantları karşılaştırın; gerçek klavye, portal ve giriş davranışını koruyun.

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

Çalışma Yaklaşımı

Component Canvas, projede zaten bulunan bileşenlerin çevresinde tam ekran bir inceleme alanı oluşturur. Desteklenen varyantları ve yararlı durumları gruplayarak tasarımcıların bir bakışta karşılaştırmasını, ardından gerçek kontrollerle etkileşmesini sağlar. Kaynak, bileşen uygulamasını tuvalden bağımsız tutar.

İş akışı karşılaştırmanın anlamını özellikle netleştirir. Boyut karşılaştırmasında metin, stil ve veri sabit kalır; stil karşılaştırmasında yalnızca stil değişir. Yerel portalları, odağı ve iç içe kaydırmayı da korur; dolayısıyla yararlı bir önizleme yalnızca varsayılan durumun ekran görüntüsünde değil, kullanım sırasında da çalışmalıdır.

Beklenen Çıktılar

  • İstenen bileşenleri içeren yalıtılmış tuval rotası veya giriş noktası.
  • Kapsam listesi kaydedilmiş, eksikleri açıklanmış adlandırılmış varyant grupları.
  • Değişen dosyalar, çalıştırılan kontroller, kararlar ve test edilmemiş davranışlar raporu.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    Güvenli tek örnek bağlayın

    Bileşenlerin genel API'lerini ve proje kurallarını okuyun. Tek bileşeni bağlamadan önce gerçek yazmaları önlemek için test verileri, mock'lar veya mevcut callback'leri kullanın.

  2. 02
    Karşılaştırılabilir gruplar kurun

    Desteklenen varyantları tutarlı gruplara ekleyin. Her seferinde tek karşılaştırma boyutunu değiştirin; bileşenin gerçek devre dışı, odak ve etkileşim davranışını koruyun.

  3. 03
    Bileşenlerin çevresindeki tuvali doğrulayın

    İç içe kaydırma ve yerel portal davranışının yanında kaydırma, yakınlaştırma, ekrana sığdırma ve klavye gezinmesini test edin. Yalnızca kamerayı kalıcılaştırın ve sıfırlamanın önizleme durumunu koruduğunu doğrulayın.

02 Kullanım Alanları

Ne zaman kullanılır

Önizlemeyi çalıştırmak için tuval, bileşen kaynağını, hook'larını veya stilini değiştirmemelidir.

İyi Bir Uyum

  • Varyant incelemesiDüğme, giriş veya diğer mevcut bileşenleri gerçek genel API'leriyle karşılaştırın.
  • Bileşen incelemesiÜretim uygulamasını değiştirmeden tasarımcılara desteklenen durumları deneyecekleri bir alan sağlayın.

Kontrol Edilecek Sınırlar

  • Salt okunur bileşen sözleşmesiÖnizlemeyi çalıştırmak için tuval, bileşen kaynağını, hook'larını veya stilini değiştirmemelidir.
  • Sınırlı çalışma alanıGruplar sürüklenemez; tuvalin düzenleme geçmişi veya geri al/yinele özelliği yoktur.
  • Güvenli test verileriÜretim çağrıları ve yazmaları güvenle yalıtılamıyorsa canlı örnek dışarıda bırakılır.

Bu Girdileri Getirin

  • Bileşen kapsamıDâhil edilecek bileşenleri ve genel varyantları adlandırın.
  • Test örneği hazırlığıEtkileşimli örnekler için güvenli veri, provider ve callback'ler sağlayın.
  • Proje kurallarıMevcut rotaları, tema API'lerini, bağımlılıkları ve erişim kontrollerini kullanın.

03 Önemli Kararlar

Önemli kararlar

  1. Gerçek davranış

    Örnekler yerel işaretçi ve klavye etkileşimine yanıt verir.

  2. Adil karşılaştırmalar

    Diğer özellikleri sabit tutmak, varyantın gerçekte neyi değiştirdiğini gösterir.

  3. Sınırlandırılmış uygulama

    Kamera ve yerleşim mantığı bileşen kaynağından ayrı kalır.

04 Örnek Görev Tanımı

Odaklı bir brief deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kaynağı ve kurulumu inceleyin

Dâhil edilecek bileşenleri ve genel varyantları adlandırın.

Üst Kaynak Dosyası
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md

Aşağıdaki referans, özgün talimatları açar. Kullanmadan önce depo kurulumunu inceleyin; bu bir kurulum komutu değildir.

Tek bir çıktıyla başlayın

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif
Mevcut Button, Select ve Dialog bileşenlerimizi incelemek için component-canvas kullan. Genel API'lerini oku ve test verileriyle desteklenen adlandırılmış varyantları göster. Etiketleri ve diğer ayarları sabit tutarak her seferinde tek özelliği karşılaştır. Bileşen kaynağını değiştirme ve mevcut tema provider'ını kullan. Güvenli tek örnekle başla, sonra kalan grupları ekle. Birden fazla yakınlaştırma düzeyinde klavye girişini, odağı, iç içe kaydırmayı ve portal yerleşimini doğrula. Atlanan durumları ve bulunmayan cihazlar gerektiren kontrolleri raporla.

Sonucu inceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Bileşen kaynak diff'i boştur ve test örnekleri gerçek yazma yapmaz.
  • Portal hizası, odak ve yerel giriş yakınlaştırma altında kullanılabilir kalır.
  • Kamera konumu yeniden yüklemede geri gelir; sıfırlama mevcut önizleme durumunu korur. Yeniden yüklenen taslaklar garanti edilmez, depolama hatalarında güvenli alternatife dönülür.

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

OpenDesign İndirHızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
ibelick
Depo
ibelick/ui-skills
Skill Dosyası
SKILL.md
Lisans
MIT
İncelenen Sürüm
2026-11-02 · 4907a526b079
Editoryal Kaynak Özeti
Gerçek UI bileşenlerini ve varyantlarını kaydırılabilir, yakınlaştırılabilir bir tuvalde inceleyin.

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

06 Başlamadan Önce Sorular

Başlamadan önce sorular

Bileşen gruplarını sürükleyebilir miyim?

Kaynak grupları açıkça sabit tutar. Kaydırma ve yakınlaştırma bunun yerine kamerayı hareket ettirir.

Eksik bileşen varyantları uydurur mu?

Hayır. Desteği taklit etmek için bileşeni değiştirmek yerine genel API'yi okur ve atlanan durumları listeler.

Yeniden yüklemeden sonra ne kalır?

Öngörülen kalıcı kayıt kamerayı saklar. Ayrı istenmedikçe önizleme taslaklarının yeniden yüklemede korunması gerekmez.

OpenDesign

Brief'inizi ve tasarım çalışmanızı bir arada tutun.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndirTasarım Skill'lerine Göz At
Üst Kaynak Dosyası
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md