Modern Web Guidance হল দক্ষতার একটি সেট যা আপনার কোডিং এজেন্টে সরাসরি ওয়েব প্ল্যাটফর্মের দক্ষতা, পেশাদার পদ্ধতি এবং ব্রাউজার কম্প্যাটিবিলিটি ডেটা এম্বেড করে। এটি আপনার কোডিং এজেন্টকে পুরনো প্যাটার্ন থেকে দূরে সরিয়ে নিয়ে গিয়ে আধুনিক ওয়েব প্ল্যাটফর্মের ক্ষমতা ও কার্যকারিতা ব্যবহার করে এমন সমাধানের দিকে নিয়ে যেতে সাহায্য করে।
ইনস্টল করা
Modern Web Guidance ইনস্টল করা যাবে এবং স্কিল সাপোর্ট করে এমন যেকোনও কোডিং এজেন্টের সাথে ব্যবহার করা যাবে।
modern-web-guidance CLI (সাজেস্ট করা হয়েছে)
Chrome টিমের তৈরি করা modern-web-guidance CLI-এর মাধ্যমে ইনস্টল করার পদ্ধতিটি সাজেস্ট করা হয়। modern-web-guidance CLI-এর মাধ্যমে Modern Web Guidance ইনস্টল করলে অটোমেটিক আপডেট চালু হয়ে যাবে। আপনি modern-web-guidance CLI থেকে এইভাবে ইনস্টল করতে পারবেন:
npx modern-web-guidance@latest install
বিকল্প হিসেবে, আপনি Chrome এক্সটেনশন ডেভেলপ করলে, আমরা নিম্নলিখিত কমান্ড সাজেস্ট করি:
npx modern-web-guidance@latest install --choose
এটি আপনার পছন্দ অনুযায়ী স্কিল ইনস্টল করার জন্য একটি ইন্ট্যার্যাক্টিভ উইজার্ড চালায়।
আপনি যদি modern-web-guidance CLI ব্যবহার না করে Modern Web Guidance ইনস্টল করতে চান, তাহলে নিম্নলিখিত এজেন্ট-নির্দিষ্ট নির্দেশাবলী দেখুন। মনে রাখবেন, এইসব বিকল্পের বেশিরভাগই অটোমেটিক আপডেট করার সুবিধা দেয় না।
Antigravity
Antigravity ডাউনলোড করুন এবং ইনস্টলেশন ফ্লো চলাকালীন অথবা আপনার সেটিংস পৃষ্ঠার কাস্টমাইজেশন বিকল্পের অধীনে Build with Google প্লাগ-ইন থেকে "modern-web-guidance" চালু করুন।
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 খুঁজে পাবেন, যা সেটিংস > AI Assistant > স্কিল বিকল্পের মধ্যে উপলভ্য। কোনও স্কিলের বিবরণ পৃষ্ঠা খুলতে সেটি বেছে নিন। স্কিল ইনস্টল করতে, বর্তমান 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-এর সাথে ব্যবহার করার জন্য Modern Web Guidance ইনস্টল করতে তিনটি ধাপ অনুসরণ করতে হয়:
১. মার্কেটপ্লেস যোগ করুন:
/plugin marketplace add GoogleChrome/modern-web-guidance
২. মার্কেটপ্লেস থেকে প্লাগ-ইন ইনস্টল করুন:
/plugin install modern-web-guidance@googlechrome
৩. প্লাগ-ইন আবার লোড করুন:
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
Copilot CLI
Copilot-এর সাথে ব্যবহার করার জন্য Modern Web Guidance ইনস্টল করতে দুটি ধাপ অনুসরণ করতে হয়:
১. মার্কেটপ্লেস যোগ করুন:
/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
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 গাইড লাইব্রেরি মূল্যায়ন করুন। এটি করতে, প্রম্পট ব্যবহার করে ইউজ কেস আইডি খুঁজতে CLI-এর 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"
এই ক্ষেত্রে, animate-to-from-top-layer ব্যবহারের উদাহরণের জন্য গাইড মার্কডাউন টার্মিনালে দেখা যাবে। অন্যান্য গাইডের জন্য, animate-to-from-top-layer-এর পরিবর্তে যেকোনও সঠিক গাইড আইডি ব্যবহার করুন।
Modern Web Guidance কেন ব্যবহার করব?
Modern Web Guidance তিনটি কারণে ওয়েব ডেভেলপারদের জন্য সহায়তা ছাড়া AI মডেলের থেকে বেশি সুবিধা প্রদান করে:
- AI কোডিং এজেন্ট সাধারণত আধুনিক ওয়েব ডেভেলপমেন্ট সংক্রান্ত সমস্যার ক্ষেত্রে পুরনো, আউটডেটেড সমাধান ডিফল্ট হিসেবে ব্যবহার করে। এইসব সমাধানে প্রায়ই JavaScript থাকে যা এমন সমস্যার জন্য কার্যকারিতা প্রদান করে যেগুলি আধুনিক CSS এবং HTML API-এর মাধ্যমে আরও ভালোভাবে সমাধান করা যায়।
- AI মডেলগুলি ঐতিহাসিকভাবে লেটেস্ট ওয়েব প্ল্যাটফর্ম ফিচার সম্পর্কে সচেতন নয়—বা ভুল তথ্য রয়েছে।
- সবশেষে, AI মডেলগুলি প্রায়ই পুরনো সাজেশন দেয় যা প্রোজেক্টের প্রয়োজনীয়তা বা ব্রাউজার সাপোর্ট সংক্রান্ত মাপকাঠি বিবেচনা করে না—বরং কোনও নির্দিষ্ট প্রোজেক্টের বেসলাইন প্রয়োজনীয়তা অনুযায়ী সাজেশন দেয়।
Modern Web Guidance এই ত্রুটিগুলি দূর করে এবং আপনার AI-সহায়তা প্রাপ্ত কোডিং ওয়ার্কফ্লোতে যাতে নতুন ওয়েব প্ল্যাটফর্ম ফিচার গ্রহণ করার টুল থাকে তা নিশ্চিত করে—এবং ফলব্যাক মাথায় রেখে।
Modern Web Guidance-এ কী আছে?
Modern Web Guidance-এ একাধিক মূল ডিসিপ্লিন জুড়ে ১০০টিরও বেশি ওয়েব ডেভেলপমেন্ট ব্যবহারের ক্ষেত্রে পেশাদার পদ্ধতি অন্তর্ভুক্ত রয়েছে। এটি আসলে একটি এজেন্ট স্কিল যা আপনার কোডিং এজেন্টকে নির্দেশ দেয় যে কীভাবে modern-web-guidance CLI কল করে আপনার ব্যবহারের ক্ষেত্রে সবচেয়ে ভালো নির্দেশিকা খুঁজে বের করে নিয়ে আসতে হবে।
- ব্যবহারকারীর অভিজ্ঞতা: ভিউ ট্রানজিশন, CSS
scrollbar-colorস্টাইলিং এবং এন্ট্রি ও এক্সিট অ্যানিমেশন। - CSS: কন্টেনার কোয়েরি,
oklch-এর মতো আধুনিক কালার স্পেস, CSS সাবগ্রিড লেআউট,text-wrapএবং টাইপোগ্রাফি লাইন-হাইট ট্রিমিং। - পারফর্ম্যান্স: Interaction to Next Paint (INP) ডায়াগনস্টিক,
scheduler.yieldবড় টাস্ককে ছোট ছোট টাস্কে ভাগ করা, ব্যাকগ্রাউন্ড টাস্ক শিডিউল করা এবং ছবি লোড করার ক্ষেত্রে অগ্রাধিকার দেওয়া। - ফর্ম: অটো-সাইজিং ইনপুট ফিল্ড (
field-sizing: content) এবং:user-invalid-এর সাথে সঠিক যাচাইকরণ স্টাইল। - বিল্ট-ইন UI কম্পোনেন্ট: ডায়ালগের উপর সরাসরি কন্ট্রোল, টুলটিপের জন্য CSS অ্যাঙ্কর পজিশনিং এবং
popover। - অ্যাক্সেসিবিলিটি: অ্যাক্সেসযোগ্য ত্রুটি সংক্রান্ত ঘোষণা এবং কীবোর্ড ফোকাস ম্যানেজমেন্ট।
- বিল্ট-ইন AI: লোকাল, অন-ডিভাইস ক্লায়েন্ট মডেল (নেটিভ ভাষা শনাক্তকরণ, সারসংক্ষেপ ও অনুবাদ API) ব্যবহার করুন।
- পাসকী: পাসকী রেজিস্ট্রেশন, যাচাইকরণ ও ম্যানেজমেন্ট।
প্রতিটি বিভাগ থেকে কয়েকটি গাইড এখানে দেওয়া হল। সব গাইড দেখতে, আপনি গাইডের সম্পূর্ণ তালিকা দেখতে পারেন।
বেসলাইন
বেসলাইন ডেভেলপারদের কাছে স্পষ্ট করে দেয় যে কোন কোন ওয়েব ফিচার প্রধান ব্রাউজার ইঞ্জিনে ইন্টারঅপারেবল। কোনও ওয়েব ফিচার বেসলাইন হলে, আপনি ব্রাউজার কম্প্যাটিবিলিটির লেভেল বিশ্বাস করতে পারেন। ওয়েব ফিচার বেসলাইন দ্বারা সংজ্ঞায়িত তিনটি বিভাগের মধ্যে একটির মধ্যে পড়ে:
- সীমিত উপলভ্যতা মানে ফিচারটি ইন্টারঅপারেবল নয়।
- নতুন উপলভ্য মানে হল, ফিচারটি সম্প্রতি গত ৩০ মাসের মধ্যে ইন্টারঅপারেবল হয়েছে।
- ব্যাপকভাবে উপলভ্য মানে হল ফিচারটি কমপক্ষে ৩০ মাস বা তার বেশি সময় ধরে ইন্টারঅপারেবল।
বেসলাইন হল ওয়েব ফিচারের ইন্টারঅপারেবিলিটির সংজ্ঞা, এটি আপনার প্রোজেক্টের কনফিগার করার মতো একটি দিকও। আপনি বেসলাইন টার্গেট বেছে নিতে পারেন, তারপর আপনার AGENTS.md বা CLAUDE.md ফাইলে এটি যোগ করে ব্যবহার করার জন্য আপনার প্রোজেক্ট কনফিগার করতে পারেন, যেমন:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance এবং ফিচার ফলব্যাক
Modern Web Guidance-এ আধুনিক ওয়েব ফিচারের একটি বড় তালিকা ব্যবহার করা হয়। এর মধ্যে কিছু বেসলাইন নতুন বা ব্যাপকভাবে উপলভ্য হতে পারে, তবে কিছু সীমিতভাবে উপলভ্য হতে পারে। কোনও ফিচার ব্যাপকভাবে উপলভ্য না হলে, ব্যবহার সংক্রান্ত নির্দেশিকা এজেন্টদের নির্দিষ্ট নির্দেশাবলী প্রদান করে যাতে তারা নিশ্চিত করতে পারেন যে ফিচারটি কাজ করে না এমন ব্রাউজারেও যেন সেটি কাজ করে। অনেক ক্ষেত্রে, ফলব্যাক প্রোগ্রেসিভ এনহ্যান্সমেন্ট হিসেবে প্রয়োগ করা হয় যেখানে আধুনিক ফিচার যেখানেই কাজ করে সেখানেই ব্যবহার করা যায়। যেসব ব্রাউজার কাজ করে না সেগুলির জন্য পলিফিল প্রয়োজন হলে, এজেন্টদের সবসময় শর্তসাপেক্ষে সেগুলি লোড করার নির্দেশ দেওয়া হয় যাতে শুধুমাত্র প্রয়োজন হলেই খরচ হয়।
নির্ভুলতা কীভাবে নিশ্চিত করা হয়?
Modern Web Guidance-এ প্রতিটি ব্যবহারের ক্ষেত্রে এক সেট মূল্যায়ন থাকে যা কোয়ালিটি আউটপুট নিশ্চিত করার জন্য ক্রমাগত ক্যালিব্রেট করা হয়।
এজেন্টের সঠিক আচরণ পরীক্ষা করার জন্য ইউজ কেস ইভ্যালুয়েশন একটি অটোমেটেড QA হার্নেস রান করে, যেখানে Playwright একটি কেন্দ্রীয় ভূমিকা পালন করে:
- প্রতিটি গাইডের জন্য, গাইডের প্রয়োগের বিবরণ অনুসরণ করা হয়েছে কিনা তা পরীক্ষা করার জন্য একটি Playwright স্ক্রিপ্ট তৈরি করা হয়েছে—উদাহরণস্বরূপ, যেখানে প্রয়োজন সেখানে
@media (prefers-reduced-motion: reduce)লক্ষ্য করা হয়েছে কিনা। - এইসব Playwright স্ক্রিপ্ট ক্রমাগত একটি "সঠিক" রেফারেন্স ডেমো ইমপ্লিমেন্টেশনের সাথে তুলনা করে, যা ১০০% পাস রেট আশা করে। অন্যদিকে, স্ক্রিপ্টগুলি ইচ্ছাকৃতভাবে ত্রুটিপূর্ণ প্রয়োগের বিরুদ্ধে চেক করে যা ০% পাসের হার আশা করে।
- "সঠিক" এবং ইচ্ছাকৃতভাবে ত্রুটিপূর্ণ প্রয়োগের মধ্যে যেকোনও একটি বা দুটিই যদি যথাক্রমে ১০০% এবং ০% পাসের হার তৈরি করতে ব্যর্থ হয়, তাহলে ১০০% ক্যালিব্রেশন অর্জন না হওয়া পর্যন্ত একটি জেনারেটর অটোমেটিক প্রসঙ্গ ব্যবহার করে আবার চেষ্টা করে।
- সবশেষে, বেস অ্যাপ্লিকেশনে এন্ড-টু-এন্ড মূল্যায়ন প্রয়োগ করা হয়। এইসব Eval-এর মধ্যে একটি হল আনগাইডেড, যা একটি কন্ট্রোল, কোনও টাস্ক সম্পূর্ণ করার জন্য Modern Web Guidance-কে ইনভোক না করে ডিফল্ট ট্রেনিং ডেটা ব্যবহার করে। অন্য একটি মূল্যায়ন (এক্সপেরিমেন্ট) Modern Web Guidance ব্যবহার করে একই টাস্কের সমাধান করে।
আমাদের মূল্যায়ন সপ্তাহে একাধিকবার অত্যাধুনিক মডেল এবং কোডিং এজেন্টের মাধ্যমে চালানো হয়, যা আমাদের স্পষ্ট ধারণা দেয় যে এজেন্টরা আমাদের নির্দেশনার সাথে এবং ছাড়া কতটা ভালো পারফর্ম করে। গড়ে, প্রাথমিক ফলাফল দেখায় যে এজেন্টরা 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 সম্পর্কে একটি সাধারণ ওভারভিউ পেয়েছেন এবং আপনার AI কোডিং ওয়ার্কফ্লোতে আধুনিক ওয়েব সংক্রান্ত পেশাদার পদ্ধতি গ্রহণ করা সহজ করার জন্য এর সম্ভাবনা রয়েছে। আপনি এখন Modern Web Guidance-এর দেওয়া গাইড এক্সপ্লোর করতে পারবেন।