حوّل أجوبة الذكاء الاصطناعي لصفحات مقروءة مع Answer me with HTML

شنو كيدير Answer me with HTML

Answer me with HTML هي مهارة ديال الوكيل كتحوّل الأجوبة المعقّدة لصفحات HTML مقروءة ومتكاملة بوحدها. بلا ما تطلب من النموذج يكتب كل عنصر HTML، وكل قاعدة CSS، وكل إحداثية ديال SVG، كتخليه هاد المهارة يخرّج مسودة قصيرة بـ Markdown. ومن بعد، الـ CLI المرفق كيتكلف بالتخطيط، والتنسيق، ورسم المخططات.

هاد الأداة مفيدة للمعلومات اللي كتستافد من التنظيم، بحال شروحات البنية، والمراحل المتعددة، والمقارنات، والخطوط الزمنية، وأشجار الوحدات، ومراجعات الكتابة المشروحة. حتى السؤال البسيط يقدر ياخذ جواب نصي بسيط؛ الوكيل هو اللي كيقرر واش الصفحة مفيدة، إلا إلا طلبتيها بشكل صريح.

المميزات الرئيسية

• مخرجات مختصرة من النموذج: النموذج كيكتب المحتوى بلاصة مئات السطور المتكررة ديال HTML وCSS وSVG.
• تخطيط موجّه بالكود: الـ CLI كيحسب مواضع اللوحات وإحداثيات المخططات، وكيقلل من التسميات المقطوعة والفراغات غير المتساوية.
• تحقّق مفيد: إلا كانت فالمسودة شي غلطة، الـ CLI كيعطي السطر والمكوّن ومثال صحيح باش يقدر الوكيل يصلحها.
• مكوّنات بصرية: المسودات تقدر تحتوي على مخططات التدفق، ومخططات التسلسل، والأشجار، والخطوط الزمنية، والحدود، والتعليقات، وكتل المفتاح والقيمة، والتنبيهات، وجداول المقارنة.
• جوج ديال السمات: اختار سمة blueprint بطابع هندسي، ولا سمة shadcn مبنية على البطاقات. بجوج كيدعمو الوضع الفاتح والداكن.
• مخرجات قابلة للنقل: كل نتيجة هي ملف HTML واحد بلا روابط CDN ولا خطوط ويب، وهادي كتخليه يتحل بلا إنترنت ويتشارك بسهولة.
• المصدر مضمّن: كل صفحة كتحتافظ بـ Markdown اللي تستعملات لإنشائها. زر Copy source فالصفحة كيرجع هاد المسودة.
• فحوصات الكتابة: المسودات بالإنجليزية والصينية كيتراجعو من ناحية الجمل الطويلة، والتعابير المطوّلة، والمبني للمجهول، ومشاكل أسلوبية مشابهة.

المتطلبات والتثبيت

خاصك Node.js بالإصدار 20 ولا أحدث. التثبيت العادي ديال المهارة ما كيحتاجش npm install بوحدو، حيث الـ CLI والاعتماديات ديال وقت التشغيل مرفقين مع المهارة.

الخيار 1: خلّي الوكيل ديالك يثبّتها

الطريقة الموصى بها هي تعطي لوكيل البرمجة ديالك طلب التثبيت. المثبّت كيدعم Claude Code وCodex وCursor وOpenCode ووكلاء بزاف آخرين.

ثبّت مهارة Answer me with HTML بتشغيل npx -y skills add QingYunA/answer-me-with-html -g -y. دوز -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/skills/ لـ Codex، و~/.cursor/skills/ لـ Cursor، و~/.config/opencode/skill/ لـ OpenCode. ما كاين حتى إعداد إضافي من بعد التثبيت.

صايب أول صفحة ديالك

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 المرفق بلا وكيل. المسودة كتبدا بـ front matter اختياري، وكل عنوان من المستوى الثاني كيتستعمل كلوحة. المثال التالي كينشئ مخططات sequence وflow لمصافحة TCP:

---
title: TCP three-way handshake
theme: blueprint
---
## مصافحة من ثلاث مراحل {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
```

## تغييرات الحالة {span=2}
```flow LR
(CLOSED) -> LISTEN: فتح سلبي
LISTEN -> SYN_RCVD: توصّل بـ SYN / صيفط SYN+ACK
SYN_RCVD -> *ESTABLISHED: توصّل بـ ACK
```

فداخل عنوان اللوحة، span=2 كيجعل اللوحة بعرض جوج أعمدة، وrows=2 كيجعلها بعلو جوج صفوف، وbare كيحيد شريط العنوان ديالها. وتقدر حتى تزيد معلومات وصفية باستعمال meta="نص صغير".

الرندَرة من سطر الأوامر

ملف 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'
## لوحة وحدة
```flow
A -> B: سلام
```
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 كتغلب سلوك المتصفح غير فعملية رندَرة وحدة.

نصائح متقدمة

فعّل الوضع الدائم

عادةً، الوكيل كينشئ صفحة غير ملي كيكون الجواب غادي يستافد منها. الوضع الدائم كيضيف صفحة صغيرة ملي كيكون فالرد خلاصة، ملخّص، خطة، مقارنة، مراجعة، ولا شرح. الصفحات العادية كتستعمل من جوج حتى لربعة ديال اللوحات، وكتترندَر بلا ما يتحلّ المتصفح. الدردشة العادية والردود اللي ما فيهاش خلاصة كيبقاو كيف ما هما.

فـ 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. خاص القاعدة تقول للوكيل ينشئ صفحة صغيرة للخلاصات ويرندَرها باستعمال --no-open، مع تخطّي الدردشة العادية، مخرجات الأوامر فقط، والطلبات ديال النص العادي.

استعمل التحقّق الصارم من الكتابة

فحص الكتابة مبني على أفكار قابلة للتحقّق آلياً ومقتبسة من ASD-STE100. كيعطي الأفضلية للجمل القصيرة، الكلمات الشائعة، الأوامر المباشرة، والمصطلحات المتناسقة. خاص الخطوات بالإنجليزية تبقى أقل من 20 كلمة، والأوصاف أقل من 25 كلمة، والفقرات ما تفوتش ست جمل. فحوصات الصينية كتستعمل حدوداً مقابلة لعدد الحروف، وكتعلّم بعض التراكيب المكرّرة ولا الغامضة.

فعّل التحقّق اللي كيمنع الإخراج على الصعيد العام باستعمال:

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

يمكن لك حتى تحدّد style: فالمسودّة باش تتحكّم فالتأكّد من هديك الصفحة.

ختار القالب المناسب

القالب الافتراضي sheet كيرتّب المعلومات فشبكة ديال اللوحات. استعمل doc لصفحة بعمود واحد ومعاها فهرس المحتويات. فـ sheet، الحقل 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

شغّل npm run build من بعد ما تبدّل الملفات اللي تحت src/ باش تعاود تبني الملف المجمّع skills/answer-me-with-html/scripts/am.mjs. التبعيتان ديال وقت التشغيل هما marked لتحليل Markdown وDagre لترتيب المخططات الانسيابية؛ بجوجهم كيتجمّعو داخل واجهة سطر الأوامر.

الخلاصة

Answer me with HTML كيفصل بين توليد المحتوى وبناء الصفحات. الوكيل ديالك كيكتب مسودّة Markdown مختصرة، وواجهة سطر الأوامر كتوفر التخطيطات، والمخططات، والسمات، والتحقّق، وملف HTML محمول كيخدم بلا إنترنت. بدا بتثبيت المهارة وطلب شرح بصري. ومن بعد حسّن سير العمل بالتصيير المباشر عبر واجهة سطر الأوامر، أو السمات الخاصة بكل صفحة، أو فحوصات الكتابة الصارمة، أو الوضع الاختياري اللي كيبقى مفعّل ديما.