Modern Web Rehberi, web platformu yetkinliğini, en iyi uygulamaları ve tarayıcı uyumluluğu verilerini doğrudan kodlama ajanlarınıza yerleştiren bir beceri setidir. Kodlama aracınızı eski kalıplardan uzaklaştırıp modern web platformunun gücünden ve özelliklerinden yararlanan çözümlere yönlendirmenize yardımcı olur.
Kurulum
Modern Web Rehberi, becerileri destekleyen tüm kodlama temsilcileriyle yüklenebilir ve kullanılabilir.
modern-web-guidance KSA (önerilir)
Önerilen yükleme yöntemi, Chrome ekibi tarafından oluşturulan modern-web-guidance KSA'dır. Modern Web Rehberi'ni modern-web-guidance CLI üzerinden yüklemek otomatik güncellemeleri etkinleştirir. modern-web-guidance KSA'dan aşağıdaki gibi yükleyebilirsiniz:
npx modern-web-guidance@latest install
İsteğe bağlı olarak, Chrome uzantıları geliştiriyorsanız aşağıdaki komutu kullanmanızı öneririz:
npx modern-web-guidance@latest install --choose
Bu işlem, tercihlerinize göre becerileri yüklemek için etkileşimli bir sihirbaz çalıştırır.
Modern Web Guidance'ı modern-web-guidance CLI'yı kullanmadan yüklemeyi tercih ederseniz aracıya özel aşağıdaki talimatlara bakın. Bu seçeneklerin çoğunun otomatik güncellemeyi desteklemediğini unutmayın.
Antigravity
Antigravity'yi indirin ve yükleme akışı sırasında veya Ayarlar sayfanızdaki Özelleştirmeler bölümünde Google Eklentileri ile Oluşturun'u tıklayarak "modern-web-guidance"ı etkinleştirin.
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Modern Web Rehberi'ni Beceri Yöneticisi'nde bulabilirsiniz. Beceri Yöneticisi'ne Ayarlar > Yapay Zeka Asistanı > Beceriler bölümünden erişebilirsiniz. Ayrıntılar sayfasını açmak için bir beceri seçin. Beceriyi yüklemek için Yükle düğmesini tıklayarak mevcut IDE örneğine uygulayın.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
Claude Code CLI
Claude Code CLI ile kullanılmak üzere Modern Web Guidance'ı yüklemek üç adımda tamamlanır:
1. Marketplace'i ekleyin:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Eklentiyi Marketplace'ten yükleyin:
/plugin install modern-web-guidance@googlechrome
3. Eklentileri yeniden yükleme:
/reload-plugins
Copilot CLI
Copilot ile kullanılmak üzere Modern Web Rehberi'ni yüklemek için iki adım gerekir:
1. Marketplace'i ekleyin:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Eklentiyi Marketplace'ten yükleyin:
/plugin install modern-web-guidance@googlechrome
Kaz
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Yüklemeden önce keşfedin
Kurulumdan önce, sorguyla arama yaparak veya kılavuzlarımızı kimliğe göre alarak Modern Web Rehberi kılavuz kitaplığını değerlendirin. Bunu yapmak için istem kullanarak kullanım alanı kimliğini bulmak üzere KSA'nın search komutunu kullanın:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Bu işlem, terminalinizde bir JSON nesnesi oluşturur:
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
description değerlerini okuyarak hedefiniz için en uygun id değerini seçebilir ve retrieve komutunu kullanabilirsiniz:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
Bu durumda, terminalde animate-to-from-top-layer kullanım alanıyla ilgili kılavuz Markdown'u gösterilir. Diğer kullanım alanları için animate-to-from-top-layer yerine geçerli bir kullanım alanı kimliği girin.
Neden Modern Web Rehberi'ni kullanmalısınız?
Modern Web Rehberi, web geliştiricilere destekli olmayan yapay zeka modellerine kıyasla üç farklı nedenden dolayı avantaj sağlar:
- Yapay zeka kodlama aracı, modern web geliştirme sorunları için genellikle eski ve güncel olmayan çözümleri kullanır. Bu çözümler genellikle, modern CSS ve HTML API'leri ile daha iyi çözülebilecek sorunlar için işlevsellik sağlamak üzere JavaScript içerir.
- Yapay zeka modelleri, geçmişte en yeni web platformu özelliklerinden haberdar değildi veya bu özellikler hakkında yanlış bilgilere sahipti.
- Son olarak, yapay zeka modelleri, rehberliği belirli bir projenin temel gereksinimlerine göre uyarlamak yerine proje gereksinimlerini veya tarayıcı destek ölçütlerini dikkate almayan güncel olmayan önerilerde bulunma eğilimindedir.
Modern Web Guidance, bu eksiklikleri giderir ve yapay zeka destekli kodlama iş akışınızın, yeni web platformu özelliklerini ilk olarak ve yedekleri de göz önünde bulundurarak kullanmaya yönelik araçlara sahip olmasını sağlar.
Modern Web Rehberi'nde neler var?
Modern Web Kılavuzu, çeşitli temel disiplinlerdeki 100'den fazla web geliştirme kullanım alanı için en iyi uygulamaları içerir. Bu, kodlama temsilcinize kullanım alanınız için en iyi kılavuzu bulmak ve almak üzere modern-web-guidance CLI'yı nasıl çağıracağını bildiren bir temsilci becerisidir.
- Kullanıcı deneyimi: Görünüm geçişleri, CSS
scrollbar-colorstili ve giriş ile çıkış animasyonları. - CSS: Kapsayıcı sorguları,
oklchgibi modern renk alanları, CSS alt ızgara düzeni,text-wrapve tipografi satır yüksekliği kırpma. - Performans: Uzun görevleri bölme, arka plan görevlerini planlama ve görüntü yükleme önceliklendirmesi için Interaction to Next Paint (INP) teşhisleri
scheduler.yield. - Formlar: Giriş alanlarını otomatik olarak boyutlandırma (
field-sizing: content) ve:user-invalidile doğru doğrulama stilleri. - Yerleşik kullanıcı arayüzü bileşenleri: İletişim kutuları, ipuçları için CSS Anchor Positioning ve
popoverüzerinde doğrudan kontrol. - Erişilebilirlik: Erişilebilir hata duyuruları ve klavye odağı yönetimi.
- Yerleşik yapay zeka: Yerel, cihaz üzerinde istemci modellerini (yerel Dil Algılama, Özetleme ve Çeviri API'leri) kullanın.
- Geçiş anahtarları: Geçiş anahtarı kaydı, kimlik doğrulama ve yönetim.
Bunlar, her disiplindeki kullanım alanlarından bazılarıdır. Tüm kullanım alanlarını görmek için kullanım alanlarının tam listesini inceleyebilirsiniz.
Referans
Baseline, geliştiricilere hangi web özelliklerinin büyük tarayıcı motorlarında birlikte çalışabileceği konusunda netlik kazandırır. Bir web özelliği Baseline ise tarayıcı uyumluluğu düzeyine güvenebilirsiniz. Web özellikleri, Baseline tarafından tanımlanan üç kategoriden birine girer:
- Sınırlı kullanılabilirlik, özelliğin birlikte çalışabilir olmadığı anlamına gelir.
- Yeni kullanıma sunuldu, özelliğin son 30 ay içinde birlikte çalışabilir hale geldiği anlamına gelir.
- Yaygın olarak kullanılabilir, özelliğin en az 30 aydır birlikte çalışabilir olduğu anlamına gelir.
Baseline, web özelliği birlikte çalışabilirliği için bir tanım olsa da projenizin yapılandırılabilir bir yönüdür. Bir referans hedef seçebilir ve ardından projenizi, bu hedefi kullanacak şekilde yapılandırabilirsiniz. Örneğin, hedefi AGENTS.md veya CLAUDE.md dosyanıza ekleyebilirsiniz:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Rehberi ve özellik yedekleri
Modern Web Rehberi, çok çeşitli modern web özelliklerini kullanır. Bunlardan bazıları Baseline Newly veya Widely available (Yeni veya geniş çapta kullanıma sunulan temel) olabilir ancak bazıları sınırlı sayıda olabilir. Yaygın olarak kullanılamayan özelliklerin olduğu durumlarda, kullanım alanı kılavuzları, özelliği desteklemeyen tarayıcılarda daha geniş uyumluluk sağlamayla ilgili olarak temsilcilere özel talimatlar verir. Çoğu durumda, yedekler, desteklendiği her yerde modern özelliğin kullanılabildiği aşamalı geliştirmeler olarak uygulanır. Desteklenmeyen tarayıcılar için polyfill'ler gerekirse aracıların bunları her zaman koşullu olarak yüklemeleri istenir. Böylece yalnızca gerektiğinde maliyet oluşur.
Doğruluk nasıl sağlanır?
Modern Web Rehberi'ndeki her kullanım alanında, kaliteli sonuçlar elde etmek için sürekli olarak kalibre edilen bir değerlendirme grubu bulunur.
Kullanım alanı değerlendirmeleri, doğru aracı davranışını test etmek için otomatik bir kalite güvencesi koşumu çalıştırır. Bu süreçte Playwright merkezi bir rol oynar:
- Her kılavuz için, kılavuzun uygulama ayrıntılarına uyulup uyulmadığını test etmek amacıyla bir Playwright komut dosyası geliştirilir. Örneğin, gerekli olduğu yerlerde
@media (prefers-reduced-motion: reduce)gözlemlenip gözlemlenmediği test edilir. - Bu Playwright komut dosyaları, %100 geçme oranı bekleyen "doğru" bir referans demo uygulamasına göre sürekli olarak kalibre edilir. Diğer uçta ise komut dosyaları, geçme oranının% 0 olmasını bekleyen, kasıtlı olarak hatalı bir uygulamaya karşı kontrol gerçekleştirir.
- "Doğru" ve kasıtlı olarak hatalı uygulamaların her ikisi de sırasıyla% 100 ve% 0 geçme oranı elde edemezse oluşturma aracı, %100 kalibrasyon elde edilene kadar bağlamı kullanarak otomatik olarak yeniden dener.
- Son olarak, temel bir uygulamada uçtan uca değerlendirmeler uygulanır. Bu değerlendirmelerden biri, bir görevi tamamlamak için Modern Web Rehberi'ni çağırmadan varsayılan eğitim verilerini kullanan bir kontrol olan rehberli olmayan değerlendirmedir. Başka bir değerlendirme (deneme), aynı görevi Modern Web Rehberi'ni kullanarak ele alıyor.
Değerlendirmelerimiz, haftada birkaç kez son teknoloji modeller ve kodlama aracılarıyla yapılır. Bu sayede, aracıların rehberliğimizle ve rehberliğimiz olmadan nasıl performans gösterdiği net bir şekilde anlaşılır. İlk sonuçlar, aracıların Modern Web Rehberi ile donatılması durumunda modern en iyi uygulamalara uyumda ortalama olarak 37 puanlık bir iyileşme olduğunu gösteriyor. Ancak sonuçlarınız proje gereksinimlerinize, modelinize, yazdığınız istemlere ve tercih ettiğiniz yapay zeka destekli kodlama araçlarına bağlı olarak değişebilir.
Sonraki adımlar
Artık Modern Web Rehberi'nin genel bir özetine ve yapay zeka kodlama iş akışınızda modern web'le ilgili en iyi uygulamaları benimsemeyi kolaylaştırma potansiyeline sahipsiniz. Artık Modern Web Guidance'ın sunduğu disiplinler ve kullanım alanları hakkında bilgi edinebilirsiniz.