Modern Web Guidance, yapay zeka destekli kodlama iş akışınıza modern en iyi uygulamaları uygulayan bir temsilci becerisidir. Bu, kodlama aracınızı yaygın web geliştirme sorunları için eski geçici çözümlerden uzaklaştırıp bunun yerine daha yeni web platformu özelliklerini kullanması gereken çözümlere yönlendirmenize yardımcı olur.
Kurulum
Modern Web Guidance becerileri çok çeşitli aracılara yüklenebilir. Böylece, tercih ettiğiniz iş akışını korurken bu becerilerin sunduğu rehberlikten yararlanabilirsiniz.
modern-web-guidance KSA (önerilir)
Önerilen yükleme yöntemi, modern-web-guidance Chrome Ekibi tarafından oluşturulan KSA'yı kullanmaktır. Becerileri modern-web-guidance CLI aracılığıyla yüklediğinizde beceriler otomatik olarak güncel tutulur. 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 KSA'yı kullanmadan Modern Web Guidance becerilerini kullanmayı tercih ediyorsanız tercih ettiğiniz ajana nasıl yükleyeceğinizi öğrenmek için okumaya devam edin.
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 Guidance becerilerini Beceri Yöneticisi'nde bulabilirsiniz. Beceri Yöneticisi'ne Ayarlar > Yapay Zeka Asistanı > Beceriler bölümünden erişebilirsiniz. Bir beceri seçerek ayrıntılar sayfasını açın. 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 Code 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 Guidance'ı 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
Yüklemeden önce keşfetme
Kurulumdan önce Modern Web Guidance beceri kılavuzu kitaplığını bir sorguyla arayarak veya kılavuzlarımızı kimliğe göre alarak 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 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 hedefinizle en iyi eşleşen 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 Kılavuzu'nu kullanmalısınız?
Modern Web Guidance becerileri, web geliştiricilere desteklenmeyen 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, modern CSS ve HTML API'leri ile daha iyi çözülebilecek sorunlar için işlevsellik sağlamak üzere 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, 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 becerileri 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 Kılavuzu'nda neler var?
Modern Web Kılavuzu, çeşitli temel disiplinlerdeki 100'den fazla web geliştirme kullanım alanıyla ilgili en iyi uygulamaları içerir. Bu, kodlama aracınıza 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 tek bir aracı 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örevi planlama ve resim yükleme önceliği 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 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ı sayıda, ö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, 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 rehberliği ve özellik yedekleri
Modern Web Kılavuzu, ç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 özel talimatlar sunar. Ç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 gerekirse aracıların bunları her zaman koşullu olarak yüklemeleri istenir. Böylece yalnızca gerekli durumlarda maliyet oluşur.
Doğruluk nasıl sağlanır?
Modern Web Rehberi'ndeki her kullanım alanında bir rehber bulunur ve çoğu kullanım alanı, yapay zeka temsilcilerini kaliteli çıktılara yönlendirmek için sürekli olarak kalibre edilir.
Kalibre edilmiş kullanım alanlarında, doğru aracı davranışını test etmek için otomatik bir kalite güvencesi sistemi kullanılır. Bu sistemde Playwright merkezi bir rol oynar:
- Her kılavuz için, kılavuzdaki 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 bir 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 Guidance becerilerini çağırmadan varsayılan eğitim verilerini kullanan bir kontrol olan rehberli olmayan değerlendirmedir. Başka bir değerlendirme (deneme), Modern Web Guidance becerilerini kullanarak aynı görevi ele alıyor.
Değerlendirmelerimiz, en yeni modeller ve kodlama aracılarıyla günlük olarak yapılır. Bu sayede, aracıların rehberliğimizle ve rehberliğimiz olmadan ne kadar iyi performans gösterdiğine dair net bir fikir ediniriz. İlk sonuçlar, aracıların Modern Web Guidance ile donatılması durumunda modern en iyi uygulamalara uyumda ortalama 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 kodlama araçlarına bağlı olarak değişebilir.
Sonraki adımlar
Artık Modern Web Guidance'ın genel bir özetine ve yapay zeka kodlama iş akışınızda modern web ile ilgili en iyi uygulamaları benimsemeyi kolaylaştırma potansiyeline sahipsiniz. Artık Modern Web Guidance'ın sunduğu becerileri ve kullanım alanlarını keşfedebilirsiniz.