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

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

تثبيت

يمكن تثبيت إرشادات الويب الحديث واستخدامه مع أي وكيل ترميز يتوافق مع المهارات.

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

npx modern-web-guidance@latest install

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

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

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

إذا أردت تثبيت إرشادات الويب الحديث بدون استخدام واجهة سطر أوامر 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

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

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 ثلاث خطوات:

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

يتطلّب تثبيت إرشادات الويب الحديث لاستخدامه مع 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

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

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

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

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

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

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

ما هي ميزات "إرشادات الويب الحديث"؟

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

إرشادات الويب الحديث والميزات الاحتياطية

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

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

تحتوي كل حالة استخدام في "إرشادات الويب الحديث" على مجموعة من التقييمات التي تتم معايرتها باستمرار لضمان جودة النتائج.

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

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

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

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

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