Answer me with HTML کے ذریعے AI جوابات کو قابلِ مطالعہ صفحات میں تبدیل کریں

Answer me with HTML کیا کرتا ہے

Answer me with HTML ایک ایجنٹ اسکل ہے جو پیچیدہ جوابات کو پڑھنے میں آسان، خود کفیل HTML صفحات میں تبدیل کرتا ہے۔ ماڈل سے ہر HTML عنصر، CSS اصول اور SVG کوآرڈینیٹ لکھوانے کے بجائے، یہ اسکل ماڈل سے مختصر Markdown مسودہ تیار کرواتی ہے۔ اس کے ساتھ شامل CLI پھر لے آؤٹ، اسٹائلنگ اور ڈایاگرام کی رینڈرنگ سنبھالتا ہے۔

کام کی یہ تقسیم تیار ہونے والے آؤٹ پٹ اور انتظار کے وقت کو کم کرتی ہے۔ پروجیکٹ کے بینچ مارک میں اسکل نے 6,873 کے بجائے درمیانی طور پر 923 آؤٹ پٹ ٹوکن استعمال کیے اور جوابات 46 سیکنڈ کے بجائے 13 سیکنڈ میں مکمل کیے۔ ماپی گئی لاگت تقریباً وہی رہی کیونکہ ایجنٹ کے اضافی مراحل گفتگو کے سیاق و سباق کو دوبارہ پڑھتے ہیں۔

یہ ٹول ایسی معلومات کے لیے مفید ہے جنہیں ساخت سے فائدہ ہوتا ہے، مثلاً آرکیٹیکچر کی وضاحتیں، متعدد مراحل پر مشتمل عمل، موازنے، ٹائم لائنز، ماڈیول ٹریز اور تحریر کے تشریحی جائزے۔ سادہ سوال کو اب بھی سادہ متنی جواب مل سکتا ہے؛ جب تک آپ واضح طور پر صفحہ طلب نہ کریں، ایجنٹ خود فیصلہ کرتا ہے کہ صفحہ بنانا مفید ہے یا نہیں۔

اہم خصوصیات

• مختصر ماڈل آؤٹ پٹ: ماڈل سیکڑوں سطروں پر مشتمل دہرائے جانے والے HTML، CSS اور SVG کے بجائے مواد لکھتا ہے۔
• کوڈ سے چلنے والا لے آؤٹ: CLI پینلز کی جگہ اور ڈایاگرام کے کوآرڈینیٹس کا حساب لگاتا ہے، جس سے کٹے ہوئے لیبل اور غیر مساوی خلا کم ہوتے ہیں۔
• مفید توثیق: اگر مسودے میں کوئی خرابی ہو تو CLI سطر، جزو اور درست مثال کی نشاندہی کرتا ہے تاکہ ایجنٹ اسے درست کر سکے۔
• بصری اجزا: مسودوں میں فلو چارٹس، سیکوئنس ڈایاگرامز، ٹریز، ٹائم لائنز، حدود، تشریحات، کلیدی قدر کے بلاکس، نمایاں نوٹس اور تقابلی جدول شامل کیے جا سکتے ہیں۔
• دو تھیمز: انجینئرنگ طرز کی blueprint تھیم یا کارڈ پر مبنی shadcn تھیم منتخب کریں۔ دونوں لائٹ اور ڈارک موڈز کو سپورٹ کرتے ہیں۔
• قابلِ منتقلی آؤٹ پٹ: ہر نتیجہ ایک HTML فائل ہوتا ہے جس میں CDN لنکس یا ویب فونٹس نہیں ہوتے، اس لیے اسے آف لائن کھولا اور آسانی سے شیئر کیا جا سکتا ہے۔
• شامل ماخذ: ہر صفحہ اسے بنانے کے لیے استعمال ہونے والا Markdown محفوظ رکھتا ہے۔ صفحے کا Copy source کنٹرول اس مسودے کو حاصل کرتا ہے۔
• تحریری جانچ: انگریزی اور چینی مسودوں میں طویل جملوں، غیر ضروری طویل فقروں، مجہول اندازِ بیان اور متعلقہ اسلوبی مسائل کی جانچ کی جاتی ہے۔

ضروریات اور انسٹالیشن

آپ کو Node.js 20 یا اس کے بعد کا ورژن درکار ہے۔ عام اسکل انسٹالیشن کے لیے الگ سے npm install چلانے کی ضرورت نہیں، کیونکہ CLI اور اس کے رن ٹائم انحصارات اسکل کے ساتھ شامل ہیں۔

آپشن 1: اپنے ایجنٹ سے انسٹال کروائیں

تجویز کردہ طریقہ یہ ہے کہ اپنے کوڈنگ ایجنٹ کو انسٹالیشن کی درخواست دیں۔ انسٹالر Claude Code، Codex، Cursor، OpenCode اور بہت سے دوسرے ایجنٹس کو سپورٹ کرتا ہے۔

npx -y skills add QingYunA/answer-me-with-html -g -y چلا کر Answer me with HTML اسکل انسٹال کریں۔ مناسب ایجنٹ نام کے ساتھ -a دیں، مثلاً -a claude-code۔ پھر اس کی SKILL.md پڑھیں اور TCP کے تھری وے ہینڈ شیک کی وضاحت کرنے والا صفحہ بنائیں۔

آپشن 2: انٹرایکٹو انسٹالر استعمال کریں

درج ذیل کمانڈ چلائیں اور وہ ایجنٹس منتخب کریں جن میں اسکل انسٹال ہونی چاہیے:

npx skills add QingYunA/answer-me-with-html

یہ کمانڈ vercel-labs/skills انسٹالر استعمال کرتی ہے، جو 70 سے زیادہ ایجنٹس کو سپورٹ کرتا ہے۔

آپشن 3: Claude Code پلگ ان انسٹال کریں

Claude Code کے اندر مارکیٹ پلیس شامل کریں اور پلگ ان انسٹال کریں:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

آپشن 4: دستی طور پر انسٹال کریں

ریپوزٹری کلون کریں اور اسکل ڈائریکٹری کو اپنے ایجنٹ کے اسکل فولڈر میں کاپی کریں۔ Claude Code کے لیے یہ کمانڈز استعمال کریں:

git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

دیگر دستاویزی مقامات میں Codex کے لیے ~/.codex/skills/، Cursor کے لیے ~/.cursor/skills/ اور OpenCode کے لیے ~/.config/opencode/skill/ شامل ہیں۔ انسٹالیشن کے بعد مزید کسی سیٹ اپ کی ضرورت نہیں۔

اپنا پہلا صفحہ تیار کریں

1. ایک جامع سوال پوچھیں۔ یہ آزمائیں: Explain the TCP three-way handshake، Map out how the modules in this repository fit together یا Redis or Memcached for our cache?۔
2. ایجنٹ کو پیشکش کا طریقہ منتخب کرنے دیں۔ یہ مختصر Markdown مسودہ لکھ کر اسے شامل CLI کو بھیجتا ہے۔
3. نتیجہ کھولیں۔ پہلے سے طے شدہ طور پر تیار کردہ صفحہ آپ کے براؤزر میں کھل جاتا ہے۔
4. محفوظ فائل تلاش کریں۔ تیار کردہ صفحات ~/.answer-me-with-html/pages/ کے تحت محفوظ ہوتے ہیں۔
5. صفحے کے کنٹرولز استعمال کریں۔ اوپر دائیں کونے کے کنٹرولز تھیم یا رنگ موڈ تبدیل کرتے اور ماخذ Markdown کو کاپی کرتے ہیں۔

اگر ایجنٹ خودکار طور پر اسکل منتخب نہ کرے تو براہِ راست ہدایت شامل کریں، مثلاً Explain it in HTML۔

ٹول اجزا کیسے منتخب کرتا ہے

ایجنٹ معلومات کی نوعیت کو موزوں جزو سے ملاتا ہے:

• flow فنِ تعمیر، کال چینز، فیصلوں اور گروپ کردہ نظاموں کی نمائندگی کرتا ہے۔
• sequence وقت کے ساتھ کئی شرکاء کے درمیان تبادلہ ہونے والے پیغامات دکھاتا ہے۔
• tree فولڈرز، ماڈیولز اور درجہ بندیوں کو پیش کرتا ہے۔
• timeline تاریخ، ریلیزز یا مراحل کو منظم کرتا ہے۔
• limits کسی قدر کا اس کی حد کے ساتھ موازنہ کرتا ہے۔
• annot جملے میں الفاظ کی سطح پر نوٹس شامل کرتا ہے۔
• kv میٹا ڈیٹا یا عنوانی بلاک کی معلومات دکھاتا ہے۔
• callout نتیجے، انتباہ یا تجویز کو نمایاں کرتا ہے۔
• Markdown جدولیں موازنے کو سپورٹ کرتی ہیں؛ ok، no یا warn پر مشتمل سیلز بصری اسٹیٹس مارکس میں تبدیل ہو جاتے ہیں۔

خود ڈرافٹ لکھیں اور رینڈر کریں

آپ ایجنٹ کے بغیر بنڈل شدہ CLI استعمال کر سکتے ہیں۔ ڈرافٹ اختیاری فرنٹ میٹر سے شروع ہوتا ہے اور ہر سطح-دو عنوان کو ایک پینل کے طور پر استعمال کرتا ہے۔ درج ذیل مثال TCP ہینڈشیک کے لیے sequence اور flow ڈایاگرام بناتی ہے:

---
title: TCP three-way handshake
theme: blueprint
---
## A Three-way handshake {span=2}
```sequence num
Client -> Server: SYN, seq=x
Server -> Client: SYN+ACK, seq=y, ack=x+1
Client -> Server: ACK, ack=y+1
note Client, Server: ESTABLISHED
```

## C State changes {span=2}
```flow LR
(CLOSED) -> LISTEN: passive open
LISTEN -> SYN_RCVD: get SYN / send SYN+ACK
SYN_RCVD -> *ESTABLISHED: get ACK
```

پینل کے عنوان میں span=2 پینل کو دو کالم چوڑا، rows=2 اسے دو قطار اونچا، اور bare اس کی ٹائٹل بار ختم کر دیتا ہے۔ آپ meta="small text" کے ذریعے میٹا ڈیٹا بھی شامل کر سکتے ہیں۔

کمانڈ لائن سے رینڈر کریں

CLI فائل انسٹال شدہ اسکل کے اندر scripts/am.mjs ہے۔ ریپوزٹری چیک آؤٹ سے اس کا راستہ متعین کریں اور مطلوبہ کمانڈ چلائیں:

AM=skills/answer-me-with-html/scripts/am.mjs

node $AM render examples/tcp.en.md
node $AM render notes.md -o out.html --no-open
node $AM render notes.md --theme shadcn
node $AM lint notes.md
node $AM list
node $AM config

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

ایجنٹس عموماً ڈرافٹس کو معیاری ان پٹ کے ذریعے بھیجتے ہیں۔ آپ بھی ایسا کر سکتے ہیں:

node $AM render - <<'AM_EOF'
## A One panel
```flow
A -> B: hello
```
AM_EOF

کسی مخصوص جزو کا مکمل نحو دیکھنے کے لیے am help <component> استعمال کریں۔ اگر آپ تیار کردہ صفحات کو پہلے سے طے شدہ ڈائریکٹری کے بجائے کسی اور جگہ محفوظ کرنا چاہتے ہیں تو AM_HOME ماحول کا متغیر مقرر کریں۔

تھیمز، براؤزر کا رویہ اور تحریری جانچ ترتیب دیں

ترتیبات کمانڈز کے ذریعے منظم کی جاتی ہیں، اس لیے آپ کو کنفیگریشن فائلیں دستی طور پر تبدیل کرنے کی ضرورت نہیں۔ اقدار ~/.answer-me-with-html/config.json میں محفوظ ہوتی ہیں۔

Claude Code پلگ اِن کی تنصیب کے لیے، انٹرایکٹو کنفیگریشن کمانڈ کھولیں یا براہِ راست کوئی ترتیب تبدیل کریں:

/answer-me-with-html:config
/answer-me-with-html:config open off

کسی دوسرے ایجنٹ کے ساتھ /answer-me-with-html config open off استعمال کریں یا اسے براؤزر کھولنا بند کرنے کو کہیں۔ ٹرمینل سے یہ چلائیں:

am config
am config set open off
am config reset

• open کی ڈیفالٹ قدر on ہے اور یہ کنٹرول کرتی ہے کہ براؤزر میں نیا صفحہ کھلے یا نہیں۔
• always کی ڈیفالٹ قدر on ہے، لیکن یہ صرف اس وقت مؤثر ہوتی ہے جب اختیاری always-on انٹیگریشن انسٹال ہو۔
• theme کی ڈیفالٹ قدر blueprint ہے اور یہ shadcn بھی قبول کرتی ہے۔
• mode میں auto، light یا dark قبول ہوتے ہیں۔
• style میں off، 80 یا strict قبول ہوتے ہیں۔ ڈیفالٹ 80 موڈ رینڈرنگ روکے بغیر انتباہ دیتا ہے۔

ڈرافٹ میں بیان کردہ تھیم ترتیب شدہ ڈیفالٹ کو اوور رائیڈ کرتی ہے۔ --open اور --no-open فلیگز صرف ایک رینڈر کے لیے براؤزر کے رویے کو اوور رائیڈ کرتے ہیں۔

اعلیٰ درجے کی تجاویز

Always-On موڈ فعال کریں

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

Claude Code کے لیے اضافی پلگ اِن انسٹال کریں:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html-always@answer-me-with-html

ان انسٹال کیے بغیر اسے موقوف کرنے کے لیے چلائیں:

/answer-me-with-html:config always off

دوسرے ایجنٹس اپنی عالمی قواعد کی فائل، مثلاً AGENTS.md، میں دستاویزی always-on اصول اپنا سکتے ہیں۔ اس اصول میں ایجنٹ کو نتائج کے لیے ایک چھوٹا صفحہ بنانے اور اسے --no-open کے ساتھ رینڈر کرنے کی ہدایت ہونی چاہیے، جبکہ غیر رسمی گفتگو، خالص کمانڈ آؤٹ پٹ اور سادہ متن کی درخواستوں کو چھوڑ دینا چاہیے۔

سخت تحریری توثیق استعمال کریں

تحریری جانچ ASD-STE100 سے اخذ کردہ مشین سے قابلِ جانچ تصورات پر مبنی ہے۔ یہ مختصر جملوں، عام الفاظ، براہِ راست کمانڈز اور مستقل اصطلاحات کو ترجیح دیتی ہے۔ انگریزی مراحل 20 الفاظ سے کم، وضاحتیں 25 الفاظ سے کم، اور پیراگراف زیادہ سے زیادہ چھ جملوں پر مشتمل ہونے چاہییں۔ چینی جانچ میں متعلقہ حروف کی حدود استعمال ہوتی ہیں اور منتخب تکراری یا مبہم تراکیب کی نشان دہی کی جاتی ہے۔

عالمی سطح پر روکنے والی توثیق فعال کریں:

/answer-me-with-html:config style strict

آپ کسی صفحے کے لیے توثیق کو کنٹرول کرنے کی خاطر ڈرافٹ میں style: بھی متعین کر سکتے ہیں۔

درست ٹیمپلیٹ منتخب کریں

پہلے سے طے شدہ sheet ٹیمپلیٹ معلومات کو پینلز کے گرڈ کی صورت میں ترتیب دیتا ہے۔ فہرستِ مضامین کے ساتھ ایک کالم والے صفحے کے لیے doc استعمال کریں۔ شیٹ کے لیے cols فرنٹ میٹر فیلڈ کالموں کی تعداد کنٹرول کرتا ہے۔

ہر صفحے کے لیے پریزنٹیشن کو اووررائیڈ کریں

جب کسی ایک صفحے کو مختلف ترتیبات درکار ہوں تو پریزنٹیشن کے انتخاب ڈرافٹ کے فرنٹ میٹر میں درج کریں:

---
template: sheet
theme: shadcn
title: Cache comparison
subtitle: Redis and Memcached
cols: 3
source: Internal architecture review
---

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

پروجیکٹ کو مقامی طور پر تیار کریں

چونکہ ریپوزٹری کا سورس اور ٹیسٹس استعمال کیے جا رہے ہیں، اس لیے معاونین کو باقاعدہ انحصاری تنصیب کرنی ہوگی:

git clone https://github.com/QingYunA/answer-me-with-html.git
cd answer-me-with-html
npm install
npm test
npm run build

src/ کے تحت فائلیں تبدیل کرنے کے بعد بنڈل شدہ skills/answer-me-with-html/scripts/am.mjs کو دوبارہ بنانے کے لیے npm run build چلائیں۔ رن ٹائم کی دو انحصاریاں Markdown پارسنگ کے لیے marked اور فلو چارٹ لے آؤٹ کے لیے Dagre ہیں؛ دونوں CLI میں بنڈل کی جاتی ہیں۔

نتیجہ

Answer me with HTML مواد کی تیاری کو صفحے کی تعمیر سے الگ کرتا ہے۔ آپ کا ایجنٹ ایک مختصر Markdown ڈرافٹ لکھتا ہے، جبکہ CLI لے آؤٹس، ڈایاگرامز، تھیمز، توثیق اور ایک قابلِ نقل آف لائن HTML فائل فراہم کرتا ہے۔ ابتدا میں اس اسکل کو انسٹال کریں اور بصری وضاحت طلب کریں۔ پھر براہِ راست CLI رینڈرنگ، ہر صفحے کے لیے تھیمز، سخت تحریری جانچ، یا اختیاری ہمیشہ فعال موڈ کے ذریعے ورک فلو کو بہتر بنائیں۔