Modern Web Guidance



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.

modern-web-guidance CLI ile yükleme (önerilir):

npx modern-web-guidance@latest install
Başlama GitHub'da görüntüle

Tercih ettiğiniz yapay zeka kodlama aracısıyla çalışır

Modern Web Guidance, favori yapay zeka kodlama temsilcilerinizle birlikte kullanılabilir. Böylece, tercih ettiğiniz iş akışında modern web ile ilgili en iyi uygulamalar hakkında rehberliğe erişebilirsiniz.
Tüm yükleme seçeneklerini görüntüleme

Vercel'in Agent Skills özelliğini kullanarak projenize Modern Web Guidance yükleyin:

npx skills add GoogleChrome/modern-web-guidance

Claude Code eklentilerinden Modern Web Guidance yükleyin:

claude plugin install modern-web-guidance@claude-plugins-official

Copilot CLI için Modern Web Guidance becerilerini yükleyin:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Antigravity CLI için Modern Web Guidance becerilerini yükleyin:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Modern Web Guidance aracının ne olduğunu, hangi sorunu çözdüğünü ve yapay zeka destekli web geliştiricisi iş akışınızı nasıl iyileştirdiğini öğrenmek için bu genel bakış videosunu izleyin.
Şimdi izle

Daha iyi kullanıcı deneyimleri için istemler

Yapay zeka destekli kodlama iş akışınızda Modern Web Guidance'ı çağırarak yeni özellikler oluşturmak, eski kodları modernize etmek ve uygulamanızı hızlandırmak için aşağıdaki örnek istemlerden birkaçını deneyin. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.
 
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
 
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
 
Implement a passkey-based login flow using the latest WebAuthn features.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
Yapay zeka kodlama asistanlarınızı en yeni ve birlikte çalışabilir web kodları üretmeye nasıl yönlendireceğinizi öğrenin. Bu giriş niteliğindeki codelab'de, eski bir web uygulamasını denetleyecek ve temsilcileri modern en iyi uygulamalara yönlendirmek için Modern Web Guidance aracını kullanacaksınız. Baseline tarayıcı hedefleri belirlemeyi, Core Web Vitals'ı optimize etmeyi ve genel yapay zeka çıktılarını yüksek performanslı web çözümlerine dönüştürmeyi öğrenin.
Başlama
Web geliştirme iş akışınızı iyileştirmek için temsilciler için Chrome Geliştirici Araçları'nı Modern Web Guidance becerileriyle birleştirin. Gerçek zamanlı performans denetimleri yapın, erişilebilirlik ağaçlarını inceleyin ve konsol günlüklerini yakalayın. Ardından, hassas modern web kodu düzeltmelerini otomatik olarak uygulayın.
Daha fazla bilgi

Nasıl katkıda bulunacağınızı öğrenin

Modern Web Guidance ürününü nasıl iyileştirebileceğimizle ilgili fikirleriniz mi var? Nasıl katkıda bulunabileceğinizi öğrenin.
Daha fazla bilgi