راهنمایی وب مدرن، مهارتی است که بهترین شیوههای مدرن را در گردش کار کدنویسی مبتنی بر هوش مصنوعی شما به کار میگیرد. این مهارت به شما کمک میکند تا کدنویس خود را از راهحلهای قدیمی برای مشکلات رایج توسعه وب دور کنید و به سمت راهحلهایی هدایت کنید که باید از ویژگیهای جدیدتر پلتفرم وب استفاده کنند.
نصب
مهارتهای مدرن راهنمای وب را میتوان در طیف گستردهای از عاملها نصب کرد و به شما این امکان را میدهد که گردش کار دلخواه خود را حفظ کنید و در عین حال از راهنماییهای ارائه شده توسط آنها بهرهمند شوید.
رابط خط فرمان (CLI) modern-web-guidance (توصیه میشود)
روش نصب پیشنهادی از طریق رابط خط modern-web-guidance است که توسط تیم کروم ساخته شده است. نصب مهارتها از طریق رابط خط modern-web-guidance به طور خودکار مهارتها را بهروز نگه میدارد. میتوانید از رابط خط فرمان modern-web-guidance به این صورت نصب کنید:
npx modern-web-guidance@latest install
در صورت تمایل، اگر در حال توسعه افزونههای کروم هستید، دستور زیر را توصیه میکنیم:
npx modern-web-guidance@latest install --choose
این یک ویزارد تعاملی را اجرا میکند تا مهارتها را مطابق با تنظیمات برگزیده شما نصب کند.
اگر ترجیح میدهید مهارتهای Modern Web Guidance را بدون استفاده از رابط خط فرمان modern-web-guidance داشته باشید، برای یادگیری نحوه نصب آنها برای عامل مورد نظر خود، ادامه مطلب را بخوانید.
ضد جاذبه
آنتیگراویتی را دانلود کنید و در طول فرآیند نصب، یا از صفحه تنظیمات ، زیر بخش سفارشیسازیها و سپس ساخت با افزونههای گوگل، گزینه «راهنمای وب مدرن» را فعال کنید.
رابط خط فرمان ضد جاذبه
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
رابط خط فرمان جمینی
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
جتبرینز وباستورم
میتوانید مهارتهای راهنمای وب مدرن را در مدیریت مهارتها ، که در تنظیمات > دستیار هوش مصنوعی > مهارتها موجود است، پیدا کنید. یک مهارت را انتخاب کنید تا صفحه جزئیات آن باز شود. برای نصب مهارت، روی دکمه نصب کلیک کنید تا آن را در نمونه IDE فعلی اعمال کنید.
رابط خط فرمان گیتهاب
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
کلود کد
نصب راهنمای وب مدرن برای استفاده با Claude Code سه مرحله دارد:
۱. بازار را اضافه کنید:
/plugin marketplace add GoogleChrome/modern-web-guidance
۲. افزونه را از بازار نصب کنید:
/plugin install modern-web-guidance@googlechrome
۳. افزونهها را دوباره بارگذاری کنید:
/reload-plugins
رابط خط فرمان کمک خلبان
نصب راهنمای وب مدرن برای استفاده با Copilot دو مرحله دارد:
۱. بازار را اضافه کنید:
/plugin marketplace add GoogleChrome/modern-web-guidance
۲. افزونه را از بازار نصب کنید:
/plugin install modern-web-guidance@googlechrome
غاز
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
قبل از نصب کاوش کنید
قبل از نصب، کتابخانه راهنمای مهارت Modern Web Guidance را با جستجو با یک کوئری یا بازیابی راهنماهای ما بر اساس شناسه، ارزیابی کنید. برای انجام این کار، از دستور search CLI برای یافتن شناسه مورد استفاده با استفاده از یک اعلان استفاده کنید:
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 را با هر شناسهی مورد استفادهی معتبری جایگزین کنید.
چرا از راهنمای وب مدرن استفاده کنیم؟
مهارتهای مدرن هدایت وب به سه دلیل متمایز، مزایایی را برای توسعهدهنده وب نسبت به مدلهای هوش مصنوعی بدون کمک فراهم میکند:
- عاملهای کدنویسی هوش مصنوعی معمولاً به طور پیشفرض به راهحلهای قدیمی و منسوخشده برای مشکلات توسعه وب مدرن روی میآورند. این راهحلها اغلب حاوی جاوا اسکریپت هستند تا قابلیتهایی را برای مشکلاتی فراهم کنند که توسط APIهای مدرن CSS و HTML بهتر حل میشوند.
- مدلهای هوش مصنوعی از لحاظ تاریخی از جدیدترین ویژگیهای پلتفرم وب آگاه نبودهاند یا اطلاعات نادرستی در مورد آنها داشتهاند.
- در نهایت، مدلهای هوش مصنوعی تمایل دارند توصیههای قدیمی ارائه دهند که الزامات پروژه یا معیارهای پشتیبانی مرورگر را در نظر نمیگیرند - به جای اینکه راهنماییها را با الزامات پایه یک پروژه مشخص تطبیق دهند.
مهارتهای مدرن راهنمای وب، این کاستیها را برطرف میکنند و تضمین میکنند که گردش کار کدنویسی مبتنی بر هوش مصنوعی شما، ابزارهایی برای پذیرش ویژگیهای جدیدتر پلتفرم وب در ابتدا و با در نظر گرفتن احتمالات جایگزین دارد.
راهنمای وب مدرن چیست؟
راهنمای وب مدرن شامل بهترین شیوهها برای بیش از ۱۰۰ مورد استفاده در توسعه وب در چندین رشته اصلی است. در باطن، این یک مهارت عامل واحد است که به عامل کدنویسی شما دستور میدهد چگونه رابط خط modern-web-guidance را فراخوانی کند تا بهترین راهنمایی را برای مورد استفاده شما پیدا و بازیابی کند.
- تجربه کاربری: نمایش انتقالها، استایلدهی
scrollbar-colorبا CSS و انیمیشنهای ورود و خروج. - CSS: کوئریهای کانتینر، فضاهای رنگی مدرن مانند
oklch، طرحبندی زیرشبکه CSS،text-wrapو اصلاح ارتفاع خط در تایپوگرافی. - عملکرد: تشخیص تعامل با Next Paint (INP)،
scheduler.yieldبرای تقسیم وظایف طولانی، زمانبندی وظایف پسزمینه و اولویتبندی بارگذاری تصویر. - فرمها: تغییر خودکار اندازه فیلدهای ورودی (
field-sizing: content) و استایلهای اعتبارسنجی دقیق با:user-invalid. - اجزای رابط کاربری داخلی: کنترل مستقیم روی دیالوگها، تعیین موقعیت لنگر CSS برای راهنماهای ابزار و
popover. - قابلیت دسترسی: اعلانهای خطای قابل دسترس و مدیریت فوکوس صفحهکلید.
- هوش مصنوعی داخلی: از مدلهای کلاینت محلی و روی دستگاه (APIهای تشخیص زبان بومی، خلاصهسازی و ترجمه) استفاده کنید.
- کلیدهای عبور: ثبت، احراز هویت و مدیریت کلیدهای عبور.
اینها تعدادی از موارد استفاده از هر رشته هستند. برای مشاهده همه موارد استفاده، میتوانید لیست کامل موارد استفاده را مشاهده کنید.
خط پایه
Baseline برای توسعهدهندگان، شفافیتی در مورد اینکه کدام ویژگیهای وب در موتورهای مرورگر اصلی قابل تعامل هستند، ارائه میدهد. اگر یک ویژگی وب Baseline باشد، میتوانید به سطح سازگاری مرورگر اعتماد کنید. ویژگیهای وب در یکی از سه دسته تعریف شده توسط Baseline قرار میگیرند:
- دسترسی محدود به این معنی است که این ویژگی قابل تعامل نیست.
- «بهتازگی در دسترس قرار گرفته» به این معنی است که این ویژگی اخیراً و طی ۳۰ ماه گذشته قابلیت تعاملپذیری پیدا کرده است.
- منظور از «در دسترس بودن گسترده» این است که این ویژگی حداقل به مدت 30 ماه یا بیشتر قابل استفاده بوده است.
اگرچه Baseline تعریفی برای قابلیت همکاری ویژگیهای وب است، اما جنبهای قابل تنظیم از پروژه شما نیز میباشد. میتوانید یک Baseline target انتخاب کنید ، سپس پروژه خود را برای استفاده از آن با افزودن آن به فایل AGENTS.md یا CLAUDE.md خود پیکربندی کنید، به عنوان مثال:
This project's Baseline target is Baseline 2024.
<other project info...>
راهنماییهای مدرن وب و ویژگیهای جایگزین
راهنمای وب مدرن از طیف گستردهای از ویژگیهای وب مدرن استفاده میکند. برخی از این ویژگیها ممکن است به صورت پایهای (Baseline) و جدید (Newly) یا به طور گسترده (Widely) در دسترس باشند، اما برخی دیگر ممکن است به صورت محدود (Limited) در دسترس باشند. در مواردی که یک ویژگی به طور گسترده در دسترس نیست، راهنماهای مورد استفاده، دستورالعملهای خاصی را در مورد چگونگی اطمینان از سازگاری گستردهتر در مرورگرهایی که از آن ویژگی پشتیبانی نمیکنند، در اختیار عاملها قرار میدهند. در بسیاری از موارد، fallbackها به عنوان پیشرفتهای تدریجی پیادهسازی میشوند که در آن ویژگی مدرن میتواند در هر جایی که پشتیبانی میشود، مورد استفاده قرار گیرد. اگر برای مرورگرهای پشتیبانی نشده به polyfill نیاز باشد، به عاملها همیشه دستور داده میشود که آنها را به صورت مشروط بارگذاری کنند تا فقط در صورت لزوم هزینهای متحمل شوند.
دقت چگونه تضمین میشود؟
هر مورد استفاده در راهنمای وب مدرن شامل یک راهنما است و اکثر موارد استفاده به طور مداوم کالیبره میشوند تا عوامل هوش مصنوعی را به سمت خروجی با کیفیت هدایت کنند.
موارد استفادهای که کالیبره میشوند، از یک مهار خودکار QA برای آزمایش رفتار صحیح عامل استفاده میکنند و Playwright نقش اصلی را ایفا میکند:
- برای هر راهنما، یک اسکریپت Playwright توسعه داده میشود تا بررسی شود که آیا جزئیات پیادهسازی راهنما رعایت شدهاند یا خیر - برای مثال، آیا
@media (prefers-reduced-motion: reduce)در جایی که الزامی است، رعایت شده است یا خیر. - این اسکریپتهای Playwright به طور مداوم در برابر یک پیادهسازی نمایشی مرجع «صحیح» که انتظار نرخ قبولی ۱۰۰٪ را دارد، کالیبره میشوند. از سوی دیگر، اسکریپتها در برابر یک پیادهسازی عمداً ناقص که انتظار نرخ قبولی ۰٪ را دارد، بررسی میشوند.
- اگر یکی یا هر دو پیادهسازی «صحیح» و پیادهسازیهای عمداً ناقص نتوانند به ترتیب نرخ قبولی ۱۰۰٪ و ۰٪ ایجاد کنند، یک مولد به طور خودکار با استفاده از context تا زمانی که کالیبراسیون ۱۰۰٪ حاصل شود، دوباره تلاش میکند.
- در نهایت، ارزیابیهای سرتاسری روی یک برنامه پایه اعمال میشوند. یکی از این ارزیابیها بدون هدایت است که یک کنترل است و از دادههای آموزشی پیشفرض بدون فراخوانی مهارتهای Modern Web Guidance برای تکمیل یک وظیفه استفاده میکند. ارزیابی دیگر (آزمایش) همان وظیفه را با استفاده از مهارتهای Modern Web Guidance بررسی میکند.
ارزیابیهای ما روزانه با مدلهای پیشرفته و عوامل کدنویسی انجام میشود و تصویر روشنی از عملکرد عوامل با و بدون راهنمایی ما به ما میدهد. به طور متوسط، نتایج اولیه نشان میدهد که وقتی عوامل به راهنمای وب مدرن مجهز هستند، ۳۷ درصد بهبود در پایبندی به بهترین شیوههای مدرن وجود دارد. با این حال، نتایج شما ممکن است بسته به الزامات پروژه، مدل، دستورالعملهایی که مینویسید و ابزارهای کدنویسی عاملمحور مورد نظر شما متفاوت باشد.
مراحل بعدی
اکنون شما یک مرور کلی از Modern Web Guidance و پتانسیل آن برای آسانتر کردن اتخاذ بهترین شیوههای وب مدرن در گردش کار کدنویسی هوش مصنوعی خود دارید. اکنون میتوانید مهارتها و موارد استفاده ارائه شده توسط Modern Web Guidance را بررسی کنید.