responsive-designyazan Seth Hobson

Responsive Design Skill.

Claude Code ve Codex için UI tasarım skill'i: container query'leri, akıcı tipografi, CSS Grid ve mobile-first breakpoint'lerle duyarlı düzenler.

Web & UI
UI kodu

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

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

--- name: responsive-design description: Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

Üst akış dosyasından 2026-09-14 tarihinde okunan ön bilgi ve bölüm başlıkları · tam metinde 1.989 karakter

01 Ne yapar

responsive-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

Bu skill, container query'ler, akışkan tipografi, CSS Grid ve mobile-first breakpoint stratejileri kullanarak modern responsive layout'ları uygular. Bileşen düzeyinde responsive'liği, akışkan tipografi ve boşluk ölçeklerini, CSS Grid ve Flexbox ile karmaşık layout'ları ve tasarım sistemleri için breakpoint stratejilerini kapsar. Skill, responsive görseller ve medyayı, adaptif navigasyon desenlerini ve responsive tabloları ve veri gösterimlerini ele alır.

Mobile-first geliştirmeyi, cihaz tabanlı olanlar yerine içerik tabanlı breakpoint'leri ve bileşen düzeyinde adaptasyon için container query'leri vurgular. Skill, dokunma hedefleri, uluslararasılaştırma için mantıksal özellikler ve görsel işleme ile lazy loading yoluyla performans optimizasyonu konusunda rehberlik içerir.

UI kodu

Örnek istemi görün ↗

Nasıl Çalışır

01
Mobile-first başlayın
Desktop'tan aşağıya çalışmak yerine, temel olarak mobil stillerle başlayın, ardından daha büyük ekranlar için kademeli olarak geliştirin.
02
İçerik tabanlı breakpoint'ler belirleyin
Breakpoint'leri belirli cihaz boyutlarına göre değil, içeriğin yeniden akması gereken noktalara göre tanımlayın.

02 Uyumunuzu bulun

responsive-design Skill Ne Zaman Kullanılır

Bu tür bir UI tasarımı işi olduğunda Claude Code veya Codex'te responsive-design skill'ini kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

Mobil öncelikli duyarlı düzenler uygulama
Bileşen tabanlı duyarlılık için container sorguları kullanma
Akışkan tipografi ve boşluk ölçekleri oluşturma
Tasarım sistemleri için kesme noktası stratejileri tasarlama
Responsive tablolar ve veri gösterimleri oluşturma

03 Skill'in içinde

responsive-design Skill'inin Claude Code ve Codex'e Verdiği Kurallar

1 ajan için SKILL.md'nin belirlediği somut talimatlar, varsayılanlar ve sınırlar — sonucu değiştiren kısım budur.

Optimize Edin ve Lazy Load Uygulayın
Görselleri performans için optimize edin ve başlangıçta ekran dışında görünen içeriği lazy load ile yükleyin.

04 İşe koyun

Claude Code veya Codex'te responsive-design'ı yükleyin

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

Claude Code, Codex veya Ajanınıza responsive-design Ekleyin

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

Terminal

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

plugins/ui-design/skills/responsive-design/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

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 responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

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

İlk Sonucu Kontrol Edin

Çıktıyı kabul etmeden önce, transkript ve dosyalarda bunları arayın:

Sonuç, bu skill için katalog listelerinin gösterdiği gibi, UI kodu olarak teslim edilir.
Ajan sonucu üretmeden önce planında veya transkriptinde responsive-design skill'ini adlandırır.
Kendi içeriğiniz, isimleriniz ve numaralarınız çıktıda değişmeden görünür.

OpenDesign'da responsive-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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/responsive-design/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 Bu katalogda 18 skill içeren wshobson/agents deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. responsive-design için derecelendirme veya kullanım sayısı değil.
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ırMobil öncelikli düzenler, konteyner sorguları, akışkan tipografi ve duyarlı veri gösterimleri dahil sekiz senaryoyu listeler
Detaylı desenler ve işlenmiş örneklerGerektiğinde daha derin desen belgelendirmesi için references/details.md'ye yönlendirir
En İyi UygulamalarMobil öncelikli yaklaşım, içerik kırılma noktaları, akışkan değerler, konteyner sorguları ve performans dahil sekiz temel ilke
Yaygın SorunlarYatay taşma, sabit genişlikler, viewport yüksekliği ve dokunma hedefi boyutlandırması gibi yedi sık görülen sorun

Skill'in Kendi Açıklaması

"Container sorguları, akışkan tipografi, CSS Grid ve mobil öncelikli kırılma noktası stratejileri kullanarak modern duyarlı düzenler uygulayın. Uyarlanabilir arayüzler oluştururken, akışkan düzenler uygularken veya bileşen düzeyinde duyarlı davranış oluştururken kullanın."

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

Responsive Design

responsive-design'ı Gerçek Bir UI Tasarım Görevinde Çalıştırın.

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

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