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

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

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

যখন মডার্ন ওয়েব গাইডেন্স ইনস্টল করা হয়, তখন এজেন্টদের যেকোনো ওয়েব ডেভেলপমেন্ট কাজের জন্য এটি ব্যবহার করার নির্দেশ দেওয়া হয়। তবে, এজেন্টরা মাঝে মাঝে এই নির্দেশগুলো উপেক্ষা করে।

আপনার প্রম্পটের শেষে "use modern-web-guidance"-এর মতো একটি বাক্যাংশ যুক্ত করে আপনি এজেন্টকে মডার্ন ওয়েব গাইডেন্স ব্যবহার করার জন্য স্পষ্টভাবে নির্দেশ দিতে পারেন।

কিছু এজেন্ট নির্দিষ্ট সিনট্যাক্স ব্যবহার করে সরাসরি স্কিল চালু করাও সমর্থন করে, যেমন এজেন্টের উপর নির্ভর করে /modern-web-guidance বা $modern-web-guidance ।

নিশ্চিত না হলে আপনার এজেন্টের ডকুমেন্টেশন দেখুন, অথবা modern-web-guidance স্কিলটি কীভাবে সরাসরি চালু করতে হয় তা আপনার এজেন্টকে জিজ্ঞাসা করুন।

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

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

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

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

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

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

• আউটপুটটি পরীক্ষা করে দেখুন এটি modern-web-guidance স্কিলটি চালু করেছে কিনা।
• সার্চ কলটি খুঁজুন—উদাহরণস্বরূপ, npx -y modern-web-guidance@latest search "carousel scroll snap" —এবং শনাক্ত করুন যে কীওয়ার্ড ও তার ফলে প্রাপ্ত গাইডগুলো আপনার প্রত্যাশা অনুযায়ী ছিল কি না।
• যাচাই করুন যে retrieve কলটি প্রাসঙ্গিক গাইডটি অনুরোধ করেছে কিনা, উদাহরণস্বরূপ: npx -y modern-web-guidance@latest retrieve "carousel-snap-highlights,carousel-slide-effects,scroll-snap-state-sync" ।

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

...

● Bash(npx -y modern-web-guidance@latest search "carousel scroll snap" --skill-version 2026_05_16-c5e7870)
  ⎿  [{"id":"carousel-snap-highlights","description":"Visually highlight the currently snapped non-interactive item in scroll-snapping carousels, galleries, or full-page swipe experiences. For example, expanding a card when snapped, or revealing hidden
      content.","category":"user-experience","featuresUsed":["Container scroll-state queries"],"tokenCount":1442,"similarity":0.7783},
      {"id":"carousel-slide-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"],"tokenCount":2105,"similarity":0.6625},
      {"id":"scroll-snap-state-sync","description":"Synchronize navigation indicators, linked content panels, and analytics tracking with the actively snapped item in a scrollable container.","category":"user-experience","featuresUsed":["Scroll snap events","Scroll
      snap"],"tokenCount":1053,"similarity":0.6166},
      {"id":"scroll-snap-realtime-feedback","description":"Provide real-time visual feedback in linked UI elements while a user scrolls through snap-aligned content, before the scroll gesture completes.","category":"user-experience","featuresUsed":["Scroll snap events","Scroll
      snap"],"tokenCount":1886,"similarity":0.5664},
      {"id":"navigation-drawer","description":"Create a navigation drawer component that, when triggered from a menu button, slides in from the side overlayed on top of existing page content, and slides out when dismissed (by swiping away, tapping outside, or pressing
      escape).","category":"user-experience","featuresUsed":["inert","Intersection observer","Popover","Registered custom properties","Scroll-driven animations","scroll-initial-target","Scroll snap"],"tokenCount":4317,"similarity":0.5099}]

● Bash(npx -y modern-web-guidance@latest retrieve "carousel-snap-highlights,carousel-slide-effects,scroll-snap-state-sync")
  ⎿  <output +158 lines>
            }, undefined);
            if (topEntry) setSelectedParagraph(topEntry.id);
          },
          { root: main, threshold: 0.9 // Adjust based on your use case },
        );
        // Observe all snap targets (e.g., section headers)
        document.querySelectorAll('h2').forEach(header => observer.observe(header));
      }

• আপনার সার্চ কোয়েরির সাথে কোন গাইডগুলো মেলে তা দেখতে আপনি টার্মিনালে নিজেও সার্চ কমান্ডগুলো চালাতে পারেন।

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

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

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