আধুনিক ওয়েব সমস্যা সমাধানের নির্দেশিকা

যদিও মডার্ন ওয়েব গাইডেন্স আপনার ডেভেলপমেন্টকে একটি 'ডিফল্টরূপে সঠিক' পদ্ধতির দিকে নিয়ে যাওয়ার লক্ষ্য রাখে, তবুও আপনি মাঝে মাঝে এজেন্ট অ্যাক্টিভেশন, বাস্তবায়নের নির্ভুলতা, বা ফিচার ডিসকভারি নিয়ে সমস্যার সম্মুখীন হতে পারেন। এই বিভাগে সাধারণ সমস্যাগুলো সমাধানে সাহায্য করার জন্য ডায়াগনস্টিক পদক্ষেপ দেওয়া হয়েছে, যেমন আপনার প্রম্পট দ্বারা মডার্ন ওয়েব স্কিলটি সঠিকভাবে ট্রিগার হচ্ছে কিনা তা নিশ্চিত করা অথবা কোড ফলব্যাকগুলো আপনার প্রোজেক্টের প্রতিষ্ঠিত বেসলাইন স্ট্যাটাসের সাথে সামঞ্জস্যপূর্ণ কিনা তা যাচাই করা। আপনি যদি ক্রমাগত প্রযুক্তিগত বাধার সম্মুখীন হন বা কোনো পুরোনো গাইডেন্স খুঁজে পান, তাহলে আমরা আপনাকে একটি ইস্যু ফাইল করার জন্য উৎসাহিত করছি, যাতে আমরা এই রিসোর্সগুলোকে নির্ভুল এবং কার্যকর রাখতে পারি।

এজেন্ট কর্তৃক আধুনিক ওয়েব দক্ষতা শনাক্ত না হওয়ার কারণ নির্ণয় করুন

যে কোনো প্রম্পট যা স্কিল এক্সটেনশনটি ইনস্টল করেছে, সেটি কোনোভাবে 'মডার্ন ওয়েব গাইডেন্স' ব্যবহার করে এটি সক্রিয় করতে সক্ষম হবে, কিন্তু যদি কোনো কারণে আপনার ব্যবহৃত এজেন্টটির সমস্যা হয়, তাহলে আপনি সরাসরি এটিকে এইভাবে কল করতে পারেন:

/modern-web-guidance <your prompt>

এটি সেইসব AI-চালিত IDE-এর ক্ষেত্রে প্রযোজ্য যেগুলো npx skills add <skill-extension> গ্রহণ করে।

'বিভ্রমমূলক' কোড বা অনুমানভিত্তিক বাস্তবায়ন নির্ণয় করুন

এটি একটি সাধারণ ঘটনা যেখানে এলএলএম মডেল কোনো পূর্ব সতর্কবার্তা ছাড়াই জ্ঞানের ঘাটতি পূরণ করে ফেলে। এজেন্টকে তথ্য উদ্ভাবন করা থেকে বিরত রাখতে, আমরা দেখেছি যে আপনার প্রম্পটগুলোর সাথে নিম্নলিখিত নির্দেশনাটি যুক্ত করা খুবই সহায়ক।

Bring up knowledge gaps and don't attempt to guess implementation. List them as open questions."

নির্দিষ্ট নির্দেশনা সক্রিয় করতে ব্যর্থতা নির্ণয় করুন।

আপনি যদি কোনো নির্দিষ্ট ফিচার ব্যবহারের ক্ষেত্রকে লক্ষ্য করে থাকেন এবং এজেন্ট সেটিকে খুঁজে না পায়, তবে সঠিক আবিষ্কারযোগ্যতার জন্য আপনার প্রম্পটগুলোতে নির্দিষ্ট কীওয়ার্ড এবং অ্যাঙ্কর আবশ্যকতা অন্তর্ভুক্ত করুন। এটি এজেন্টকে প্রাসঙ্গিক নির্দেশিকা ট্র্যাক (উদাহরণস্বরূপ: "ভিউ ট্রানজিশন", "এলসিপি অপটিমাইজেশন") শনাক্ত করতে সাহায্য করে।

/modern-web-guidance Execute LCP optimization against my Progressive Web App.

এজেন্টের চিন্তাধারা অনুসরণ করুন:

• যদি এটি মডার্ন ওয়েব গাইডেন্স স্কিলটি (উদাহরণস্বরূপ, modern-web/SKILL.md ) খুঁজে পায়, তবে অনুসরণ করুন।
• সার্চ কলটি খুঁজুন—উদাহরণস্বরূপ, node modern-web.mjs search "scroll snap" এবং শনাক্ত করুন যে কীওয়ার্ড ও প্রাপ্ত গাইডগুলো আপনার প্রত্যাশা অনুযায়ী ছিল কিনা। সার্চ ফলাফলের মধ্যে সবচেয়ে উপরের গাইডটিই আপনার প্রম্পটের জন্য প্রয়োগ করার জন্য বেছে নেওয়া হয়।

/modern-web-guidance Create a new folder and create a carousel web app for me that implements scroll-snap.

...

● Bash(node --experimental-strip-types serving/bin/modern-web.ts search "carousel scroll-snap")
  ⎿  [{"id":"carousel-item-effects","description":"Create a carousel of slides with images or other visual elements, where each slide animates as they enter/center/exit their scroller. For example, the slides may fade-in/fade-out, rotate, get bigger or smaller, etc.","category":"user-experience","featuresUsed":["Scroll-driven animations","Scroll snap"]},
            {"id":"light-dismiss-content-overlay","description":"Create swipeable layered navigation menus using native overlays and scroll gestures.","category":"user-experience","featuresUsed":["Popover","Scroll snap","inert"]},
            {"id":"scroll-target-on-load","description":"Build a scrollable list of elements (e.g. a carousel of images or a chat conversation thread) that can be displayed with a particular element scrolled into view on the initial render.","category":"user-experience","featuresUsed":["scroll-initial-target","scrollIntoView()"]},
            {"id":"parallax-scroll-effects","description":"Create scroll-based effects (such as parallax) where foreground and background layers move at different rates, creating a sense
            of depth as the user scrolls.","category":"user-experience","featuresUsed":["Scroll-driven animations"]},
            {"id":"pull-to-reveal","description":"Build a pull-to-reveal feature that would enable the user to pull down on the screen to reveal more content, like a search bar.", "category":"user-experience","featuresUsed":["scroll-initial-target","Scroll snap"]}]

...

▾ Thought for 1s
  Ah, let's look at the actual folder names under `guides/user-experience/` that we listed earlier to find the exact ID mapping.
  Let's see the folders we found earlier:
  - `carousel-slide-effects`
  - `carousel-snap-highlights`
  - `scroll-snap-realtime-feedback`
  - `scroll-snap-state-sync`

  Ah! The ID in the filesystem is `carousel-slide-effects`, while the search index returns `carousel-item-effects`.

• প্রাসঙ্গিক নির্দেশিকাগুলির জন্য অনুসন্ধান কমান্ডটি নিজেই চালান:

# Search for relevant guides
npx modern-web-guidance@latest search "scroll snap"

নির্দিষ্ট ওয়েব ব্রাউজার বৈশিষ্ট্যগুলির জন্য অনুপস্থিত ফলব্যাকগুলি নির্ণয় করুন

এটি আপনার প্রোজেক্টে সেট করা বেসলাইন স্ট্যাটাসের উপর নির্ভর করে। যদি এপিআইটি খুব সম্প্রতি রিলিজ করা হয়ে থাকে, তাহলে এজেন্টের নির্ভর করার মতো কোনো সমতুল্য ফলব্যাক নাও থাকতে পারে, অথবা এটি এমন একটি ফিচার যা যথেষ্ট দীর্ঘ সময় ধরে "বেসলাইন ওয়াইডলি" উপলব্ধ থাকায় ফলব্যাক বা পলিফিলের প্রয়োজন নাও হতে পারে।

পুরানো প্রশিক্ষণ ডেটার পক্ষপাত নির্ণয় করুন

যদি এজেন্ট আধুনিক ব্রাউজার এপিআই-এর পরিবর্তে কোনো পুরোনো লাইব্রেরির পরামর্শ দেয়, তাহলে সম্ভবত এটি তার বেস ট্রেনিং ডেটার উপর নির্ভর করছে অথবা আপনার বেসলাইন স্ট্যাটাসটি এমনভাবে কনফিগার করা আছে যে এটি এখনও সেই ফিচারটি সাপোর্ট করে না এবং ফলব্যাকটি প্রয়োগ করা হয়েছে।

পুনরায় যাচাই করার জন্য, আপনি CLI ব্যবহার করে গাইডেন্স লাইব্রেরিতে স্পষ্টভাবে অনুসন্ধান করার মাধ্যমে স্কিলটিকে অগ্রাধিকার দিতে বাধ্য করতে পারেন:

# Search for a specific feature
npx modern-web-guidance search "<feature>"

পুরানো নির্দেশিকা নির্ণয় করুন

আমাদের তথ্য হালনাগাদ থাকা অত্যন্ত গুরুত্বপূর্ণ, তাই কোনো গাইড থেকে প্রয়োগ করা কোড পুরোনো হয়ে গেছে বলে মনে হলে, অনুগ্রহ করে রিপোজিটরিতে একটি ইস্যু ফাইল করুন। এটি করার সময়, এই মর্মে প্রমাণ সংগ্রহ করুন যে এজেন্ট আপনাকে যা সুপারিশ করছে তা আপনার এআই-চালিত IDE দ্বারা ব্যবহৃত LLM মডেলের বেস ট্রেনিং ডেটা থেকে নয়, বরং modern-web স্কিল এবং এর গাইডগুলো থেকে নেওয়া হয়েছে।

আপনার এজেন্ট উইন্ডো বা টার্মিনালে, আপনি হয়তো এর চিন্তাভাবনা ট্র্যাক করতে পারবেন, তবে এটি কীভাবে কোড পরিবর্তনের সিদ্ধান্তে পৌঁছালো, তা জানাতেও আপনি এটিকে জিজ্ঞাসা করতে পারেন। একবার আপনি এই সিদ্ধান্তে পৌঁছে গেলে যে এটি সত্যিই স্কিল থেকেই এসেছে, সেই ফিডব্যাক এবং প্রমাণ আমাদের কাছে পৌঁছে দিন।

প্রতিক্রিয়া

এই নতুন ফিচারগুলো সম্পর্কে আপনার যদি কোনো অতিরিক্ত প্রশ্ন বা মতামত থাকে, তাহলে আমাদের গিটহাব রিপোজিটরিতে কোনো ইস্যু ফাইল করার আগে মডার্ন ওয়েব গাইডেন্সে কীভাবে অবদান রাখতে হয়, সে সম্পর্কে প্রথমে পড়ে নিন । ইস্যুটি তৈরি করার সময়, এজেন্টের প্রাথমিক প্রম্পট, এজেন্টের চিন্তাভাবনার প্রক্রিয়ার স্ক্রিনশট ও লগ এবং সেই চিন্তাভাবনার উপর ভিত্তি করে প্রস্তাবিত চূড়ান্ত কোড পরিবর্তনটি প্রদান করুন।