web-component-designyazan Seth Hobson

Web Component Design Skill.

Claude Code ve Codex için bir UI tasarım skill'i: yeniden kullanılabilir React, Vue ve Svelte bileşen kalıpları ve kompozisyon stratejileri.

Web & UI
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

wshobson/agents · plugins/ui-design/skills/web-component-design/SKILL.mdSKILL.md

--- name: web-component-design description: Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems. --- ## When to Use This Skill ## Core Concepts ## Quick Start: React Component with Tailwind ## Framework Patterns ## Best Practices

Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okundu · Tam hali 7.475 karakter

01 Ne yapar

web-component-design Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Modern kompozisyon desenleri, CSS-in-JS çözümleri ve bileşen API tasarım ilkeleri kullanarak React, Vue ve Svelte genelinde yeniden kullanılabilir UI bileşenleri oluşturur. Compound bileşenler, render props, slot'lar ve React context, Vue composables, Svelte runes gibi framework'e özgü desenleri kapsar. Bileşen kütüphanelerine, design system'lere ve eski bileşenlerin yeniden düzenlenmesine uygulanır.

Semantik props, tek sorumluluk, ref forwarding ve controlled ile uncontrolled desenler arasındaki ayrımla varsayılan olarak erişilebilir bileşenlere odaklanır. class-variance-authority, Tailwind CSS ve kapsamlı stil yaklaşımlarıyla butonlar, akordeonlar, seçim kutuları ve sekmeler için somut uygulamalar içerir.

Neler üretir

class-variance-authority ve Tailwind CSS ile butonlar, akordeonlar, seçim kutuları, sekmeler ve kartları uygulayan design system bileşenleri.

Örnek istemi görün ↗

Nasıl Çalışır

01
Bir CSS-in-JS Yaklaşımı Seçin
Hızlı prototipleme için Tailwind CSS, kapsamlı stiller için CSS Modules, dinamik React stillendirmesi için styled-components, SSR uyumlu esneklik için Emotion veya sıfır çalışma zamanı performansı için Vanilla Extract arasından seçim yapın.
02
Bileşen API'sini Tasarlayın
loading yerine isLoading gibi semantik prop adları kullanın, mantıklı varsayılanlar sağlayın, children aracılığıyla kompozisyonu destekleyin ve className veya style props ile stil geçersiz kılmalarına izin verin.
03
Framework'e Özgü Desenleri Uygulayın
Compound bileşenler için React context, provide ve inject ile Vue 3 composables veya reaktif durum için $props ve $derived ile Svelte 5 runes kullanın.

02 Uyumunuzu bulun

web-component-design Skill'i Ne Zaman Kullanılır

Bu tür kullanıcı arayüzü tasarımı için Claude Code veya Codex'te web-component-design skill'ini kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

Bir ürün veya organizasyon genelinde tutarlı UI desenleri için yeniden kullanılabilir bileşen kitaplıkları veya design system tasarlama.
Bileşik bileşenler (compound components), render props veya esnek bileşen API'leri için slot gibi karmaşık bileşen kompozisyon desenlerini uygulama.
Bir kod tabanında tutarlı bileşen API'leri oluşturarak prop adlandırmasını, varsayılan değerleri ve stil kurallarını standartlaştırma.
Mevcut framework yeteneklerini ve kompozisyon stratejilerini kullanarak eski bileşenleri modern kalıplara dönüştürme.
Baştan itibaren ARIA desteği ve klavye navigasyonu ile erişilebilir, duyarlı UI bileşenleri oluşturma.

Sınırları Bilin

Kompozisyon desenlerine ihtiyaç olduğunu gösteren, çok fazla prop içeren bileşenler; tek bir karmaşık bileşen yerine bu desenler kullanılmalıdır.

03 Skill'in içinde

web-component-design Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md dosyasının ajan için belirlediği 3 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Mantıklı Varsayılanlar Sunun
Bileşen API'leri, buton örneğindeki defaultVariants'ta gösterildiği gibi, isteğe bağlı prop'lar için makul varsayılan değerler içermelidir.
Children Üzerinden Kompozisyonu Destekleme
Bileşenler, esnek kompozisyon ve yeniden kullanım kalıplarını mümkün kılmak için children prop'larını kabul etmelidir.
Stil Geçersiz Kılmalarına İzin Ver
Her bileşen, className veya style prop'ları aracılığıyla üst bileşenlerin stilleri geçersiz kılmasına izin vermelidir.

04 İşe koyun

web-component-design'ı Claude Code veya Codex'e kurun

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

web-component-design'ı Claude Code, Codex veya Ajanınıza ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/wshobson/agents --skill web-component-design

plugins/ui-design/skills/web-component-design/SKILL.md için genel skills CLI biçimi; depo kendi yolunu farklı belgelendirebilir.

Skill'e İlk UI Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Build a reusable Card component for our React design system that supports compound composition with Card.Header, Card.Content, and Card.Footer subcomponents. Use Tailwind CSS for styling with variants for different card sizes (sm, md, lg) and visual styles (default, outlined, elevated). Include forwardRef support and ensure the component is accessible with proper ARIA labels. Set md size and default style as the defaults.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Erişilebilirlik uyumluluğu için bileşenleri ekran okuyucularla test edin ve tam klavye navigasyonu desteğini doğrulayın.
Render performansını React DevTools ile profilleyin ve gereksiz yeniden render'ları önlemek için uygun yerlerde memoization uygulayın.

OpenDesign'de web-component-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill dosyası: plugins/ui-design/skills/web-component-design/SKILL.md İçerik kontrol toplamı doğrulama sırasında kaydedildi; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 GitHub anlık görüntüsü, 18 skill içeren tüm wshobson/agents reposu için 2026-09-14'te alındı. web-component-design için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Bu Skill Ne Zaman KullanılırBileşen kitaplıkları, kompozisyon desenleri, CSS-in-JS, erişilebilirlik ve yeniden yapılandırma dahil yedi senaryoyu listeler.
Temel KavramlarBileşim (composition) desenlerini, CSS-in-JS çözüm karşılaştırma tablosunu ve prop adlandırmasıyla bileşen API tasarım ilkelerini kapsar.
Hızlı Başlangıç: Tailwind ile React BileşeniforwardRef, class-variance-authority, variant'lar ve loading state içeren size prop'ları kullanılarak yapılan eksiksiz Button uygulaması.
Framework KalıplarıContext kullanan React compound Accordion, composables ve inject kullanan Vue 3 sekmeler, runes kullanan Svelte 5 buton.
En İyi UygulamalarTek sorumluluk, context kullanımı, erişilebilirlik varsayılanları, kontrollü desenler, ref yönlendirme ve memoization dahil yedi uygulama.
Yaygın SorunlarBeş tuzak: prop patlaması, stil çakışmaları, yeniden render zincirleri, erişilebilirlik boşlukları ve bundle boyutu endişeleri.

Skill'in Kendi Açıklaması

"CSS-in-JS, kompozisyon stratejileri ve yeniden kullanılabilir bileşen mimarisi dahil olmak üzere React, Vue ve Svelte bileşen kalıplarında uzmanlaşır. Kullanıcı arayüzü bileşen kütüphaneleri oluştururken, bileşen API'leri tasarlarken veya frontend tasarım sistemleri uygularken kullanın."

SKILL.md'den ön-bilgi açıklaması. Tam dosya yaklaşık 7.475 karakter. Tam dosyayı GitHub'da okuyun.

Web Component Design

web-component-design'ı gerçek bir UI tasarım görevinde çalıştırın.

OpenDesign'ı indirin, web-component-design'ı SKILL.md bağlantısından içe aktarın, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın