"إرشادات تطوير الويب الحديث" هي مهارة وكيل تطبّق أفضل الممارسات الحديثة على سير عمل الترميز المستند إلى الذكاء الاصطناعي. يساعد ذلك في توجيه وكيل الترميز بعيدًا عن الحلول القديمة لمشاكل تطوير الويب الشائعة، ونحو الحلول التي يجب أن تستخدم ميزات أحدث لمنصة الويب.
تثبيت
يمكن تثبيت مهارات "إرشادات الويب الحديثة" في مجموعة كبيرة من البرامج، ما يتيح لك الحفاظ على سير العمل المفضّل لديك مع الاستفادة من الإرشادات التي تقدّمها.
modern-web-guidance واجهة سطر الأوامر (CLI) (يُنصح بها)
طريقة التثبيت المُقترَحة هي من خلال modern-web-guidanceواجهة سطر الأوامر التي أنشأها فريق Chrome. سيؤدي تثبيت المهارات من خلال واجهة سطر الأوامر 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 وفعِّل "إرشادات الويب الحديث" (modern-web-guidance) أثناء عملية التثبيت أو من صفحة الإعدادات ضمن التخصيصات ثم إنشاء المواقع الإلكترونية باستخدام مكوّنات 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
يمكنك العثور على مهارات "إرشادات الويب الحديث" في إدارة المهارات، المتاحة ضمن الإعدادات > مساعد الذكاء الاصطناعي > المهارات. اختَر مهارة لفتح صفحة التفاصيل الخاصة بها. لتثبيت المهارة، انقر على الزر تثبيت لتطبيقها على مثيل بيئة التطوير المتكاملة الحالي.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
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
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
استكشاف التطبيق قبل تثبيته
يمكنك تقييم مكتبة أدلة مهارات "إرشادات الويب الحديث" قبل التثبيت من خلال البحث باستخدام طلب بحث أو استرداد أدلتنا حسب المعرّف. لإجراء ذلك، استخدِم الأمر 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":"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، يمكنك بعد ذلك اختيار id الذي يعكس هدفك على أفضل وجه، واستخدام الأمر retrieve
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
في هذه الحالة، سيظهر دليل Markdown لحالة الاستخدام animate-to-from-top-layer في نافذة الجهاز. بالنسبة إلى حالات الاستخدام الأخرى، استبدِل animate-to-from-top-layer بـ أيّ معرّف صالح لحالة الاستخدام.
لماذا يجب استخدام "إرشادات الويب الحديث"؟
تقدّم مهارات "إرشادات الويب الحديث" مزايا لمطوّري الويب مقارنةً بنماذج الذكاء الاصطناعي غير المساعدة لثلاثة أسباب مختلفة:
- تميل وكالات الترميز المستندة إلى الذكاء الاصطناعي إلى استخدام حلول قديمة وغير محدّثة لمشاكل تطوير الويب الحديثة. وتتضمّن هذه الحلول غالبًا JavaScript لتوفير وظائف للمشاكل التي يمكن حلّها بشكل أفضل باستخدام واجهات برمجة تطبيقات CSS وHTML الحديثة.
- في السابق، لم تكن نماذج الذكاء الاصطناعي على دراية بأحدث ميزات منصة الويب أو كانت تتضمّن معلومات غير صحيحة عنها.
- أخيرًا، تميل نماذج الذكاء الاصطناعي إلى تقديم اقتراحات قديمة لا تأخذ في الاعتبار متطلبات المشروع أو معايير التوافق مع المتصفح، بدلاً من تخصيص الإرشادات وفقًا لمتطلبات Baseline لمشروع معيّن.
تعالج مهارات "إرشادات الويب الحديثة" هذه العيوب، وتضمن توفّر الأدوات اللازمة في سير عمل الترميز بمساعدة الذكاء الاصطناعي لاستخدام أحدث ميزات منصة الويب أولاً، مع مراعاة البدائل.
ما هو المحتوى الذي يتضمّنه دليل "الويب الحديث"؟
يتضمّن دليل Modern Web Guidance أفضل الممارسات لأكثر من 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 هو تعريف لتوافق ميزات الويب، إلا أنّه أيضًا جانب قابل للإعداد في مشروعك. يمكنك اختيار هدف أساسي، ثم إعداد مشروعك لاستخدامه عن طريق إضافته إلى ملف AGENTS.md أو CLAUDE.md، على سبيل المثال:
This project's Baseline target is Baseline 2024.
<other project info...>
إرشادات الويب الحديثة والبدائل المتوافقة مع الإصدارات القديمة
تستخدم "إرشادات الويب الحديث" مجموعة كبيرة من ميزات الويب الحديثة. قد تكون بعض هذه الميزات متاحة حديثًا أو على نطاق واسع، ولكن قد يكون توفّر بعضها محدودًا. في الحالات التي لا تكون فيها إحدى الميزات متاحة على نطاق واسع، تقدّم أدلة حالات الاستخدام للموظفين تعليمات محدّدة حول كيفية ضمان توافق أوسع في المتصفّحات التي لا تتوافق مع الميزة. في كثير من الحالات، يتم تنفيذ عمليات الاحتياط كتحسينات تدريجية حيث يمكن استخدام الميزة الحديثة في أي مكان تكون متاحة فيه. إذا كان هناك حاجة إلى polyfill للمتصفحات غير المتوافقة، يتم دائمًا توجيه البرامج إلى تحميلها بشكل مشروط حتى لا تتحمّل تكلفة إلا عند الضرورة.
كيف يتم ضمان الدقة؟
تحتوي كل حالة استخدام في "إرشادات الويب الحديث" على دليل، ويتم تعديل معظم حالات الاستخدام باستمرار لتوجيه وكلاء الذكاء الاصطناعي نحو تقديم نتائج عالية الجودة.
تستخدم حالات الاستخدام التي تمّت معايرتها أداة ضمان جودة آلية لاختبار السلوك الصحيح للوكيل، مع دور مركزي لأداة Playwright:
- بالنسبة إلى كل دليل، يتم إعداد نص برمجي في Playwright لاختبار ما إذا تم اتّباع تفاصيل التنفيذ الواردة في الدليل، مثلاً، ما إذا تم رصد
@media (prefers-reduced-motion: reduce)في المكان المطلوب. - تعمل نصوص Playwright البرمجية هذه على المعايرة باستمرار استنادًا إلى تنفيذ تجريبي مرجعي "صحيح" يتوقّع معدّل نجاح يبلغ% 100. من ناحية أخرى، تتحقّق النصوص البرمجية من تنفيذ معيب عن قصد يتوقّع معدّل نجاح بنسبة% 0.
- إذا لم يؤدِ أيّ من عمليات التنفيذ "الصحيحة" أو المعيبة عمدًا إلى تحقيق معدّلات نجاح تبلغ% 100 و0% على التوالي، يعيد المنشئ المحاولة تلقائيًا باستخدام السياق إلى أن يتم تحقيق معايرة بنسبة% 100.
- أخيرًا، يتم تطبيق التقييمات الشاملة على تطبيق أساسي. أحد هذه التقييمات غير موجّه، وهو عنصر تحكّم، ويستخدم بيانات التدريب التلقائية بدون استدعاء مهارات "إرشادات الويب الحديث" لإكمال مهمة. تتضمّن عملية التقييم الأخرى (التجربة) المهمة نفسها باستخدام مهارات "إرشادات الويب الحديث".
تُجرى عمليات التقييم يوميًا باستخدام أحدث النماذج وعوامل الترميز، ما يمنحنا صورة واضحة عن مدى جودة أداء العوامل مع إرشاداتنا وبدونها. في المتوسط، تُظهر النتائج الأولية تحسّنًا بنسبة 37 نقطة مئوية في الالتزام بأفضل الممارسات الحديثة عندما يكون لدى الوكلاء إمكانية الوصول إلى ميزة Modern Web Guidance. ومع ذلك، قد تختلف نتائجك استنادًا إلى متطلبات مشروعك ونموذجك والطلبات التي تكتبها وأدوات الترميز المستندة إلى الوكلاء المفضّلة لديك.
الخطوات التالية
أصبح لديك الآن نظرة عامة على "إرشادات الويب الحديث" وإمكانية تسهيل اتّباع أفضل ممارسات الويب الحديث في سير عمل الترميز باستخدام الذكاء الاصطناعي. يمكنك الآن استكشاف المهارات وحالات الاستخدام التي تقدّمها "إرشادات الويب الحديث".