بدء استخدام "إرشادات الويب الحديث"

Modern Web Guidance هي مجموعة من المهارات التي تدمج خبرة منصة الويب وأفضل الممارسات وبيانات توافق المتصفّح مباشرةً في وكلاء الترميز. ويساعد ذلك في توجيه وكلاء الترميز بعيدًا عن الأنماط القديمة، وبدلاً من ذلك نحو الحلول التي تستفيد من قوة وإمكانات منصة الويب الحديثة.

تثبيت

يمكن تثبيت Modern Web Guidance واستخدامه مع أي وكيل ترميز يتوافق مع المهارات.

طريقة التثبيت المقترَحة هي من خلال واجهة سطر الأوامر (CLI) في modern-web-guidance التي أنشأها فريق Chrome. سيؤدي تثبيت "Modern Web Guidance" من خلال واجهة سطر الأوامر (CLI) في "modern-web-guidance" إلى تفعيل التحديثات التلقائية. يمكنك تثبيت الحزمة من واجهة سطر أوامر modern-web-guidance على النحو التالي:

npx modern-web-guidance@latest install

اختياريًا، إذا كنت تطوّر إضافات Chrome، ننصحك باستخدام الأمر التالي:

npx modern-web-guidance@latest install --choose

يؤدي ذلك إلى تشغيل معالج تفاعلي لتثبيت المهارات وفقًا لإعداداتك المفضّلة.

إذا أردت تثبيت Modern Web Guidance بدون استخدام واجهة سطر الأوامر في modern-web-guidance، يُرجى الرجوع إلى التعليمات التالية الخاصة بالوكيل. يُرجى العِلم أنّ معظم هذه الخيارات لا تتيح التحديثات التلقائية.

Antigravity

نزِّل Antigravity وفعِّل "إرشادات الويب الحديث" أثناء عملية التثبيت، أو من صفحة الإعدادات ضمن التخصيصات ثم المكوّنات الإضافية لـ Build with Google.

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

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

يتطلّب تثبيت Modern Web Guidance لاستخدامه مع واجهة سطر الأوامر Claude Code ثلاث خطوات:

1. أضِف السوق:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. ثبِّت المكوّن الإضافي من السوق:

/plugin install modern-web-guidance@googlechrome

3. إعادة تحميل المكوّنات الإضافية:

/reload-plugins

Codex

codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

Copilot CLI

يتطلّب تثبيت Modern Web Guidance لاستخدامه مع Copilot خطوتَين:

1. أضِف السوق:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. ثبِّت المكوّن الإضافي من السوق:

/plugin install modern-web-guidance@googlechrome

إوزّة

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

الاستكشاف قبل التثبيت

يمكنك تقييم مكتبة أدلة Modern Web Guidance قبل التثبيت من خلال البحث باستخدام طلب بحث أو استرداد أدلتنا حسب رقم التعريف. لإجراء ذلك، استخدِم الأمر search في واجهة سطر الأوامر للعثور على رقم تعريف الطلب باستخدام طلب:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

سيؤدي ذلك إلى إخراج عنصر JSON في الوحدة الطرفية:

[{"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، يمكنك اختيار id الذي يعكس هدفك على أفضل نحو، واستخدام الأمر retrieve:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

في هذه الحالة، سيظهر دليل Markdown لحالة الاستخدام animate-to-from-top-layer في الوحدة الطرفية. بالنسبة إلى الأدلة الأخرى، استبدِل animate-to-from-top-layer بأي معرّف دليل صالح.

لماذا يجب استخدام Modern Web Guidance؟

يوفّر Modern Web Guidance ميزة لمطوِّري تطبيقات الويب مقارنةً بنماذج الذكاء الاصطناعي غير المساعدة لثلاثة أسباب مختلفة:

  1. تميل برامج الذكاء الاصطناعي المخصّصة لمطوّري تطبيقات الويب إلى استخدام حلول قديمة وغير فعّالة لمشاكل تطوير الويب الحديثة. غالبًا ما تحتوي هذه الحلول على JavaScript لتوفير وظائف للمشاكل التي يمكن حلّها بشكل أفضل من خلال واجهات برمجة التطبيقات الحديثة لـ CSS وHTML.
  2. لم تكن نماذج الذكاء الاصطناعي على دراية بأحدث ميزات منصات الويب أو كانت لديها معلومات غير صحيحة عنها.
  3. أخيرًا، تميل نماذج الذكاء الاصطناعي إلى تقديم اقتراحات قديمة لا تأخذ في الاعتبار متطلبات المشروع أو معايير دعم المتصفّح، بدلاً من تخصيص الإرشادات وفقًا لمتطلبات Baseline لمشروع معيّن.

يعالج Modern Web Guidance هذه العيوب، ويضمن أنّ سير عمل الترميز المستند إلى الذكاء الاصطناعي يتضمّن الأدوات اللازمة لاعتماد ميزات منصة الويب الأحدث أولاً، مع وضع الحلول الاحتياطية في الاعتبار.

ما هي مكوّنات Modern Web Guidance؟

يتضمّن Modern Web Guidance أفضل الممارسات لأكثر من 100 حالة استخدام لتطوير الويب في العديد من المجالات الأساسية. في الخلفية، هي مهارة وكيل توجّه وكيل الترميز إلى كيفية استدعاء واجهة سطر الأوامر (CLI) في modern-web-guidance للعثور على أفضل الإرشادات لحالة الاستخدام واستردادها.

  • تجربة المستخدم: انتقالات العرض، وتنسيق CSS scrollbar-color، وحركات الدخول والخروج
  • ‫CSS: طلبات البحث عن الحاويات، وفضاءات الألوان الحديثة مثل oklch، وتنسيق الشبكة الفرعية في CSS، وtext-wrap، واقتصاص ارتفاع السطر في أسلوب الخط.
  • الأداء: بيانات تشخيص "مدى استجابة الصفحة لتفاعلات المستخدم" (INP)، وscheduler.yield لتقسيم المهام التي يستغرق تنفيذها وقتًا طويلاً، وجدولة المهام في الخلفية، وتحديد أولوية تحميل الصور.
  • النماذج: حقول إدخال يتم تغيير حجمها تلقائيًا (field-sizing: content)، وأنماط تحقّق دقيقة باستخدام :user-invalid
  • مكوّنات واجهة المستخدم المضمّنة: التحكّم المباشر في مربّعات الحوار، وتحديد موضع الإرساء في CSS لتلميحات الشاشة، وpopover.
  • تسهيل الاستخدام: إشعارات الأخطاء التي يمكن الوصول إليها، وإدارة تركيز لوحة المفاتيح.
  • الذكاء الاصطناعي المضمّن: يمكنك استخدام نماذج العملاء المحلية على الجهاز فقط (واجهات برمجة التطبيقات الأصلية لرصد اللغة والتلخيص والترجمة).
  • مفاتيح المرور: تسجيل مفاتيح المرور ومصادقتها وإدارتها

هذه بعض الأدلة من كل فئة. للاطّلاع على جميع الأدلّة، يمكنك الاطّلاع على القائمة الكاملة للأدلّة.

Baseline

توضّح ميزة Baseline للمطوّرين ميزات الويب القابلة للتشغيل التفاعلي في محرّكات المتصفّحات الرئيسية. إذا كانت ميزة الويب ضمن مجموعة Baseline، يمكنك الوثوق بمستوى توافقها مع المتصفّحات. تندرج ميزات الويب ضمن إحدى الفئات الثلاث التي تحدّدها مجموعة Baseline:

  • التوفّر المحدود يعني أنّ الميزة غير قابلة للتشغيل التفاعلي.
  • متاحة حديثًا تعني أنّ الميزة أصبحت قابلة للتشغيل التفاعلي مؤخرًا خلال آخر 30 شهرًا.
  • متاحة على نطاق واسع تعني أنّ الميزة قابلة للتشغيل التفاعلي لمدة 30 شهرًا على الأقل أو أكثر.

على الرغم من أنّ Baseline هو تعريف لقابلية التشغيل التفاعلي لميزات الويب، إلا أنّه أيضًا جانب قابل للضبط في مشروعك. يمكنك اختيار هدف Baseline، ثم ضبط مشروعك لاستخدامه من خلال إضافته إلى ملف AGENTS.md أو CLAUDE.md، على سبيل المثال:

This project's Baseline target is Baseline 2024.

<other project info...>

Modern Web Guidance والميزات الاحتياطية

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

كيف يتم ضمان الدقة؟

تتضمّن كل حالة استخدام في Modern Web Guidance مجموعة من عمليات التقييم التي تتم معايرتها باستمرار لضمان جودة النتائج.

تُجري تقييمات حالات الاستخدام اختبارًا آليًا لتأكيد الجودة من أجل التحقّق من سلوك الوكيل الصحيح، مع لعب Playwright دورًا مركزيًا:

  1. لكل دليل، يتم تطوير نص برمجي في Playwright لاختبار ما إذا تم اتّباع تفاصيل التنفيذ الواردة في الدليل، على سبيل المثال، إذا تم رصد @media (prefers-reduced-motion: reduce) في الحالات التي يكون فيها مطلوبًا.
  2. تتم معايرة نصوص Playwright البرمجية هذه باستمرار وفقًا لعملية تنفيذ تجريبية مرجعية "صحيحة" تتطلّب معدّل نجاح بنسبة %100. من ناحية أخرى، تتحقّق النصوص البرمجية من عملية تنفيذ معيبة عمدًا تتوقّع معدّل نجاح بنسبة %0.
  3. إذا لم تنجح عمليات التنفيذ "الصحيحة" و/أو المعيبة عمدًا في تحقيق معدّلات نجاح %100 و%0 على التوالي، يعيد المُنشئ المحاولة تلقائيًا باستخدام السياق إلى أن تتم المعايرة بنسبة %100.
  4. أخيرًا، يتم إجراء تقييمات شاملة على تطبيق أساسي. أحد هذه التقييمات غير موجَّه، وهو تقييم ضابط، ويستخدم بيانات التدريب التلقائية بدون استدعاء "Modern Web Guidance" لإكمال مهمة. ويتناول تقييم آخر (التجربة) المهمة نفسها باستخدام Modern Web Guidance.

نُجري تقييماتنا عدة مرات في الأسبوع باستخدام نماذج ووكلاء ترميز متطوّرين، ما يمنحنا صورة واضحة عن مستوى أداء الوكلاء مع إرشاداتنا وبدونها. في المتوسط، تُظهر النتائج الأولية تحسّنًا بنسبة 37 نقطة مئوية في الالتزام بأفضل الممارسات الحديثة عندما يكون الوكلاء مجهّزين بـ "Modern Web Guidance". ومع ذلك، قد تختلف النتائج حسب متطلبات مشروعك والنموذج والطلبات التي تكتبها وأدوات الترميز المستندة إلى الذكاء الاصطناعي الوكيل المفضّلة لديك.

تفعيل الإرشادات للميزات غير الثابتة

الميزات غير الثابتة هي ميزات ويب تجريبية يتم تنفيذها في محرّك متصفّح واحد فقط، وهي عرضة لتغييرات قد تؤدي إلى عطل. لتفعيل الإرشادات لهذه الميزات، نفِّذ الأمر التالي في جذر مشروعك:

npx modern-web-guidance@latest set-allow-volatile-features

تفعيل الإرشادات للميزات في مرحلة التجربة والتقييم

عند طرح الميزات التجريبية لأول مرة، يتم عادةً إخفاؤها خلف علامة، أو إتاحتها فقط على المواقع الإلكترونية الإنتاجية من خلال مراحل التجربة والتقييم. تستخدم بعض أدلة Modern Web Guidance هذه الميزات، ولكن لا تتوفّر الإرشادات الخاصة بها لوكيل الترميز تلقائيًا. للحصول على إرشادات حول هذه الميزات، نفِّذ الأمر التالي في جذر مشروعك:

npx modern-web-guidance@latest set-allow-origin-trials

الخطوات التالية

أصبحت لديك الآن نظرة عامة على Modern Web Guidance وإمكاناته التي تسهّل عليك اعتماد أفضل الممارسات الحديثة للويب في سير عمل الترميز المستند إلى الذكاء الاصطناعي. يمكنك الآن استكشاف الأدلة التي يقدّمها "Modern Web Guidance".