Modern Web Guidance; web platformu uzmanlığını, en iyi uygulamaları ve tarayıcı uyumluluğu verilerini doğrudan kodlama temsilcilerinize yerleştiren bir dizi beceridir. Bu sayede kodlama temsilcilerinizi eski kalıplardan uzaklaştırıp modern web platformunun gücünden ve özelliklerinden yararlanan çözümlere yönlendirebilirsiniz.
Kurulum
Modern Web Guidance, becerileri destekleyen tüm kodlama temsilcileriyle yüklenip kullanılabilir.
modern-web-guidance CLI (önerilir)
Önerilen yükleme yöntemi, Chrome ekibi tarafından geliştirilen modern-web-guidance KSA'yı kullanmaktır. Modern Web Guidance uygulamasını modern-web-guidance CLI üzerinden yüklediğinizde otomatik güncellemeler etkinleştirilir. modern-web-guidance KSA'dan şu şekilde 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 komut, becerileri tercihlerinize göre yüklemek için etkileşimli bir sihirbaz çalıştırır.
Modern Web Guidance uygulamasını modern-web-guidance CLI kullanmadan yüklemeyi tercih ederseniz aşağıdaki aracıya özel talimatları inceleyin. Bu seçeneklerin çoğunun otomatik güncellemeleri desteklemediğini unutmayın.
Antigravity
Antigravity'yi indirin ve yükleme akışı sırasında veya Ayarlar sayfanızda Özelleştirmeler'in altındaki Build with Google Eklentileri'nden "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 Guidance, Ayarlar > Yapay Zeka Asistanı > Beceriler bölümündeki Beceri Yöneticisi'nde bulunur. Bir beceri seçerek ayrıntılar sayfasını açın. Beceriyi yüklemek için Install (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ılacak Modern Web Guidance aracını yüklemek için üç adım uygulamanız gerekir:
1. Pazar yerini 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
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
Copilot CLI
Modern Web Guidance uygulamasını Copilot ile kullanmak için iki adımda yükleyebilirsiniz:
1. Pazar yerini 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
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Yüklemeden önce keşfedin
Yüklemeden önce bir sorguyla arama yaparak veya kimliğe göre kılavuzlarımızı alarak Modern Web Guidance kılavuz kitaplığını değerlendirin. Bunun için CLI'nin search komutunu kullanarak bir istemle kullanım alanı kimliğini bulun:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Bu komut, 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":"ui-behaviors","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":"ui-behaviors","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":"ui-behaviors","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 hedefinizi en iyi yansıtan id değerini seçebilir ve retrieve komutunu kullanabilirsiniz:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
Bu durumda, animate-to-from-top-layer kullanım alanı için Markdown kılavuzu terminalde gösterilir. Diğer kılavuzlar için animate-to-from-top-layer yerine geçerli bir kılavuz kimliği girin.
Neden Modern Web Guidance kullanmalısınız?
Modern Web Guidance, üç farklı nedenden dolayı web geliştiricisine desteklenmeyen yapay zeka modellerine kıyasla avantaj sağlar:
- Yapay zeka kodlama aracıları, modern web geliştirme sorunları için genellikle eski ve güncelliğini yitirmiş çözümleri kullanır. Bu çözümler, modern CSS ve HTML API'leri tarafından daha iyi çözülen sorunlara işlevsellik sağlamak için genellikle 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, belirli bir projenin Baseline gereksinimlerine göre uyarlanmış rehberlik sunmak 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 göz önünde bulundurarak benimseyecek araçlara sahip olmasını sağlar.
Modern Web Guidance içinde ne var?
Modern Web Guidance, çeşitli temel disiplinlerde 100'den fazla web geliştirme kullanım alanı için en iyi uygulamaları içerir. Arka planda, kodlama temsilcinize kullanım alanınız için en iyi rehberliği bulup almak üzere modern-web-guidance CLI'yı nasıl çağıracağını söyleyen bir temsilci becerisidir.
- Kullanıcı deneyimi: Görüntüleme geçişleri, CSS
scrollbar-colorstili ve giriş ve çıkış animasyonları. - CSS: Kapsayıcı sorguları,
oklchgibi modern renk uzayları, CSS alt ızgara düzeni,text-wrapve tipografi satır yüksekliği kırpma. - Performans: Interaction to Next Paint (INP) teşhisi, uzun görevleri bölmek için
scheduler.yield, arka plan görev planlaması ve resim yükleme önceliklendirmesi. - Formlar: Otomatik boyutlandırılan giriş alanları (
field-sizing: content) ve:user-invalidile doğru doğrulama stilleri. - Yerleşik kullanıcı arayüzü bileşenleri: İletişim kutuları üzerinde doğrudan kontrol, ipuçları için CSS Anchor Positioning ve
popover. - Erişilebilirlik: Erişilebilir hata duyuruları ve klavye odağı yönetimi.
- Yerleşik yapay zeka: Yerel, cihaz üzerinde istemci modellerini (yerel Language Detection, Summarization ve Translation API'leri) kullanın.
- Geçiş anahtarları: Geçiş anahtarı kaydı, kimlik doğrulama ve yönetimi.
Bunlar, her kategorideki kılavuzlardan birkaçıdır. Tüm rehberleri görmek için rehberlerin tam listesini görüntüleyebilirsiniz.
Referans
Baseline, geliştiricilere hangi web özelliklerinin önemli tarayıcı motorlarında birlikte çalışabileceği konusunda netlik sağlar. 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ılabilir, ö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 ay veya daha uzun süredir birlikte çalışabilir olduğu anlamına gelir.
Baseline, web özelliklerinin birlikte çalışabilirliği için bir tanım olsa da projenizin yapılandırılabilir bir yönüdür. Bir Baseline hedefi seçebilir, ardından projenizi AGENTS.md veya CLAUDE.md dosyanıza ekleyerek bu hedefi kullanacak şekilde yapılandırabilirsiniz. Örneğin:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance ve özellik yedekleri
Modern Web Guidance, çok çeşitli modern web özelliklerini kullanır. Bunlardan bazıları Baseline Newly veya Widely available, bazıları ise sınırlı sayıda olabilir. Bir özelliğin yaygın olarak kullanılamadığı durumlarda kullanım alanı kılavuzları, temsilcilere özelliği desteklemeyen tarayıcılarda daha geniş uyumluluk sağlamayla ilgili özel talimatlar verir. Çoğu durumda yedekler, modern özelliğin desteklendiği her yerde kullanılabildiği progresif geliştirmeler olarak uygulanır. Desteklenmeyen tarayıcılar için polyfill'ler gerekiyorsa temsilcilere her zaman bunları koşullu olarak yüklemeleri talimatı verilir. Böylece yalnızca gerektiğinde maliyet oluşur.
Doğruluk nasıl sağlanır?
Modern Web Guidance uygulamasındaki her kullanım alanında, kaliteli sonuçlar elde etmek için sürekli olarak kalibre edilen bir dizi değerlendirme bulunur.
Kullanım alanı değerlendirmeleri, temsilcinin doğru davranışını test etmek için otomatik bir kalite güvencesi sistemi çalıştırır. Bu sistemde Playwright önemli bir rol oynar:
- Her kılavuz için, kılavuzun uygulama ayrıntılarına uyulup uyulmadığını (ör. zorunlu olduğu durumlarda
@media (prefers-reduced-motion: reduce)kullanılıp kullanılmadığını) test etmek amacıyla bir Playwright komut dosyası geliştirilir. - Bu Playwright komut dosyaları, %100 geçiş oranı bekleyen "doğru" bir referans demo uygulamasına göre sürekli olarak kalibre edilir. Diğer tarafta ise komut dosyaları, %0 geçiş oranı bekleyen kasıtlı olarak kusurlu bir uygulamayı kontrol eder.
- "Doğru" ve kasıtlı olarak kusurlu uygulamalardan biri veya her ikisi sırasıyla %100 ve %0 geçme oranları üretemezse bir oluşturucu, %100 kalibrasyon elde edilene kadar bağlamı kullanarak otomatik olarak yeniden dener.
- Son olarak, temel bir uygulama üzerinde uçtan uca değerlendirmeler yapılır. Bu değerlendirmelerden biri, kontrol amaçlı olarak rehbersizdir. Bir görevi tamamlamak için Modern Web Guidance çağrılmadan varsayılan eğitim verileri kullanılır. Başka bir değerlendirme (deneme) ise aynı görevi Modern Web Guidance kullanarak ele alır.
Değerlendirmelerimiz, son teknoloji modeller ve kodlama temsilcileriyle haftada birkaç kez çalıştırılır. Bu sayede, temsilcilerin bizim rehberliğimizle ve rehberliğimiz olmadan ne kadar iyi performans gösterdiğini net bir şekilde görebiliriz. İlk sonuçlar, temsilciler Modern Web Guidance kullandığında modern en iyi uygulamalara uyumun ortalama 37 yüzde puan arttığını gösteriyor. Ancak sonuçlarınız; proje gereksinimlerinize, modelinize, yazdığınız istemlere ve tercih ettiğiniz temsilci tabanlı kodlama araçlarına bağlı olarak değişiklik gösterebilir.
Değişken özellikler için rehberliği etkinleştirme
Değişken özellikler, yalnızca bir tarayıcı motorunda uygulanan deneysel web özellikleridir ve zarar veren değişikliklere tabidir. Bu özelliklerle ilgili rehberliği etkinleştirmek için projenizin kök dizininde aşağıdaki komutu çalıştırın:
npx modern-web-guidance@latest set-allow-volatile-features
Kaynak denemesindeki özellikler için rehberliği etkinleştir
Deneysel özellikler ilk kullanıma sunulduğunda genellikle bir işaretin arkasına gizlenir veya yalnızca kaynak denemeleri aracılığıyla üretim web sitelerinde kullanılabilir hale getirilir. Bazı Modern Web Guidance kılavuzları bu özellikleri kullanır ancak bunlarla ilgili kılavuzlar, kodlama temsilciniz tarafından varsayılan olarak kullanılamaz. Bu özelliklerle ilgili yardım almak için projenizin kök dizininde aşağıdaki komutu çalıştırın:
npx modern-web-guidance@latest set-allow-origin-trials
Sonraki adımlar
Artık Modern Web Guidance hakkında genel bir bilgiye sahipsiniz ve yapay zeka kodlama iş akışınızda modern web ile ilgili en iyi uygulamaları benimsemenizi kolaylaştırma potansiyelini biliyorsunuz. Artık Modern Web Guidance tarafından sağlanan rehberleri inceleyebilirsiniz.