frontend-ui-engineeringyazan Addy Osmani

Frontend UI Engineering Skill.

Claude Code ve Codex için UI tasarım skill'i: üretim kalitesinde, erişilebilir, duyarlı kullanıcıya yönelik arayüzler oluşturur.

Web & UI
UI kodu

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

addyosmani/agent-skills · skills/frontend-ui-engineering/SKILL.mdSKILL.md

--- name: frontend-ui-engineering description: Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated. --- ## When to Use ## Component Architecture ## State Management ## Design System Adherence ## Accessibility (WCAG 2.1 AA) ## Responsive Design

Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okunmuştur · toplamda 10.679 karakter

01 Ne yapar

frontend-ui-engineering Skill'inin Claude Code ve Codex İçinde Yaptığı İşler

Ö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

Erişilebilir, performanslı ve görsel olarak cilalı, üretim kalitesinde kullanıcı arayüzleri oluşturur. Skill, üst düzey bir şirkette tasarım bilincine sahip bir mühendis tarafından yapılmış gibi görünen UI oluşturmaya odaklanır — bir AI tarafından üretilmiş gibi değil. Gerçek bir tasarım sistemine uyumu, uygun WCAG 2.1 AA erişilebilirliğini, düşünülmüş etkileşim kalıplarını zorunlu kılar ve genel AI estetiği kliselerinden kaçınır.

Skill; birlikte konumlandırma (colocation) ile bileşen mimarisini, yapılandırma yerine kompozisyonu, yerel useState'ten global store'lara kadar durum yönetimini, belirli kırılma noktalarında test edilen mobil öncelikli duyarlı tasarımı, klavye ile gezinmeyi, ARIA etiketlerini, odak yönetimini, anlamlı boş ve hata durumlarını, iskelet (skeleton) yükleme durumlarını ve algılanan hız için optimistic güncellemeleri kapsar.

Neler üretir

Yüklenmekte olan içerik için aria-busy ve aria-label içeren iskelet (skeleton) yükleme durumları
role="status", açıklayıcı metin, simgeler ve uygulanabilir sonraki adımlarla anlamlı boş ve hata durumları

Örnek istemi görün ↗

Nasıl Çalışır

01
Bileşen Dosyalarını Bir Arada Konumlandırın
Bileşen uygulamasını, testleri, story'leri, özel hook'ları ve tipleri bileşenin adını taşıyan tek bir klasörde birlikte tutun.
02
Bileşenleri Yapılandırmak Yerine Birleştirin (Compose)
Prop'larla dolu yapılandırma nesneleri yerine iç içe children ile birleştirilebilir bileşen API'leri oluşturun.
03
Veri Çekmeyi Sunumdan Ayırın
Veri yüklemeyi, hataları ve boş durumları ele alan container bileşenler oluşturun, ardından sunum bileşenlerine temiz veri geçirin.
04
Durum Yönetimini Kapsama Göre Seçin
Bileşene özgü UI durumu için useState, 2-3 kardeş bileşen için yukarı taşınmış (lifted) state, tema/kimlik doğrulama/dil için Context, filtreler ve sayfalama için URL durumu, uzak veri için sunucu durumu kitaplıkları ve karmaşık paylaşılan istemci durumu için global store'lar kullanın.
05
Tasarım Sistemi Token'larını Takip Edin
Ham hex değerleri yerine text-primary ve bg-surface gibi anlamsal renk token'ları kullanın, 0,25rem artışlarla tutarlı bir boşluk ölçeği koruyun ve tip hiyerarşisine uyun.
06
WCAG 2.1 AA Erişilebilirliğini Uygulayın
Her etkileşimli öğeyi klavyeyle erişilebilir hale getirin, etiketsiz kontrollere ARIA etiketleri ekleyin, içerik değiştiğinde odağı yönetin, normal metin için 4,5:1 kontrast sağlayın ve anlamlı boş ve hata durumları sunun.

02 Uyumunuzu bulun

frontend-ui-engineering Skill Ne Zaman Kullanılır

Bu tür UI tasarımı işleri için Claude Code veya Codex'te frontend-ui-engineering skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Yeni UI bileşenleri veya sayfalar oluşturma
Mevcut kullanıcı arayüzlerini değiştirme
Duyarlı düzenler uygulama
Etkileşim veya durum yönetimi ekleme
Görsel veya UX sorunlarını düzeltme

Sınırları Bilin

Daha sonra yeniden yazılacağı beklentisiyle prototip oluşturmak
Tasarım kesinleşmediği için stillendirmeyi atlamak
Duyarlı tasarımı sonraki bir aşamaya bırakma
Erişilebilirliği isteğe bağlı veya olsa iyi olur olarak görme

Ne Sağlamalısınız

Gerçekçi yer tutucu içerikLorem ipsum'un gizlediği düzen sorunlarını (uzunluk, satır kaydırma, taşma) ortaya çıkaracak gerçek içerik veya gerçekçi örnekler

03 Skill'in içinde

frontend-ui-engineering Skill'in Claude Code ve Codex'e Verdiği Kurallar

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

Yapay Zeka Estetiği Kalıplarından Kaçının
Her yerde mor/indigo, aşırı gradyan, her şeyde rounded-2xl, jenerik hero bölümleri, lorem ipsum metin, her yerde aşırı büyük dolgu, standart kart ızgaraları veya gölge yoğun tasarım kullanmayın.
Prop Aktarımı 3 Seviyeden Daha Derin Olmasın
Props'ları kullanmayan bileşenler üzerinden geçiriyorsanız, context tanıtın veya bileşen ağacını yeniden yapılandırın.
Tutarlı Boşluk Ölçeği Kullanın
Ölçekteki boşlukları 0,25rem artışlarla uygulayın (veya projenin kullandığı birimle). Ölçekte olmayan 13px veya 2,3rem gibi değerler icat etmeyin.
Başlık Seviyelerini Atlamayın
h1'den (sayfa başlığı, sayfa başına bir) h2'ye (bölüm) ve h3'e (alt bölüm) kadar anlamsal başlık hiyerarşisini koruyun. Başlık olmayan içerik için başlık stilleri kullanmayın.
Her Etkileşimli Öğe Klavyeyle Erişilebilir Olmalı
button gibi doğal odaklanabilir öğeler kullanın. div üzerinde onClick kullanmanız gerekiyorsa role="button", tabIndex={0} ve Enter ile Space için onKeyDown/onKeyUp işleyicileri ekleyin.
Önce Mobil için Tasarlayın
Önce mobil kesme noktaları için tasarlayın, ardından daha büyük ekranlara genişletin. 320px, 768px, 1024px ve 1440px'de test edin.
Spinner Değil, İskelet Yükleme Kullanın
İçerik yüklenirken aria-busy ve aria-label ile iskelet durumları gösterin. Algılanan hızı artırmak için optimistic güncellemeler uygulayın.
Bileşenler 200 Satırı Aşmamalı
200 satırı aşan bileşenleri daha küçük, odaklı birimlere bölün.

04 İşe koyun

frontend-ui-engineering'i Claude Code veya Codex'e Yükleyin

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

frontend-ui-engineering'i 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/addyosmani/agent-skills --skill frontend-ui-engineering

skills/frontend-ui-engineering/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 TaskList component for [project name] that displays a list of tasks with checkboxes to mark them complete and delete buttons. The component should handle loading, error, and empty states. It should be keyboard accessible, meet WCAG 2.1 AA standards, work responsively from 320px to 1440px, and follow the design system's spacing scale and color tokens. Include a container component that fetches tasks using React Query and a presentation component that receives clean data.

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:

Bileşen konsol hatası vermeden render oluyor
Tüm etkileşimli öğeler sayfada Tab tuşuyla gezinerek klavyeyle erişilebilir
Ekran okuyucu sayfanın içeriğini ve yapısını aktarabiliyor
Duyarlı düzen 320px, 768px, 1024px ve 1440px kesme noktalarında çalışıyor
Yükleniyor, hata ve boş durumların tümü ele alınıyor
Dev tools veya axe-core'da erişilebilirlik uyarısı yok

OpenDesign'da frontend-ui-engineering'i 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: Addy Osmani
Repository: github.com/addyosmani/agent-skills Dal main
Skill dosyası: skills/frontend-ui-engineering/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit be4e44a
License: MIT LICENSE dosyasından.
Repository yıldızları: 94.139 GitHub anlık görüntüsü tüm addyosmani/agent-skills deposu için 2026-09-14 tarihinde alındı. frontend-ui-engineering için bir derecelendirme 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

Genel BakışHedef, yapay zeka tarafından üretilmiş gibi görünmeyen, tasarım bilincine sahip, üretim kalitesinde bir UI'dır
Ne Zaman KullanılırUI bileşenleri, sayfalar, düzenler, etkileşimlilik, durum oluşturma veya değiştirme ya da görsel sorunları düzeltme
Bileşen MimarisiDosyaları bir arada tutun, yapılandırma yerine kompozisyonu tercih edin, bileşenleri odaklı tutun, veriyi sunumdan ayırın
Durum YönetimiEn basit yaklaşımı seçin: yerel durum, yukarı taşınmış durum, context, URL durumu, sunucu durumu veya global store
Design System'e UyumYapay zeka estetik kalıplarından kaçının, tutarlı bir boşluk ölçeği kullanın, tipografi hiyerarşisine uyun, semantik renk token'ları kullanın
Erişilebilirlik (WCAG 2.1 AA)Klavye navigasyonu, ARIA etiketleri, odak yönetimi, anlamlı boş ve hata durumları gereklidir
Duyarlı TasarımMobile-first yaklaşım, 320px, 768px, 1024px, 1440px kırılma noktalarında test edin
Yükleme ve GeçişlerSpinner değil skeleton yükleme kullanın, algılanan hız için optimistic güncellemeler uygulayın
Yaygın GerekçelendirmelerErişilebilirliği, duyarlı tasarımı, stillendirmeyi geciktiren veya yapay zeka estetiğini kabul eden argümanlara karşı çıkar
Uyarı İşaretleri200 satırı geçen bileşenler, satır içi stiller, eksik durumlar, klavye testi yapılmaması, sadece renge dayalı göstergeler, yapay zeka görünümü
DoğrulamaRender, klavye erişimi, ekran okuyucu, duyarlılık, durumlar, design system, erişilebilirlik araçları için kontrol listesi

Skill'in Kendi Açıklaması

"Üretime hazır, erişilebilir, duyarlı kullanıcı arayüzleri oluşturur. Arayüz ve sayfa oluştururken veya değiştirirken, bileşen oluştururken, düzen uygularken, WCAG erişilebilirlik gereksinimlerini karşılarken, durum yönetirken veya çıktının yapay zeka üretimi yerine üretime hazır görünmesi ve hissetmesi gerektiğinde kullanın."

SKILL.md dosyasındaki ön bilgi açıklaması. Dosyanın tamamı yaklaşık 10.679 karakterdir. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

frontend-ui-engineering Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Context'i mi yoksa Zustand gibi bir global store'u mu ne zaman kullanmalıyım?

Tema, kimlik doğrulama ve dil gibi çok okunan, az yazılan veriler için Context kullanın. Uygulama genelinde paylaşılan karmaşık istemci durumu için Zustand veya Redux gibi bir global store kullanın.

Sadece 2-3 kardeş bileşen arasında durum paylaşıyorsanız, durumu ortak üst bileşene taşıyın. Context ekleyerek veya bileşen ağacını yeniden yapılandırarak prop drilling'in 3 seviyeden daha derine gitmesinden kaçının.

Frontend UI Mühendisliği

frontend-ui-engineering'i gerçek bir UI tasarım görevinde çalıştırın.

OpenDesign'ı indirin, frontend-ui-engineering'i 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

Terminal

npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering

frontend-ui-engineering Skill'inin Claude Code ve Codex İçinde Yaptığı İşler

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

frontend-ui-engineering Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

frontend-ui-engineering Skill'in Claude Code ve Codex'e Verdiği Kurallar

Yapay Zeka Estetiği Kalıplarından Kaçının

Prop Aktarımı 3 Seviyeden Daha Derin Olmasın

Tutarlı Boşluk Ölçeği Kullanın

Başlık Seviyelerini Atlamayın

Her Etkileşimli Öğe Klavyeyle Erişilebilir Olmalı

Önce Mobil için Tasarlayın

Spinner Değil, İskelet Yükleme Kullanın

Bileşenler 200 Satırı Aşmamalı