web-design-revieweryazan GitHub

Web Design Reviewer Skill.

Claude Code ve Codex için bir tasarım inceleme skill'i: çalışan bir web sitesini görsel olarak inceler ve yerleşim sorunlarını bulup düzeltir.

Tasarım İncelemesi & Erişilebilirlik
İnceleme raporu

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

github/awesome-copilot · skills/web-design-reviewer/SKILL.mdSKILL.md

--- name: web-design-reviewer description: This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level. --- ## Scope of Application ## Prerequisites ## Step 1: Information Gathering Phase ## Step 2: Visual Inspection Phase ## Step 3: Issue Fixing Phase ## Step 4: Re-verification Phase

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

01 Ne yapar

Claude Code ve Codex'te web-design-reviewer Skill'i 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

Web Design Reviewer, çalışan bir web sitesini bir tarayıcı otomasyon aracıyla yönlendirir, görsel olarak inceler ve bulduğu sorunları kaynak kodda onarır. Statik siteleri, React, Vue, Angular veya Svelte üzerindeki SPA'ları, Next.js ve Nuxt gibi full-stack framework'leri, WordPress ve Drupal gibi CMS platformlarını ve diğer tüm web uygulamalarını kapsar.

İş akışı dört aşamalıdır: bağlamı toplama ve framework ile stil yöntemini otomatik tespit etme, sayfaları görsel bir kontrol listesine göre inceleme, sorunları P1'den P3'e önceliklendirerek düzeltme, ardından yeniden doğrulama ve döngüye devam etme. Bulgular yerleşim, duyarlılık, erişilebilirlik ve görsel tutarlılık olarak gruplanır; her biri bir önem derecesiyle birlikte verilir. Düzeltmeler minimal değişiklik ilkelerini izler ve bir markdown inceleme raporuyla sonuçlanır.

Neler üretir

Web Design Review Results başlıklı bir markdown inceleme sonuçları raporu.
Hedef URL, tespit edilen framework, stil, test edilen görüntü alanları, tespit edilen sorunlar ve düzeltilen sorunları kapsayan bir özet tablo.
Öncelik, sayfa, öğe, açıklama, düzeltilen dosya yolu, düzeltme ayrıntıları ve öncesi/sonrası ekran görüntüleri taşıyan sorun başına girdiler.
Her sorunun neden bırakıldığını ve kullanıcı için önerilen bir eylemi veren, ayrıca genel önerileri içeren düzeltilmemiş sorunlar bölümü.

Örnek istemi görün ↗

Nasıl Çalışır

01
Bağlamı Topla ve Yığını Tespit Et
Hiçbiri verilmemişse URL'yi sorar, ardından package.json, tsconfig.json, tailwind.config, next.config, vite.config ve nuxt.config gibi çalışma alanı dosyalarından otomatik tespit dener ve kapsamda hangi sayfaların olduğunu sorar.
02
Gezin ve Yakala
Hedef URL'yi açar, ekran görüntüleri alır, mümkün olduğunda DOM yapısını veya anlık görüntüyü alır ve site navigasyonu üzerinden diğer sayfalara geçer.
03
Görsel Kontrol Listesine Göre İncele
Yerleşim, duyarlılık, erişilebilirlik ve görsel tutarlılık sorunları, bir referans kontrol listesi üzerinden çalışılarak kontrol edilir; bu liste düzeltmelerden sonra tekrar kullanılır.
04
Her Sorunun Kaynağını Bulun
Sorunlu öğelerin kaynağı, kod tabanında sınıf adları veya ID'ler aranarak, öğe metninden veya yapısından bileşen bulunarak ve stil, bileşen ve sayfa dosya kalıpları filtrelenerek izlenir.
05
Düzeltin, Sonra Yeniden Doğrulayın
Düzeltmeler, çerçeveye özgü rehberlik izlenerek uygulanır, ardından tarayıcı yeniden yüklenir veya dev sunucu HMR'si beklenir, düzeltilen alanların ekran görüntüleri yeniden alınır ve öncesi ile sonrası karşılaştırılır.

02 Uyumunuzu bulun

web-design-reviewer Skill Ne Zaman Kullanılır

Claude Code veya Codex'te bu tür tasarım incelemesi işleri için web-design-reviewer skill'ini kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

Düz HTML, CSS ve JS ile oluşturulmuş statik bir siteyi inceleme.
React, Vue, Angular veya Svelte üzerine kurulu tek sayfalık bir uygulamayı inceleme.
Next.js, Nuxt veya SvelteKit gibi tam yığın bir çerçeve uygulamasını inceleme.
WordPress veya Drupal kurulumu gibi CMS tabanlı bir siteyi inceleme.
Geliştirme sırasında http://localhost:3000 gibi bir adreste çalışan yerel geliştirme sunucusunu kontrol etme.

Sınırları Bilin

Üretim ortamları yalnızca salt okunur incelemeler için desteklenir, bu nedenle orada değişiklik uygulanamaz.
Düzeltmeler için proje kaynağının çalışma alanında bulunması gerekir, bu nedenle yerel kodu olmayan uzak bir site onarılamaz.
Kullanıcı onayı olmadan büyük ölçekli yeniden yapılandırma, yapılmaması gerekenler arasında açıkça belirtilmiştir.
Performansı göz ardı eden düzeltmeler bir anti-pattern olarak listelenmiştir.

Ne Sağlamalısınız

İncelenecek sitenin URL'siGezinme için gereklidir; kullanıcı bunu sağlamazsa, skill bunu örnek form olarak http://localhost:3000 ile sorar.
Çerçeve ve stil konumuSkill, hangi çerçevenin ve stil yönteminin kullanıldığını ve stil dosyalarının ile bileşenlerin nerede bulunduğunu sorar, böylece doğru düzenleme hedefini bulabilir.
İnceleme kapsamıKullanıcı, incelemenin yalnızca belirli sayfaları mı yoksa tüm siteyi mi kapsadığını belirtir.

03 Skill'in içinde

web-design-reviewer Skill'inin 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ı.

Üç Denemeden Sonra Durun
Skill bir yineleme sınırı belirler: belirli bir sorun 3'ten fazla düzeltme denemesi gerektiriyorsa, devam etmek yerine kullanıcıya danışılmalıdır.
Aynı Anda Bir Sorun
Her sorun, değişiklikleri toplu hale getirmek yerine tek tek düzeltilir ve devam etmeden önce doğrulanır.
Koda Dokunmadan Önce Ekran Görüntüsü Alın
Öncesi ve sonrası karşılaştırılabilsin diye, düzeltmeler yapılmadan önce bozuk durumun ekran görüntüleri her zaman kaydedilmelidir.
Sadece Minimum Değişiklik
Düzeltme ilkesi, sorunu çözmek için yalnızca gerekli minimum değişikliği yapmak, mevcut kod stiline uymak ve başka yerlerde bozulmalara yol açmamaktır.
Öncelik Matrisine Göre Çalışın
İşlevselliği etkileyen düzen sorunları P1'dir ve hemen düzeltilir; UX'i bozan görsel sorunlar P2'dir ve sırada düzeltilir; küçük görsel tutarsızlıklar P3'tür ve mümkünse düzeltilir.
Dört Görünüm Genişliğinde Test Edin
Duyarlı kontroller 375px (Mobil, iPhone SE/12 mini), 768px (Tablet, iPad), 1280px (Masaüstü) ve 1920px (Geniş) genişliklerinde yapılır.
Mevcut Kalıplara Uyun
Düzeltmeler, yeni bir kural getirmek yerine projede zaten kullanılan mevcut kod stilini takip etmelidir.
Büyük Değişikliklerden Önce Onay Alın
Büyük ölçekli yeniden yapılandırma tek başına yapılmaz: büyük değişikliklerden önce kullanıcıdan onay istenir ve doğrulanması zor olduğundan birden fazla sorun aynı anda düzeltilmez.

04 İşe koyun

Claude Code veya Codex'e web-design-reviewer 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 web-design-reviewer ekleyin

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

Terminal

npx skills add https://github.com/github/awesome-copilot --skill web-design-reviewer

skills/web-design-reviewer/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Beceriye İlk Tasarım İnceleme Görevi Verin

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

Starter prompt

Review the design of the website running at http://localhost:3000. It is a [Next.js] app styled with [Tailwind CSS], please check the [home and pricing] pages at mobile and desktop widths. Find the layout, responsive and accessibility problems like element overflow, weak contrast or tiny touch targets, then fix them in the source and verify the fixes.

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:

Tarayıcıyı yeniden yükleyin veya geliştirme sunucusunun HMR'sini bekleyin, ardından düzeltilen alanların ekran görüntülerini alın.
Her düzeltilen öğe için öncesi ve sonrası ekran görüntülerini karşılaştırın.
Düzeltmelerin diğer alanları etkilemediğini doğrulamak için regresyon testi çalıştırın.
Değişiklikten sonra duyarlı görünümün hâlâ sağlam olduğunu doğrulayın.
Playwright referans kurulumundaki browser_console_messages aracıyla JavaScript hatalarını yakalamak için tarayıcı konsol mesajlarını okuyun.

OpenDesign'da web-design-reviewer'ı 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: GitHub
Repository: github.com/github/awesome-copilot Dal main
Skill dosyası: skills/web-design-reviewer/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 1899b18
License: MIT LICENSE dosyasından.
Repository yıldızları: 38.981 GitHub anlık görüntüsü, bu katalogdaki 6 skill içeren tüm github/awesome-copilot deposu için 2026-09-14 tarihinde alındı. web-design-reviewer 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

Uygulama KapsamıKapsadığı statik siteleri, SPA ve full-stack framework'leri, CMS platformlarını ve diğer web uygulamalarını listeler.
Ön KoşullarÇalışan bir hedef site, ekran görüntüsü ve DOM erişimi olan tarayıcı otomasyonu ve düzeltmeler için kaynak kod gerekir.
Adım 1: Bilgi Toplama AşamasıURL'yi doğrular, framework, stil ve kapsam hakkında sorular sorar, yapılandırma dosyalarını ve stil yöntemini otomatik algılar.
Adım 2: Görsel İnceleme AşamasıSayfalarda gezinir, ekran görüntüsü alır, dört görünüm genişliğinde düzen, duyarlılık, erişilebilirlik ve tutarlılık sorunlarını kontrol eder.
Adım 3: Sorun Düzeltme AşamasıP1'den P3'e önceliklendirir, seçici, bileşen veya kalıba göre kaynak dosyaları bulur, framework'e özgü minimum düzeltmeler uygular.
Adım 4: Yeniden Doğrulama AşamasıYeniden yükler, yeniden ekran görüntüsü alır, öncesini ve sonrasını karşılaştırır, regresyon testi yapar, sorunlar kalırsa döngüye geri döner.
Çıktı BiçimiÖzet tablosu, sorunlar, düzeltilmemiş öğeler ve önerilerle markdown inceleme raporu şablonunu tanımlar.
Gerekli YeteneklerGezinme, ekran görüntüsü, görsel analizi, DOM alma, dosya okuma/yazma ve kod aramayı tablo hâlinde listeler.
Referans UygulamaYetenekleri Playwright MCP araçlarıyla eşleştirir, bir MCP sunucu yapılandırması sunar ve uyumlu diğer araçları listeler.
En İyi UygulamalarYapılması ve yapılmaması gerekenler listesi: ekran görüntülerini kaydedin, sorunları birer birer çözün, onay almadan toplu yeniden yapılandırma yapmayın.
Sorun GidermeBulunamayan stil dosyalarını, yansıtılmayan düzeltmeleri ve başka alanları etkileyen düzeltmeleri kapsar.

Skill'in Kendi Açıklaması

"Bu skill, yerel veya uzak sunucuda çalışan web sitelerinin görsel incelemesini yaparak tasarım sorunlarını belirlemeyi ve düzeltmeyi sağlar. "Web sitesi tasarımını incele", "UI'ı kontrol et", "düzeni düzelt", "tasarım sorunlarını bul" gibi isteklerde tetiklenir. Duyarlı tasarım, erişilebilirlik, görsel tutarlılık ve düzen bozuklukları ile ilgili sorunları tespit eder, ardından kaynak kod düzeyinde düzeltmeler yapar."

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

06 Kurmadan önce

web-design-reviewer 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.

Başlamadan önce sitenin çalışır durumda olması gerekir mi?

Evet. İlk gerekli ön koşul, çalışan bir hedeftir; bu, yerel bir geliştirme sunucusu, bir staging ortamı veya salt okunur incelemeler için üretim olabilir.

Ekran görüntüsü yakalama, sayfa gezinme ve DOM alma özelliklerine sahip tarayıcı otomasyonu da gereklidir ve düzeltmeler için projenin çalışma alanında bulunması gerekir.

Kodumu değiştiriyor mu yoksa sadece sorunları mı bildiriyor?

Düzeltmeleri kaynak kodu seviyesinde uygular ve projenin stil yöntemiyle eşleşen katmanı düzenler: Tailwind için bileşenlerdeki className, CSS Modules için modül CSS dosyaları, düz CSS veya SCSS dosyaları ve styled-components ile Emotion için JS/TS dosyaları. Bir şeyi düzeltemezse, rapor nedeni ve önerilen bir eylemi listeler.

Hangi tarayıcı otomasyon aracına ihtiyaç duyar?

Playwright MCP, gezinme, snapshot, ekran görüntüsü, tıklama, yeniden boyutlandırma ve konsol mesajları için araçlarıyla referans uygulama olarak önerilir. İş akışı, gezinme, ekran görüntüleri ve DOM alma özellikleri bulunduğu sürece Selenium, Puppeteer, Cypress veya WebDriver BiDi ile de çalışır.

Web Design Reviewer

Gerçek bir tasarım inceleme görevinde web-design-reviewer çalıştırın.

OpenDesign'ı indirin, SKILL.md bağlantısından web-design-reviewer'ı 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