102.3K+İndir
Kullanım kılavuzuna geç
Component Specyazan Owl-Listener

Component Spec Skill.

Bir bileşeni, görünümü kadar davranışını da dikkatle açıklayarak uygulanabilir hale getirin.

  • Tasarım Sistemleri
  • Spesifikasyonlar
OpenDesign Dosyasını İndirKullanım Kılavuzunu Görüntüle
Kaynak İncelemesi · Component SpecSKILL.md
Görev Tasarım Sistemleri Çıktılar • Anatomi ve varyant spesifikasyonu • Tür, varsayılan değer ve zorunluluk durumunu içeren bir prop tablosu • Durum, davranış, erişilebilirlik ve kullanım kuralları Başlamadan Önce Bileşenin amacını, görsel varyantlarını ve hedef platformu belirtin. Çıktı, uygulama ve test için bir spesifikasyondur; uygulanmış bir bileşen değildir.
Editoryal özet · incelenen kaynak 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Component Spec: Tek Bir Kütüphane Bileşenini Tanımlayın

Anatomi, API, varyantlar, etkileşim durumları, erişilebilirlik ve kullanımı kapsayan tek bileşenlik bir sözleşme.

Kaynağa dayalı iş akışıÇalıştırma performansı ölçümü değildir

Çalışma Yaklaşımı

Component Spec tek bir tasarım sistemi bileşenini tanımlar. Devri anatomi, varyantlar, API özellikleri, etkileşim durumları, duyarlı davranış, erişilebilirlik ve kullanım etrafında düzenler. Zorunlu ve isteğe bağlı parçalar açıkça belirtilir.

Amacı, tasarımcılar ile geliştiriciler arasında mutabakat sağlamaktır. Bir düğmenin yüklenme davranışı veya bir diyaloğun odak dönüşü statik bir ekran görüntüsüyle aktarılamaz. Bu nedenle kaynak örnekler ve uç durumlar ister; daha geniş dokümantasyon şablonlarını ve çok bileşenli kalıpları bu görevin dışında tutar.

Beklenen Çıktılar

  • Anatomi ve varyant spesifikasyonu
  • Tür, varsayılan değer ve zorunluluk durumunu içeren bir prop tablosu
  • Durum, davranış, erişilebilirlik ve kullanım kuralları
Örnek Brief'e Bakın

Brief'ten İncelemeye

  1. 01
    Bileşenin Sınırını Belirleyin

    Amacını, ne zaman kullanılacağını ve zorunlu ile isteğe bağlı parçaları tanımlayın.

  2. 02
    API ve Durumları Belirtin

    Özellikleri ve varyantları adlandırın, ardından varsayılan, odak, devre dışı, yükleniyor ve ilgili hata davranışlarını açıklayın.

  3. 03
    Etkileşim Ayrıntılarını Netleştirin

    Klavye, odak, duyarlı ve uç durum davranışlarını, uygulamanın kontrol edebileceği örneklerle belgeleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Bileşenin amacını, görsel varyantlarını ve hedef platformu belirtin. Çıktı, uygulama ve test için bir spesifikasyondur; uygulanmış bir bileşen değildir.

Uygun Durumlar

  • Yeni Bir Kütüphane BileşeniBirden fazla ekip aynı kontrolün birbiriyle yarışan sürümlerini geliştirmeden önce kullanın.
  • Belirsiz Bir DevirVaryantlar arasında neyin değiştiğini ve durum geçişlerinin nasıl davrandığını netleştirin.

Kontrol Edilecek Sınırlar

  • Kütüphanenin Tamamı DeğildirKapsam, tam bir tasarım sistemi mimarisi değil, tek bir bileşendir.
  • Spesifikasyon Uygulama DeğildirYazılı bir erişilebilirlik kuralının yine de uygulanması ve test edilmesi gerekir.

Bu Girdileri Hazırlayın

  • Bileşenin AmacıKullanıcı görevini ve ilgili kontrolleri belirtin.
  • Mevcut ÖrneklerGörsel varyantları ve mevcut davranışı sağlayın.
  • Platform SözleşmesiFramework'ü, girdi yöntemlerini ve erişilebilirlik beklentilerini belirtin.

03 Önemli Kararlar

Önemli Kararlar

  1. Davranış Birinci Sınıf Öğedir

    Durumlar ve geçişler, geliştiricinin tahminine bırakılmaz; devrin parçası olur.

  2. Ortak Sözlük

    Prop adları ve anatomi etiketleri tasarım kararlarını uygulamayla bağlar.

04 Örnek Görev Tanımı

Odaklı Bir Brief Deneyin

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

Kurulumu İnceleyin

Bu görevin SKILL.md dosyasını designer-skills deposundan, ajanınızın desteklediği skill konumuna yükleyin. Giriş dosyası evrensel bir kurulum komutu belirlemez.

Kaynak Dosya
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/component-spec/SKILL.md

Bileşenin amacını, görsel varyantlarını ve hedef platformu belirtin. Çıktı, uygulama ve test için bir spesifikasyondur; uygulanmış bir bileşen değildir.

Tek Bir Çıktıyla Başlayın

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

Örnek Brief
Asenkron gönder düğmemizi belgelemek için component-spec kullan. Anatomiyi, boyutları, prop'ları, odak, yüklenme, devre dışı ve hata davranışını belirt. Tekrarlanan tıklamaları ve klavyeyle etkinleştirmeyi açıkla; bunun yerine ne zaman bağlantı kullanılması gerektiğini de ekle. Bileşenin zaten uygulandığını iddia etme.

Sonucu İnceleyin

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

  • Özelliklerin açık varsayılan değerleri ve zorunlulukları vardır.
  • İlgili her durum için bir davranış örneği vardır.
  • Klavye ve odak beklentileri test edilebilir.

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 Dosyasını İndirHızlı Başlangıcı Okuyun

05 Kaynak ve Lisans

Kaynak ve Lisans

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

Kaynak Sahibi
Owl-Listener
Depo
Owl-Listener/designer-skills
Skill Dosyası
design-systems/skills/component-spec/SKILL.md
Lisans
MIT
İncelenen Sürüm
2026-10-07 · 9a6930cf84a8
Editoryal Kaynak Özeti
Anatomi, API, varyantlar, etkileşim durumları, erişilebilirlik ve kullanımı kapsayan tek bileşenlik bir sözleşme.

Bağlantısı verilen 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 Sık Sorulan Sorular

Üretim kodu üretir mi?

Geliştiricilerin uygulayabileceği bir spesifikasyon üretmek için tasarlanmıştır. Bileşeni geliştirmek ve test etmek ayrı adımlardır.

Erişilebilirliği içerir mi?

Evet. Roller, klavye gezintisi, ekran okuyucu davranışı ve odak yönetimi açık bölümlerdir.

Bir kalıp kütüphanesinden farkı nedir?

Tek bir bileşeni tanımlar; kalıp ise daha geniş bir problem-çözüm düzenini anlatır.

OpenDesign

Bir Sonraki Tasarım Yinelemesine Yer Açın.

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

OpenDesign Dosyasını İndirTasarım Skill'lerine Göz Atın
Kaynak Dosya
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/component-spec/SKILL.md