"إرشادات الويب الحديث" هي مجموعة من المهارات الدائمة التي تم التحقّق منها من قِبل الخبراء، وتوجّه وكلاء الترميز المستندين إلى الذكاء الاصطناعي في العديد من حالات الاستخدام الشائعة لإنشاء تجارب ويب حديثة يسهل الوصول إليها وتتسم بالأداء العالي والأمان.

التثبيت باستخدام واجهة سطر الأوامر (CLI) في modern-web-guidance (يُنصح بهذا الإجراء):

npx modern-web-guidance@latest install
البدء عرض على GitHub

متوافق مع وكيل الترميز المستنِد إلى الذكاء الاصطناعي المفضّل لديك

يمكن استخدام "إرشادات الويب الحديث" مع وكلاء الترميز المفضّلين لديك المستندين إلى الذكاء الاصطناعي، ما يضمن لك إمكانية الوصول إلى إرشادات حول أفضل ممارسات الويب الحديث في سير العمل المفضّل لديك.
عرض جميع خيارات التثبيت

ثبِّت Modern Web Guidance في مشروعك باستخدام "مهارات الوكيل" من Vercel باتّباع الخطوات التالية:

npx skills add GoogleChrome/modern-web-guidance

تثبيت مهارات "إرشادات الويب الحديث" في Claude Code:

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

ثبِّت مهارات "إرشادات الويب الحديث" في Copilot CLI:

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

ثبِّت مهارات Modern Web Guidance في Antigravity CLI:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

طلبات لتحسين تجارب المستخدمين

جرِّب بعض الطلبات النموذجية التالية لاستخدام إرشادات الويب الحديثة في سير عمل الترميز المستند إلى الذكاء الاصطناعي لإنشاء ميزات جديدة وتحديث الرموز القديمة وتسريع تطبيقك. 
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.
يمكنك دمج "أدوات مطوّري البرامج في Chrome" مع مهارات "إرشادات الويب الحديث" لتحسين سير عمل تطوير الويب. يمكنك إجراء عمليات تدقيق للأداء في الوقت الفعلي، وفحص شجرات تسهيل الاستخدام، وتسجيل سجلات وحدة التحكّم، ثم تطبيق إصلاحات دقيقة على رموز الويب الحديثة تلقائيًا.
مزيد من المعلومات

معرفة كيفية المساهمة

هل لديك أفكار حول كيفية تحسين "إرشادات الويب الحديث"؟ تعرَّف على كيفية المساهمة.
مزيد من المعلومات