smyw کے ذریعے کوڈنگ ایجنٹ سے پہلے پروٹوٹائپ بنوائیں، پھر کوڈ لکھوائیں: انسٹالیشن، جائزے اور فیڈبیک کا مکمل ٹیوٹوریل

smyw کیا ہے

smyw، یعنی “show me you want”، کوڈنگ Agent کے لیے ایک skill ہے، جو Claude Code، DeepSeek Harness اور ایسے دیگر Agent کے لیے موزوں ہے جو SKILL.md کو سپورٹ کرتے ہیں۔ یہ Agent کو صفحہ، انٹرایکشن فلو یا فرنٹ اینڈ اور بیک اینڈ API میں ترمیم سے پہلے کوڈ پڑھنے، ایک منظم spec لکھنے، اور آف لائن کھولے جا سکنے والےواحد فائل HTML پروٹوٹائپ تیار کرنے کی سہولت دیتا ہے۔

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

یہ کون سا مسئلہ حل کرتا ہے

روایتی Agent کوڈنگ کا عمل اکثر متنی ضرورت سے براہِ راست نفاذ کی طرف چلا جاتا ہے، جس سے صفحے کی ساخت، انٹرایکشن کے طریقے یا API کی حدود کے بارے میں فہم میں فرق پیدا ہو سکتا ہے۔ smyw ضرورت اور کوڈ کے درمیان ایک بصری تصدیقی مرحلہ شامل کرتا ہے:

1. صارف فنکشنل ضرورت پیش کرتا ہے۔
2. Agent پروجیکٹ کا کوڈ پڑھ کر spec.json تیار کرتا ہے۔
3. بلڈ اسکرپٹ spec کی جانچ کرتا ہے اور preview.html تیار کرتا ہے۔
4. صارف براؤزر میں حل دیکھتا، پیش کرتا، ڈریگ کرتا اور اس پر تبصرے کرتا ہے۔
5. صارف فیڈبیک نقل کر کے گفتگو میں واپس بھیجتا ہے۔
6. Agent فیڈبیک نافذ کر کے پروٹوٹائپ کا اگلا ورژن تیار کرتا ہے۔
7. صارف کے حل کی تصدیق کے بعد ہی Agent کوڈ لکھنا شروع کرتا ہے۔

smyw کا مقصد ڈیزائن ٹولز کی جگہ لینا نہیں، بلکہ نفاذ سے پہلے صارف اور کوڈنگ Agent کے درمیان اس بات پر اتفاق پیدا کرنا ہے کہ “کیا تبدیل کرنا ہے، کہاں رکھنا ہے، اور کیسے ٹرگر ہونا ہے”۔

بنیادی خصوصیات

نمبر والے مارکر اور پہلے و بعد کا موازنہ

پروٹوٹائپ حقیقی صفحے کے لے آؤٹ کے مطابق مکمل منظر بناتا ہے اور تبدیلیوں کو رنگوں سے الگ کرتا ہے: پیلا ترمیم، سبز اضافہ، اور سرخ حذف کی علامت ہے۔ صرف وہ ماڈیول نمبر پاتے ہیں جن کی بیرونی سطح تبدیل ہوئی ہو، تاکہ اندرونی عناصر پر بار بار مارکر نہ بنیں۔

کینوس پر موجود نمبر یا بائیں جانب تبدیلیوں کی فہرست پر کلک کرنے سے کینوس متعلقہ حصے پر مرکوز ہو جاتا ہے۔ دائیں جانب تبدیلی سے پہلے اور بعد کے مقامی وائر فریم، فیلڈ کے فرق، Agent کی وضاحت، کوڈ کمپوننٹ، اور متعلقہ فنکشن یا API دکھائے جاتے ہیں۔

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

کمپوننٹ کی منتقلی کو درست طور پر ظاہر کرنا

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

پاپ اپ، مینو اور کھلنے والا مواد

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

کثیر سطحی مینو کو متصل پینلز میں مزید تقسیم کیا جاتا ہے۔ صفحے کے اندر کھلنے والا مواد اپنی جگہ پر جامنی نقطہ دار خانہ چھوڑتا ہے، جو اس کے کھلنے کے بعد ظاہر ہونے والی جگہ بتاتا ہے۔ صفحہ تبدیل کرنے اور حالت بدلنے والی کنکشن لائنیں پہلے سے چھپی رہتی ہیں؛ متعلقہ عنصر منتخب کرنے پر انہیں دیکھا جا سکتا ہے، یا “تمام کنکشن لائنیں” کے ذریعے سب کو کھولا جا سکتا ہے۔

قابلِ کلک ڈیمو موڈ

اوپری دائیں جانب “▶ ڈیمو” پر کلک کرنے سے پروٹوٹائپ تبدیلی کے فریم چھپا کر ایک اسکرین میں حقیقی عمل کی نقل کرتا ہے۔ اس میں مینو کھلنا، ڈراور باہر آنا، پاپ اپ کھلنا، بٹن کی حالت بدلنا اور صفحہ تبدیل ہونا دکھایا جا سکتا ہے۔

اگر کسی غیر فعال حصے پر کلک کیا جائے تو اس وقت کلک کیے جا سکنے والی تمام جگہیں نیلے فریم کے ساتھ جھلکیں گی، اور بائیں جانب قابلِ عمل کارروائیاں بھی درج ہوں گی۔ ڈیمو میں واپس جانا، ابتدا سے شروع کرنا، اور “تبدیلی سے پہلے” و “تبدیلی کے بعد” کے درمیان تبدیل ہونا شامل ہے۔

براہِ راست ترمیم اور مرکزی فیڈبیک

• ساخت میں ترمیم: کمپوننٹس کو ڈریگ کر کے ترتیب یا کنٹینر کی نسبت تبدیل کریں، اور متن، قسم، چوڑائی اور ترتیب میں ترمیم کریں۔
• شکل تبدیل کرنا: اِن لائن ماڈیول کو پاپ اپ، ڈراپ ڈاؤن مینو، ڈراور یا ٹول ٹِپ میں تبدیل کریں؛ سسٹم ٹرگر بٹن اور کنکشن لائنیں تیار کرے گا۔
• واپس اور دوبارہ: آپریشن واپس لینے کے لیے Ctrl یا Command کے ساتھ Z استعمال کریں۔
• عنصر پر تبصرہ: مخصوص عنصر کے لیے جگہ، انٹرایکشن، کمپوننٹ کی قسم، اسٹائل، متن یا فنکشن کی کمی جیسی کیٹیگری کا تبصرہ شامل کریں۔
• رائے کی سطح: تبصرے کو “لازماً تبدیل کریں”، “تجویز” یا “سوال” کے طور پر نشان زد کیا جا سکتا ہے۔
• مجموعی فیڈبیک: اسٹائل سے متعلق رائے اور حوالے کی سمت درج کریں، اور Agent کے پہلے سے درج تصدیقی سوالات کے جواب دیں۔
• پیچ واپس بھیجنا: ساختی تبدیلیاں صرف ID کے ذریعے مقام متعین کرنے والے پیچ کی صورت میں فیڈبیک کے آخر میں شامل کی جاتی ہیں؛ مکمل حل واپس بھیجنے کی ضرورت نہیں۔

انسٹالیشن سے پہلے تیاری

smyw پروٹوٹائپ بنانے کے لیے صرف Node.js 18 یا اس سے نیا ورژن درکار ہے۔ پروجیکٹ کو سرور کی ضرورت نہیں اور اس میں رن ٹائم انحصارات بھی نہیں ہیں۔ پہلے Node.js کا ورژن چیک کریں:

node --version

اگر ریپوزٹری کے end-to-end ٹیسٹ چلانے یا اسکرین شاٹس دوبارہ بنانے ہوں تو Google Chrome بھی انسٹال کرنا ہوگا۔ ڈیفالٹ کے علاوہ انسٹالیشن کا راستہ CHROME ماحول کے متغیر کے ذریعے متعین کیا جا سکتا ہے۔

smyw skill انسٹال کریں

پہلا مرحلہ: ریپوزٹری کلون کریں

git clone https://github.com/nishuzumi/show-me-you-want-skill.git
cd show-me-you-want-skill

دوسرا مرحلہ: skill کو Agent کے قابلِ مطالعہ مقام پر رکھیں

Claude Code کے صارفین ایک عالمی symbolic link بنا سکتے ہیں تاکہ تمام پروجیکٹس میں smyw استعمال ہو سکے:

ln -s "$PWD/skills/smyw" ~/.claude/skills/smyw

اگر Agent عمومی skills ڈائریکٹری پڑھے تو اسے یہاں بھی لنک کیا جا سکتا ہے:

ln -s "$PWD/skills/smyw" ~/.agents/skills/smyw

اگر اسے صرف کسی ایک پروجیکٹ میں فعال کرنا ہو تو اسے اس پروجیکٹ کی مقامی skill ڈائریکٹری میں کاپی کریں:

cp -r skills/smyw <آپ کا پروجیکٹ>/.claude/skills/smyw

انسٹالیشن مکمل ہونے کے بعد Agent سے ایسا مطالبہ کیا جا سکتا ہے جس میں انٹرفیس یا API تبدیل ہو، یا براہِ راست کہا جا سکتا ہے: “پہلے ایک پروٹوٹائپ بنا کر مجھے دکھاؤ۔”

پہلے ریپوزٹری کی مثال چلائیں

ریپوزٹری میں پہلے سے تیار کردہ دو HTML مثالیں موجود ہیں۔ سرور شروع کرنے کی ضرورت نہیں، انہیں براہِ راست براؤزر میں کھولا جا سکتا ہے:

• skills/smyw/examples/helpdesk-ai/preview.html：کسٹمر سروس ورک بینچ میں AI کی تجویز کردہ جوابی تحریر شامل کرنے کی مکمل واحد اسکرین مثال۔
• skills/smyw/examples/task-tags/preview.html：پورے صفحے کے اضافے اور پورے صفحے کے حذف کی کثیر صفحاتی مثال۔

مثال کے spec میں ترمیم کے بعد پیش نظارہ دوبارہ بنانے کے لیے یہ کمانڈ چلائیں:

node skills/smyw/scripts/build.mjs skills/smyw/examples/helpdesk-ai/spec.json

بلڈ کا نتیجہ خالص فرنٹ اینڈ واحد فائل ہوتا ہے، جسے آف لائن کھول کر جانچا جا سکتا ہے۔

ضرورت سے پروٹوٹائپ تک بنیادی استعمال

پہلا مرحلہ: Agent کو ضرورت بیان کریں

کاروباری مقصد اور پابندیوں کو حتی الامکان واضح کریں، لیکن تمام انٹرفیس کی تفصیلات پہلے سے طے کرنا ضروری نہیں۔ مثال کے طور پر:

کسٹمر سروس ٹکٹ کی تفصیل میں AI کی تجویز کردہ جوابی تحریر شامل کریں۔ پہلے موجودہ صفحہ اور API پڑھیں، فوراً کوڈ نہ لکھیں؛ smyw استعمال کر کے پروٹوٹائپ بنائیں تاکہ میں ڈراور کا داخلی راستہ، جواب تبدیل کرنے کا عمل اور متعلقہ API کی تصدیق کر سکوں۔

دوسرا مرحلہ: تیار کردہ spec اور پیش نظارہ چیک کریں

Agent منظم حل کو اس جیسی ڈائریکٹری میں محفوظ کرے گا:

.smyw/<تاریخ>-<نام>/spec.json

اس کے بعد build.mjs کے ذریعے جانچ کر کے preview.html تیار کیا جائے گا۔ پیش نظارہ کھولنے کے بعد درج ذیل ترتیب سے جانچ کریں:

1. پہلے “فٹ” استعمال کر کے مکمل کینوس کو ویو پورٹ میں دکھائیں۔
2. چیک کریں کہ پیلے، سبز اور سرخ تبدیلی کے فریم ضرورت کے مطابق ہیں۔
3. تبدیلیوں کی فہرست پر ایک ایک کر کے کلک کریں اور پہلے و بعد کا موازنہ اور فیلڈ کی تبدیلیاں چیک کریں۔
4. دیکھیں کہ متعلقہ کمپوننٹس، فنکشنز اور API موجودہ کوڈ سے مطابقت رکھتے ہیں یا نہیں۔
5. “فلو میں تبدیلی” اور “بیک اینڈ میں تبدیلی” کھول کر مختلف تہوں پر اثرات چیک کریں۔
6. ڈیمو موڈ میں جا کر مینو، پاپ اپ، ڈراور اور حالت کے بٹنوں پر حقیقی کلک کریں۔

تیسرا مرحلہ: حل میں ترمیم اور تبصرہ کریں

اگر ساخت توقع کے مطابق نہ ہو تو “حل میں ترمیم” پر جا کر کمپوننٹس کو براہِ راست ڈریگ کریں، یا اِن لائن مواد کو پاپ اپ میں تبدیل کریں۔ ایسی رائے کے لیے جس میں براہِ راست ترمیم مناسب نہ ہو، عنصر منتخب کر کے تبصرہ شامل کریں اور کیٹیگری و ترجیح مقرر کریں۔

فیڈبیک کی تین اقسام کو واضح طور پر الگ رکھنے کی تجویز ہے:

• لازماً تبدیل کریں: وہ مسئلہ جسے نفاذ سے پہلے حل کرنا ضروری ہے۔
• تجویز: Agent جانچ سکتا ہے کہ اسے قبول کرنا ہے یا نہیں، لیکن قبول نہ کرنے کی صورت میں وجہ بتانی چاہیے۔
• سوال: پہلے جواب اور وضاحت درکار ہے، پھر تبدیلی کا فیصلہ کیا جائے۔

چوتھا مرحلہ: فیڈبیک نقل کر کے Agent کو واپس دیں

“فیڈبیک” صفحے پر جائیں، مجموعی اسٹائل سے متعلق رائے شامل کریں، زیرِ تصدیق سوالات کے جواب دیں، پھر “فیڈبیک نقل کریں” پر کلک کریں۔ تیار کردہ Markdown کو Agent کی گفتگو میں چسپاں کر دیں۔

Agent عموماً فیڈبیک کو feedback-v<N>.md کے طور پر محفوظ کرے گا، پھر یہ کمانڈ چلائے گا:

node skills/smyw/scripts/apply-feedback.mjs .smyw/<dir>/feedback-v1.md .smyw/<dir>/spec.json
node skills/smyw/scripts/build.mjs .smyw/<dir>/spec.json

apply-feedback.mjs پرانے spec کا بیک اپ لیتا ہے، فیڈبیک میں موجود پیچ نافذ کرتا ہے اور ورژن نمبر بڑھاتا ہے۔ اگر فیڈبیک ورژن موجودہ spec سے مطابقت نہ رکھتا ہو تو اسکرپٹ اسے نافذ کرنے سے انکار کر دے گا، تاکہ نئے حل پرانا حل سے تبدیل نہ ہو۔

پانچواں مرحلہ: تصدیق کے بعد کوڈنگ شروع کریں

پروٹوٹائپ کے اگلے ورژن کو چیک کریں، اور تصدیق کریں کہ تمام “لازماً تبدیل کریں” والی آراء نافذ ہو چکی ہیں اور “سوال” کا جواب دے دیا گیا ہے۔ مزید کوئی مسئلہ نہ ہو تو “حل کی تصدیق کریں، کام شروع کیا جا سکتا ہے” پر کلک کریں، پھر Agent کو باضابطہ نفاذ کے مرحلے میں جانے دیں۔

spec کی بنیادی ساخت سمجھیں

smyw ایک درخت کے ذریعے تبدیلی سے پہلے اور بعد کے انٹرفیس کو بیک وقت بیان کرتا ہے۔ ہر نوڈ change کے ذریعے تبدیلی کو نشان زد کرتا ہے، جبکہ انٹرایکشن اور حالت کو on، hidden اور states کے ذریعے بیان کیا جاتا ہے۔

{
  "id": "reply",
  "type": "form",
  "label": "صارف کو جواب دیں",
  "component": "<ReplyBox>",
  "change": "modified",
  "before": { "label": "جواب دیں" },
  "children": [
    {
      "id": "reply-quick",
      "type": "select",
      "text": "فوری جواب",
      "change": "removed"
    },
    {
      "id": "reply-polish",
      "type": "button",
      "label": "AI سے بہتر بنائیں",
      "change": "added",
      "fn": "openDraftDrawer({ mode: \"polish\" })",
      "on": [
        { "action": "open", "target": "ai-drawer" }
      ]
    }
  ]
}

یہ مثال ظاہر کرتی ہے کہ جواب دینے والے فارم کا عنوان “جواب دیں” سے بدل کر “صارف کو جواب دیں” کر دیا گیا ہے، موجودہ فوری جواب حذف کر دیا گیا ہے، اور AI ڈراور کھولنے والا ایک بٹن شامل کیا گیا ہے۔ component کوڈ کے جزو کی نمائندگی کرتا ہے، جبکہ fn متعلقہ عمل یا انٹرفیس کے پلیس ہولڈر کو ظاہر کرتا ہے۔

مکمل فیلڈ کی وضاحت spec-format.md میں دیکھی جا سکتی ہے، جبکہ Agent کے نفاذ کے قواعد SKILL.md میں موجود ہیں۔

اعلیٰ استعمال کی تجاویز

انٹرفیس، ورک فلو اور بیک اینڈ کو بیک وقت جانچیں

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

کوڈ کے اثرات سمجھنے کے لیے ٹول بار استعمال کریں

• عنصر کے پسِ پشت موجود عمل یا انٹرفیس پلیس ہولڈر دیکھنے کے لیے “ƒ فنکشن” کھولیں۔
• ماڈیول سے متعلق کوڈ جزو دیکھنے کے لیے “جزو” کھولیں۔
• اس درخواست سے متاثرہ دائرۂ کار پر توجہ مرکوز کرنے کے لیے “غیر تبدیل شدہ کو دھندلا کریں” کھولیں۔
• مکمل ٹرگر تعلقات کا جائزہ لینے کی ضرورت ہو تو “تمام کنکشنز” کھولیں۔

حالت میں تبدیلیوں کی تصدیق کے لیے ڈیمو موڈ استعمال کریں

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

ID کو مستحکم رکھیں

رائے میں ساختی تبدیلیاں نوڈ ID کے ذریعے تلاش کی جاتی ہیں، اس لیے متعدد ادوار کی تکرار کے دوران موجودہ نوڈ ID کو حتی الامکان مستحکم رکھنا چاہیے۔ جب تک عنصر حذف نہ ہو یا اس کا مفہوم مکمل طور پر تبدیل نہ ہو، ID کو بلاوجہ تبدیل نہ کریں۔

بلڈ کی توثیق کو اہمیت دیں

build.mjs دہرائے گئے ID، ترمیم شدہ نوڈ میں before کی عدم موجودگی، حقیقی ماڈیول کی جگہ “（غیر تبدیل شدہ）” کا استعمال، اور ٹرگر کے بغیر پاپ اپ جیسے عام مسائل کی جانچ کرتا ہے۔ خرابی ظاہر ہونے پر پہلے spec درست کریں، پھر تیار کردہ نتیجے کا جائزہ لیں۔

تنگ ونڈو اور سینڈ باکس کی پابندیوں سے نمٹیں

Agent کے سائیڈ پری ویو جیسے تنگ ونڈوز میں تبدیلیوں کی فہرست “☰ تبدیلیاں” بٹن کے اندر چلی جاتی ہے، جبکہ تفصیلات کینوس پر تیرتی ہوئی دکھائی دیتی ہیں۔ محدود سینڈ باکس میں براؤزر پیش رفت محفوظ کرنے یا خودکار نقل کرنے سے روک سکتا ہے؛ نقل ناکام ہونے پر صفحہ رائے کے متن کو خودکار طور پر منتخب کر دیتا ہے، اس وقت Ctrl یا Command کے ساتھ C دبانا کافی ہے۔

پروجیکٹ کی ترقی اور جانچ

اگر آپ کو خود smyw میں ترمیم کرنی ہو تو اینڈ ٹو اینڈ ٹیسٹ چلا سکتے ہیں یا README کے اسکرین شاٹس دوبارہ تیار کر سکتے ہیں:

node tests/e2e.mjs
node tests/readme-shots.mjs

جانچ کے لیے Node.js 18 یا اس سے بعد کا ورژن اور Google Chrome درکار ہیں۔ اگر Chrome پہلے سے طے شدہ راستے پر موجود نہ ہو تو یوں راستہ متعین کریں:

CHROME=/path/to/chrome node tests/e2e.mjs

پروجیکٹ MIT لائسنس کے تحت ہے۔

خلاصہ

smyw کوڈنگ Agent کے ورک فلو کو “ضرورت سمجھنے کے بعد براہِ راست کوڈ لکھنے” سے بدل کر “پہلے کوڈ پڑھنا، spec تیار کرنا، قابلِ تعامل پروٹوٹائپ دکھانا، ساختی رائے جمع کرنا، پھر عمل درآمد شروع کرنا” بنا دیتا ہے۔ یہ خاص طور پر صفحے کی ترتیب، پاپ اپ، حالت کی تبدیلی، متعدد صفحات پر مشتمل ورک فلو یا فرنٹ اینڈ اور بیک اینڈ انٹرفیس سے متعلق ضروریات کے لیے موزوں ہے۔

ریپوزٹری کی مثال سے آغاز کریں، اور تصدیق کریں کہ Agent skill پڑھ سکتا ہے، پھر اسے حقیقی پروجیکٹس میں استعمال کریں۔ تبدیلی کے نشانات، ڈیمو موڈ، براہِ راست ترمیم، تش annotations اور ورژن شدہ رائے کے ذریعے ضرورت کو سمجھنے میں ہونے والی غلط فہمی نمایاں طور پر کم کی جا سکتی ہے، تاکہ باقاعدہ کوڈنگ پہلے سے تصدیق شدہ منصوبے کی بنیاد پر ہو۔