106.9K+İndir
Kullanım kılavuzuna geç
Building Componentsyazan vercel

Building Components Skill'i.

Erişilebilirliği ve dağıtımı gözeten, yeniden kullanılabilir UI bileşen API'leri tasarlayın.

  • Bileşen API'leri
  • Erişilebilirlik
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · building-componentsSKILL.md
Görev Erişilebilirliği ve dağıtımı gözeten, yeniden kullanılabilir UI bileşen API'leri tasarlayın. Çıktılar Uygulama isteğinde, açık bir bileşim ve durum modeline sahip bileşen. Başlamadan önce Kısa SKILL.md, ayrıntılı uygulama rehberi için beraberindeki referanslara bağımlıdır.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Erişilebilirliği ve dağıtımı gözeten, yeniden kullanılabilir UI bileşen API'leri tasarlayın

Vercel'in Building Components skill'iyle erişilebilir bileşen API'leri, kontrollü durum, stiller, token'lar ve dağıtım planlayın.

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

Çalışma Yaklaşımı

Building Components, yeniden kullanılabilir bir UI kütüphanesinin mühendislik kararlarına rehberlik eder. Agent'ı bileşim, klavye davranışı, durum yönetimi, TypeScript arayüzleri ve stil için odaklı kaynaklara yönlendirir. Giriş belgesi; primitive, bileşen, blok ve şablon düzeylerini kapsar, böylece soyutlama düzeyi gerçek çıktıya uyabilir.

Tek bir ekran yerine birden fazla tüketiciye hizmet etmesi gereken bileşenler için yararlıdır. API biçimini, erişilebilirliği ve dağıtımı aynı tartışmada ele alır. Kaynak ağırlıklı olarak bir referans dizinidir: bağlantılı dosyalar çalışan skill'in parçasıdır ve giriş dosyasına eşlik etmelidir.

Beklenen Çıktılar

  • Uygulama isteğinde, açık bir bileşim ve durum modeline sahip bileşen.
  • Belgeleme isteğinde, bileşen API'sini ve ilgili davranışı kapsayan kullanım rehberi.
  • İstek dağıtımı içeriyorsa uygun bir paketleme veya registry planı.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    Bileşen sözleşmesini tanımlayın

    Görevin primitive, bileşen, blok veya şablonla mı ilgili olduğunu belirleyin. Genel arayüzü ve çağıranların onu birleştireceği bağlamları tanımlayın.

  2. 02
    İlgili mühendislik rehberini okuyun

    Kontrollü ve kontrolsüz davranış için state.mdx, genel bileşim modeli için composition.mdx, klavye ve odak gereksinimleri için accessibility.mdx okuyun. Uygulamada types.mdx ve styling.mdx kaynaklarına başvurun. polymorphism veya as-child referanslarını yalnızca çağıranların bu API kalıplarına ihtiyacı varsa ekleyin.

  3. 03
    API'yi uygulayıp belgeleyin

    Durum ile sunumu seçilen API üzerinden bağlayın. Amaçlanan kullanımı açıklayın; npm, registry veya belgelenmiş başka dağıtım yolunu yalnızca gerektiğinde seçin.

02 Kullanım Alanları

Ne zaman kullanılır

Kısa SKILL.md, ayrıntılı uygulama rehberi için beraberindeki referanslara bağımlıdır.

İyi Bir Uyum

  • Paylaşılan bileşen API'leriBirden çok ekip benimsemeden önce paylaşılan bileşenin genel API'si düşünülerek tasarlanmalıdır.
  • Kütüphane mühendisliğiBir UI kütüphanesi tutarlı erişilebilirlik, temalandırma ve belgeleme uygulamalarına ihtiyaç duyar.

Kontrol Edilecek Sınırlar

  • Beraberindeki referanslarKısa SKILL.md, ayrıntılı uygulama rehberi için beraberindeki referanslara bağımlıdır.
  • Doğrulama kapsamıGiriş dosyası bileşenin erişilebilirliğini onaylamaz veya her framework ile uyumluluğunu garanti etmez.

Bu Girdileri Getirin

  • Hedef tüketicilerBileşenin hedef tüketicileri ve kullanım örnekleri.
  • Depo kurallarıDeponun bileşen yığını, token sistemi ve TypeScript kuralları.
  • Davranış ve dağıtımGerekli klavye davranışı, durumun sahipliği ve dağıtım hedefi.

03 Önemli Kararlar

Önemli kararlar

  1. Açık durum sahipliği

    Kontrollü ve kontrolsüz durum, bilinçli API tercihlerine dönüşür.

  2. Bileşim tercihleri

    Referanslar, genel bileşen API'sini birleştirmek için slots, render props ve as-child kalıplarını kapsar.

  3. Dağıtım planlaması

    Yayınlama ve belgeleme, uygulamayla birlikte değerlendirilir.

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

Bileşenin hedef tüketicileri ve kullanım örnekleri.

Üst Kaynak Dosyası
https://github.com/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/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
React bileşen kütüphanemiz için yeniden kullanılabilir bir açılır-kapanır içerik bileşeni tasarlamak üzere building-components kullan. Önce mevcut primitive'lerimizi, token'larımızı ve TypeScript kalıplarımızı incele. Uygulamadan önce kontrollü ve kontrolsüz durumu içeren genel API'yi öner. İlgili bileşim, erişilebilirlik ve durum referanslarını oku. Klavye etkileşimini ve odak davranışını kapsa, tetikleyici ile içeriği birleştirme örnekleri ver ve mevcut token'larımızla stilleri belgele. Mevcut görev açıkça bir sürüm yayınlamayı içermiyorsa registry veya npm yayınını ayrı bir öneri olarak bırak.

Sonucu inceleyin

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

  • Kullanım örnekleri özel iç ayrıntıları değil, belgelenmiş genel API'yi kullanır.
  • Klavye, odak ve durum davranışları için açık doğrulama sonuçları bulunur.
  • Paketleme talimatları hedeflenen dağıtım kanalıyla uyumludur.

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
vercel
Depo
vercel/components.build
Skill Dosyası
SKILL.md
Lisans
Not confirmed
İncelenen Sürüm
2026-11-02 · ba7274504373

Okuma Notları

  1. Lisans kapsamıAynı sabitlenmiş revizyonda çelişen kaynak beyanları vardır: kök LICENSE açıkça Apache License 2.0 belirtirken README.md License bölümü MIT der ve aynı dosyaya bağlantı verir. skills/building-components altında yerel bir istisna yoktur. Koşulsuz bir MIT etiketi göstermeyin; çelişkinin çözülmesi için kaynak sahibinin açıklaması gerekir.
Editoryal Kaynak Özeti
Erişilebilirliği ve dağıtımı gözeten, yeniden kullanılabilir UI bileşen API'leri tasarlayın.

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

Bu skill hazır bir görsel tema sağlıyor mu?

Giriş noktası bileşen mühendisliğine odaklanır ve token ile stil referanslarına yönlendirir. Görsel gereksinimleri yine ürün belirler.

Her bileşen polimorfizm gerektirir mi?

Hayır. Polymorphism ve as-child, API ihtiyaç duyduğunda seçilebilen referans konularıdır.

Registry üzerinden dağıtıma yardımcı olabilir mi?

Evet. Registry dağıtımı, npm yayını ve bileşen pazar yerleri için ayrı bağlantılı referanslar vardır.

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/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/SKILL.md