AI کوڈنگ ایجنٹوں کو جدید ویب گائیڈنس کے ساتھ فرسودہ کوڈ لکھنے سے کیسے روکا جائے۔

AI کوڈنگ ایجنٹ ڈویلپرز کا کافی وقت بچا سکتے ہیں۔ یعنی، جب تک آپ آؤٹ پٹ کو نہیں کھولتے اور محسوس نہیں کرتے کہ انہوں نے کوڈ لکھا ہے جیسے یہ 2019 ہے۔

مثال کے طور پر، اپنے ایجنٹ سے ٹول ٹپ بنانے کو کہیں۔ HTML پالش لگ رہا ہے اور CSS ٹرانزیشن ہموار ہیں۔ aria-describedby وائرنگ درست ہے۔ پھر ہم جاوا اسکرپٹ کی طرف بڑھتے ہیں۔ js-hidden کلاس ٹوگل سسٹم، dismissAllTooltips() فنکشنز، ٹچ ایونٹ ہینڈلرز، آف کلک کا پتہ لگانا، اور ایک مکمل انٹرایکشن مینجمنٹ لیئر آپ کو اس کی تکمیل کرنے کی اجازت دیتا ہے جو اکیلا CSS نہیں کر سکتا۔

ایجنٹ کرپٹ نہیں ہے۔ اگرچہ برسوں سے براؤزرز کے پاس بہتر جوابات ہیں، یہ صرف ایک ایسے نمونے پر پہنچنے کی بات ہے جو تربیتی ڈیٹا پر حاوی ہے۔

ماڈرن ویب گائیڈنس (MWG) گوگل کروم کے لیے ایک اوپن سورس فکس ہے۔ ماہر کی توثیق شدہ، پلیٹ فارم سے آگاہ ہدایات براہ راست اپنے AI ایجنٹوں کے سیاق و سباق میں داخل کریں، انہیں تازہ ترین، قابل رسائی، اور پرفارمنس ویب معیارات کے ساتھ ترتیب دیں۔

اس آرٹیکل میں، آپ جانیں گے کہ جدید ویب گائیڈنس "لیگیسی کوڈ” کا مسئلہ کیوں حل کرتی ہے اور آپ اسے اپنے ورک فلو میں کیسے ضم کر سکتے ہیں تاکہ مسلسل جدید نتائج حاصل کر سکیں۔

اشاریہ:

AI ایجنٹس بطور ڈیفالٹ میراثی پیٹرن کیوں استعمال کرتے ہیں؟

تمام بڑے لینگوئج ماڈلز (LLMs) کو ویب پر تربیت دی جاتی ہے، جو واقعی تیز رفتاری سے تیار ہو رہی ہے۔ نئے براؤزر APIs کو تربیتی ڈیٹا میں معنی خیز طور پر ظاہر کرنے کے لیے کافی سبق، اسٹیک اوور فلو جوابات، اور حقیقی کوڈ بیسز ہونے سے برسوں پہلے جاری کیے جاتے ہیں۔

حقیقی دنیا کے نتائج: یہاں تک کہ اگر ماڈل کو یہ جاننے کے لیے تربیت دی گئی ہے کہ جدید ترین API موجود ہے، اس نے ہزاروں بار پرانے انداز کو دیکھا ہے اور چند بار نیا طریقہ۔ نتیجے کے طور پر، کوڈ تیار کرتے وقت میراثی نمونے جیت جاتے ہیں۔ یہ اس لیے نہیں ہے کہ ماڈل جاہل ہے، بلکہ اس لیے کہ پرانے طریقوں کے لیے تربیتی اشارے زیادہ مضبوط ہیں۔

اشارہ کرنے سے یہ مسئلہ مکمل طور پر حل نہیں ہوتا ہے۔ ایجنٹ کو "جدید API استعمال کریں” کے لیے بتانے سے چیزیں قدرے بہتر ہو سکتی ہیں، لیکن اس سے ماڈل کو وہ گھنے، ماہر کے ذریعے جانچے گئے نفاذ کے نمونے نہیں ملتے جن کی آپ کو اعتماد کے ساتھ جدید، پروڈکشن کے لیے تیار کوڈ لکھنے کی ضرورت ہے۔ ہر سیشن میں ہر فیچر کے لیے دستاویزات کو غیر معینہ مدت تک پیسٹ کیا جانا چاہیے۔

اصل مسئلہ یہ ہے کہ: ٹیسٹ کرنے کے لیے حقیقی آؤٹ پٹ حاصل کرنے کے لیے، میں نے Antigravity IDE سے ماڈرن ویب گائیڈنس کو انسٹال کیے بغیر دو الگ الگ اجزاء بنانے کو کہا۔

پچھلا: ٹول ٹپ جزو

فوری: "ایک ٹول ٹپ جزو بنائیں جو بٹن کے اوپر ظاہر ہوتا ہے جب آپ اس پر ہوور کرتے ہیں۔”

ایچ ٹی ایم ایل معقول ہے۔ سی ایس ایس کا استعمال کرتے ہوئے پوزیشننگ ہینڈل کرتا ہے: position: absoluteدھندلاپن کو متحرک کریں اور یہاں تک کہ تاروں کو جوڑیں۔ role="tooltip" اور aria-describedby صحیح طریقے سے پھر ہم جاوا اسکرپٹ کی طرف بڑھتے ہیں۔

// ❌ Before MWG — a full interaction management layer built in JS
document.addEventListener('DOMContentLoaded', () => {
  const containers = document.querySelectorAll('.tooltip-container');

  containers.forEach(container => {
    const trigger = container.querySelector('.tooltip-trigger');
    const tooltip = container.querySelector('.tooltip-content');

    const forceHide = () => tooltip.classList.add('js-hidden');
    const resetVisibility = () => tooltip.classList.remove('js-hidden');

    // Escape key to dismiss
    trigger.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') { forceHide(); e.preventDefault(); }
    });

    trigger.addEventListener('blur', resetVisibility);
    container.addEventListener('mouseleave', resetVisibility);
    container.addEventListener('mouseenter', resetVisibility);

    // Touch handling
    trigger.addEventListener('touchstart', (e) => {
      const isVisible = !tooltip.classList.contains('js-hidden') &&
        getComputedStyle(tooltip).visibility === 'visible';
      if (isVisible) { forceHide(); } else { dismissAllTooltips(); resetVisibility(); }
    }, { passive: true });
  });

  function dismissAllTooltips() {
    document.querySelectorAll('.tooltip-content').forEach(t => t.classList.add('js-hidden'));
  }

  document.addEventListener('click', (e) => {
    if (!e.target.closest('.tooltip-container')) {
      document.querySelectorAll('.tooltip-content').forEach(t => t.classList.remove('js-hidden'));
    }
  });
});

مسئلہ یہ نہیں ہے کہ اوپر کا کوڈ غلط ہے۔ یہ بالکل کام نہیں کرتا۔ مسئلہ یہ ہے کہ یہ کیا ظاہر کرتا ہے۔ کیونکہ سی ایس ایس :hover اور :focus-within سلیکٹرز فرار سے برخاست، ٹچ ٹوگلز، یا کلک سے باہر کا پتہ لگانے کو نہیں سنبھال سکتے ہیں، لہذا ایجنٹوں کو ٹول ٹپ کی حالت کو منظم کرنے کے لیے ایک متوازی JavaScript سسٹم بنانا چاہیے۔ مرئیت کو اب دو سسٹمز کے درمیان تقسیم کر دیا گیا ہے جنہیں ہم آہنگی میں رکھنا ضروری ہے۔ کوئی راستہ نہیں js-hidden کلاسز خاص طور پر جاوا اسکرپٹ کو سی ایس ایس کو اوور رائیڈ کرنے کی اجازت دینے کے لیے موجود ہیں۔

اگر آپ ابھی متجسس ہیں، تو آپ جدید ویب گائیڈنس انسٹال کرنے کے بعد اپ ڈیٹ کردہ ٹول ٹِپ جزو کوڈ کو دیکھ سکتے ہیں۔

اگلا، آئیے دیکھتے ہیں کہ ایجنٹ کس طرح تازہ ترین ویب ہدایات کے بغیر اطلاعی پیغامات تخلیق کرتے ہیں۔

پچھلا: اختتامی حرکت پذیری کے ساتھ ٹوسٹ نوٹیفکیشن

فوری: "ایک ٹوسٹ نوٹیفکیشن سسٹم بنائیں جو اطلاع ہٹانے سے پہلے غائب ہو جائے۔”

// ❌ Before MWG — JavaScript owns the entire animation lifecycle
const dismissToast = (toast) => {
  if (toast.classList.contains('toast-fade-out')) return;

  // 1. Apply fade-out class to trigger CSS transition
  toast.classList.add('toast-fade-out');

  // 2. Wait for transition, then remove from DOM
  const handleUnmount = (e) => {
    if (e.propertyName === 'opacity' || e.propertyName === 'transform') {
      toast.removeEventListener('transitionend', handleUnmount);
      toast.remove();
    }
  };
  toast.addEventListener('transitionend', handleUnmount);

  // 3. Fallback in case transitionend doesn't fire
  setTimeout(() => {
    if (toast.parentNode) toast.remove();
  }, 400);
};

// Auto-dismiss after 4 seconds
autoDismissTimer = setTimeout(() => {
  dismissToast(toast);
}, 4000);

اگر آپ اوپر والے کوڈ کا جائزہ لیتے ہیں، تو آپ دیکھیں گے کہ یہ پیٹرن بہت عام ہے اور دوبارہ کام کرتا ہے۔ لیکن نوٹ کریں کہ جاوا اسکرپٹ انیمیشن ٹائمنگ سے بنیادی طور پر متعلق مسائل کے لیے کتنا وقف ہے۔

ایجنٹ ایک CSS کلاس شامل کرکے منتقلی شروع کرتا ہے اور پھر استعمال کرتا ہے: transitionend یہ جاننے کے لیے کہ کسی عنصر کو کب ہٹانا ہے، ہم شامل کرتے ہیں: setTimeout صرف صورت میں transitionend فائر نہیں کرتا، پھر دوسرا setTimeout خودکار برطرفی کے لیے۔

JavaScript اور CSS گہرے طور پر جڑے ہوئے ہیں۔ اگر آپ اپنے CSS میں منتقلی کی مدت کو تبدیل کرتے ہیں، تو آپ کو اپنے JavaScript کے ٹائم آؤٹ کو اپ ڈیٹ کرنے کی ضرورت ہوگی۔

اگر آپ ابھی متجسس ہیں، تو آپ جدید ویب گائیڈنس انسٹال ہونے کے بعد اپ ڈیٹ کردہ ٹوسٹ نوٹیفکیشن کوڈ چیک کر سکتے ہیں۔

دونوں مثالیں ایک ہی مورفولوجی کا اشتراک کرتی ہیں۔ ایجنٹ ان چیزوں کی تلافی کے لیے جاوا اسکرپٹ لکھتے ہیں جن کے بارے میں براؤزر نہیں جانتا کہ وہ مقامی طور پر ہینڈل کر سکتا ہے۔

ماڈرن ویب گائیڈنس (MWG) کیا ہے؟

ماڈرن ویب گائیڈلائنز ایک اوپن سورس پروجیکٹ ہے جسے گوگل کروم ٹیم اور مائیکروسافٹ ایج ٹیم نے سپورٹ کیا ہے۔ بجائے اس کے کہ آپ کا ماڈل یہ جاننے کی توقع کرے کہ تازہ ترین پلیٹ فارم کیا پیش کر رہا ہے، ہم آپ کے ماڈل کو ساختی، ماہر کی توثیق شدہ حوالہ فائلیں فراہم کرتے ہیں جو عام ترقیاتی منظرناموں کو درست حل کے لیے نقشہ بناتی ہیں۔

یہ مندرجہ ذیل طور پر فراہم کیا جائے گا: ایجنٹ کی مہارت, SKILL.md ایک فائل جو کسی پروجیکٹ میں موجود ہے اور کوڈ بنانے سے پہلے کوڈنگ ایجنٹ کے ذریعہ پڑھی جاتی ہے۔ اس کے بارے میں ایک پراجیکٹ کے لیے مخصوص ہدایات کے دستی کے طور پر سوچیں جو ایجنٹوں کو بتاتا ہے کہ جدید ترین APIs کیا ہیں اور انہیں کب استعمال کرنا ہے۔ یہ تکنیک امکانات کی تقسیم کو جدید پلیٹ فارم کے حل میں اس طرح تبدیل کرتی ہے کہ ون لائن پرامپٹ کمانڈز نہیں کر سکتیں۔

اندرونی طور پر، میکانزم تین مراحل میں کام کرتا ہے:

1. چونکہ کام ویب سے متعلق ہے، ایجنٹ مہارت کو چالو کرتا ہے۔

2. ایجنٹ بھاگتا ہے۔ modern-web-guidance search ""آف لائن TensorFlow.js ماڈل کا استعمال کرتے ہوئے مقامی سیمنٹک تلاش۔ کوئی API کیز، کوئی نیٹ ورک کالز نہیں۔

3. ایجنٹ مماثل گائیڈز تلاش کرتے ہیں بذریعہ: modern-web-guidance retrieve ہدف کے نمونوں، مسائل، اور متبادل حکمت عملیوں کو براہ راست سیاق و سباق کی کھڑکی میں داخل کریں۔

مہارت کے دو پیک دستیاب ہیں۔ modern-web-guidance جدید براؤزر APIs، CSS لے آؤٹ سسٹمز، کارکردگی، رسائی، اور بلٹ ان AI APIs کا احاطہ کرتا ہے۔ زیادہ تر ڈویلپرز یہی چاہتے ہیں۔

chrome-extensions مینی فیسٹ V3، بیک گراؤنڈ ورکرز، اور کروم ویب اسٹور پبلشنگ کا احاطہ کرتا ہے۔ ابتدائی تشخیص نے ایجنٹ کو انسٹال کرتے وقت موجودہ بہترین طریقوں کی تعمیل میں 37 فیصد پوائنٹ کی بہتری دکھائی۔

تازہ ترین ویب ہدایات کو کیسے انسٹال کریں۔

یونیورسل پاتھ (تمام ایجنٹوں پر کام کرتا ہے):

npx modern-web-guidance@latest install

یہ ایک انٹرایکٹو وزرڈ شروع کرے گا جو کوڈنگ ایجنٹ کا پتہ لگائے گا، آپ سے پوچھے گا کہ آپ کون سا ٹیکنالوجی پیک چاہتے ہیں، اور اس ٹیکنالوجی پیک کو حذف کر دیں گے۔ SKILL.md فائلوں کو خود بخود صحیح جگہ پر محفوظ کریں۔ CLI مکمل طور پر آف لائن اور خودمختار ہے۔ کوئی بیرونی انحصار اور API کیز نہیں ہیں۔

کلاڈ کوڈ:

#1. Add the marketplace /plugin marketplace add GoogleChrome/modern-web-guidance

#2. Install the plugin
/plugin install modern-web-guidance@googlechrome

#3. Reload plugins
/reload-plugins

تنصیب کے بعد، یقینی بنائیں کہ .claude/skills/ پروجیکٹ کی جڑ میں موجود ہے اور اس میں مہارت کی فائلیں ہیں۔ یہ وہ جگہ ہے جہاں کلاڈ کوڈ ٹیکنالوجی کو پڑھتا ہے۔

کرسر:

تازہ ترین ویب رہنمائی اسکل مارکیٹ پلیس میں درج ہے۔

Search for modern-web-guidance and click Install, no CLI step required.

GitHub شریک پائلٹ CLI:

# 1. Add the marketplace /plugin marketplace add GoogleChrome/modern-web-guidance

# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

ورسل ایجنٹ ٹیکنالوجی:

npx skills add GoogleChrome/modern-web-guidance

گوگل اینٹی گریوٹی:

ایک کلک کی تنصیب براہ راست ایپ کے اندر سے ممکن ہے۔

تازہ ترین ویب گائیڈنس انسٹال کرنے کے بعد: اصل میں کیا تبدیلیاں آتی ہیں۔

اس سے پہلے، اگر آپ کے پاس ماڈرن ویب گائیڈنس انسٹال نہیں ہے، تو آپ نے ٹول ٹِپ اور نوٹیفکیشن میسج دونوں اجزاء میں پرامپٹ آؤٹ پٹ دیکھا۔ اگر آپ ماڈرن ویب گائیڈنس انسٹال کے ساتھ وہی پرامپٹ چلاتے ہیں، تو ایجنٹ بالکل مختلف ٹول تک پہنچ جائے گا۔

کے بعد: ٹول ٹپ جزو

جدید ویب گائیڈ لائنز کا استعمال کرتے ہوئے، وہی ٹول ٹِپ پرامپٹ بالکل بھی جاوا اسکرپٹ نہیں بناتا ہے۔ اس کے بجائے، ایجنٹ دو APIs تک پہنچتا ہے جو مل کر کام کرتے ہیں۔ popover="hint" ڈیفالٹ ہوور/فوکس کی وجہ سے مرئیت interestfor HTML میں اعلانیہ طور پر اہداف سے محرکات منسلک کرنے کے لیے (Interest Invokers API) کا استعمال کریں۔

/* Anchor positioning wires layout to the trigger */
#btn-deploy {
  anchor-name: --tooltip-deploy;
}

#tooltip-deploy {
  position-anchor: --tooltip-deploy;
}

.tooltip-content[popover] {
  position: absolute;
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%) translateY(8px);

  opacity: 0;
  transition: opacity 0.2s ease,
              display 0.2s allow-discrete,
              overlay 0.2s allow-discrete;
}

.tooltip-content[popover]:popover-open {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

@starting-style {
  .tooltip-content[popover]:popover-open {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
}

کہ js-hidden کلاسز ختم ہو چکی ہیں۔ کہ dismissAllTooltips() خصوصیت ختم ہوگئی۔ کہ touchstart ہینڈلر چلا گیا ہے۔ کلک بیرونی پتہ چلا گیا ہے.

popover="hint" یہ ڈیفالٹ کے لحاظ سے ایک نرم قریبی رویہ فراہم کرتا ہے، اور براؤزر جاوا اسکرپٹ کے بغیر ہوور انٹینٹس، فوکس مینجمنٹ، فرار سے برخاست، اور ٹچ سیمنٹکس کو ہینڈل کرتا ہے۔ @starting-style اندراج کی حرکت کی حالت کی وضاحت کریں، allow-discrete چونکہ یہ باہر نکلنے کو ہینڈل کرتا ہے، اس لیے منتقلی کی دونوں سمتیں مکمل طور پر CSS کی ملکیت ہیں۔

براؤزر مطابقت کے نوٹ: دلچسپی کالر API (interestfor) فی الحال کروم میں جھنڈوں کے ساتھ دستیاب ہے اور اس میں پولی فل موجود ہے: unpkg.com/interestfor. CSS اینکر کی پوزیشننگ بیس لائن 2025 ہے۔ ایجنٹ نے اپنے آؤٹ پٹ میں پولی فل لوڈ بھی شامل کیا۔ caniuse.com/css-anchor-positioning چیک کریں اور شپنگ سے پہلے اپنے براؤزر کی معاونت کی ضروریات کا جائزہ لیں۔

ایک چیز جاننے کے لیے: یہاں دو APIs میں سے، CSS اینکر پوزیشننگ پہلے سے ہی مستحکم براؤزرز میں دستیاب ہے۔ interestfor یہ زیادہ تجرباتی ہے۔ پولی فلز اس کا احاطہ کرتے ہیں، لیکن اس کے بارے میں ایک پیش نظارہ کے طور پر سوچیں کہ پلیٹ فارم کہاں جا رہا ہے، ایسی چیز نہیں جسے آپ آج بغیر جانچ کے پروڈکشن میں جاری کریں گے۔

بعد: اختتامی حرکت پذیری کے ساتھ ٹوسٹ نوٹیفکیشن

ماڈرن ویب گائیڈنس کا استعمال کرتے ہوئے وہی ٹوسٹ پرامپٹ ہوگا۔ popover="manual" کلاس کی منتقلی کے بجائے عنصر

// ✅ After MWG — the browser handles show/hide; JS handles auto-dismiss timing only
const createToast = (type) => {
  const toast = document.createElement('div');
  toast.setAttribute('popover', 'manual');
  toast.className = `toast toast-${type}`;

  toast.innerHTML = `
    
...
    
...
    ×
  `;

  container.appendChild(toast);
  toast.showPopover(); // triggers @starting-style entry animation natively

  // Auto-dismiss
  const autoDismissTimer = setTimeout(() => {
    if (toast.matches(':popover-open')) toast.hidePopover();
  }, 4000);

  // Remove from DOM after exit transition completes
  toast.addEventListener('beforetoggle', (event) => {
    if (event.newState === 'closed') {
      clearTimeout(autoDismissTimer);
      toast.addEventListener('transitionend', () => toast.remove(), { once: true });
      setTimeout(() => { if (toast.parentNode) toast.remove(); }, 500); // fallback
    }
  });
};

/* ✅ CSS owns both entry and exit animation */
.toast[popover] {
  opacity: 0;
  transform: translateX(60px) scale(0.95);
  transition: opacity 0.3s ease,
              transform 0.3s ease,
              display 0.3s allow-discrete,
              overlay 0.3s allow-discrete;
}

.toast[popover]:popover-open {
  opacity: 1;
  transform: translateX(0) scale(1);
}

@starting-style {
  .toast[popover]:popover-open {
    opacity: 0;
    transform: translateX(60px) scale(0.95);
  }
}