মূল কনটেন্টে যান
এআই টিউটোরিয়াল

Answer me with HTML দিয়ে AI-এর উত্তরকে পাঠযোগ্য পৃষ্ঠায় রূপান্তর করুন

Answer me with HTML কীভাবে সংক্ষিপ্ত, AI-লিখিত Markdown-কে কাঠামোবদ্ধ ও দৃশ্যত আকর্ষণীয় পৃষ্ঠায় রূপান্তর করে তা জানুন। এই টিউটোরিয়ালে ইনস্টলেশন, দৈনন্দিন প্রম্পট, সরাসরি CLI রেন্ডারিং, থিম, কম্পোনেন্ট, লেখা যাচাই, সেটিংস এবং ঐচ্ছিক সর্বদা-চালু মোড নিয়ে আলোচনা করা হয়েছে।

পড়তে প্রায় 24 মিনিট লাগবে
Answer me with HTML দিয়ে AI-এর উত্তরকে পাঠযোগ্য পৃষ্ঠায় রূপান্তর করুন

Answer me with HTML কী করে

Answer me with HTML হলো একটি এজেন্ট স্কিল, যা জটিল উত্তরকে পাঠযোগ্য, স্বয়ংসম্পূর্ণ HTML পেজে রূপান্তর করে। মডেলকে প্রতিটি HTML উপাদান, CSS নিয়ম এবং SVG কো-অর্ডিনেট লিখতে বলার পরিবর্তে, এই স্কিল মডেলকে একটি সংক্ষিপ্ত Markdown খসড়া তৈরি করতে দেয়। এরপর এর সঙ্গে থাকা CLI লেআউট, স্টাইলিং এবং ডায়াগ্রাম রেন্ডারিং পরিচালনা করে।

কাজের এই বিভাজন জেনারেট হওয়া আউটপুট এবং অপেক্ষার সময় কমায়। প্রজেক্টের বেঞ্চমার্কে, স্কিলটি ৬,৮৭৩-এর পরিবর্তে মধ্যম মানে ৯২৩টি আউটপুট টোকেন ব্যবহার করেছে এবং উত্তর সম্পন্ন করতে ৪৬ সেকেন্ডের পরিবর্তে ১৩ সেকেন্ড লেগেছে। অতিরিক্ত এজেন্ট টার্নে কথোপকথনের প্রসঙ্গ আবার পড়া হয় বলে পরিমাপ করা খরচ প্রায় একই ছিল।

Answer me with HTML পেজের উদাহরণ

স্থাপত্যের ব্যাখ্যা, বহু-ধাপের প্রক্রিয়া, তুলনা, টাইমলাইন, মডিউল ট্রি এবং টীকা-সহ লেখার পর্যালোচনার মতো কাঠামো থেকে উপকৃত তথ্যের জন্য এই টুলটি কার্যকর। সাধারণ প্রশ্নের উত্তর সাধারণ টেক্সট হিসেবেও দেওয়া যেতে পারে; আপনি স্পষ্টভাবে একটি পেজ চাইলে তবেই ভিন্ন নির্দেশ না থাকলে এজেন্ট নিজেই সিদ্ধান্ত নেয় কখন পেজ তৈরি করা উপযোগী।

প্রধান বৈশিষ্ট্য

  • সংক্ষিপ্ত মডেল আউটপুট: মডেল শত শত লাইনের পুনরাবৃত্ত HTML, CSS এবং SVG লেখার পরিবর্তে কনটেন্ট লেখে।
  • কোড-নির্ভর লেআউট: CLI প্যানেলের অবস্থান এবং ডায়াগ্রামের কো-অর্ডিনেট হিসাব করে, ফলে কাটা লেবেল ও অসম ফাঁক কমে।
  • সহায়ক যাচাই: খসড়ায় ত্রুটি থাকলে CLI লাইন, কম্পোনেন্ট এবং একটি সঠিক উদাহরণ জানায়, যাতে এজেন্ট সেটি সংশোধন করতে পারে।
  • ভিজ্যুয়াল কম্পোনেন্ট: খসড়ায় ফ্লোচার্ট, সিকোয়েন্স ডায়াগ্রাম, ট্রি, টাইমলাইন, সীমা, টীকা, কী-ভ্যালু ব্লক, কলআউট এবং তুলনামূলক টেবিল থাকতে পারে।
  • দুটি থিম: ইঞ্জিনিয়ারিং-ধাঁচের blueprint থিম অথবা কার্ড-ভিত্তিক shadcn থিম বেছে নিন। উভয়ই লাইট ও ডার্ক মোড সমর্থন করে।
  • বহনযোগ্য আউটপুট: প্রতিটি ফলাফল কোনো CDN লিংক বা ওয়েব ফন্ট ছাড়াই একটি HTML ফাইল, তাই এটি অফলাইনে খোলা এবং সহজে শেয়ার করা যায়।
  • এম্বেড করা সোর্স: প্রতিটি পেজ এটি তৈরিতে ব্যবহৃত Markdown সংরক্ষণ করে। পেজের Copy source কন্ট্রোল সেই খসড়া সংগ্রহ করে।
  • লেখার যাচাই: ইংরেজি ও চীনা খসড়ায় দীর্ঘ বাক্য, অতিরিক্ত শব্দযুক্ত বাক্যাংশ, প্যাসিভ ভয়েস এবং সংশ্লিষ্ট স্টাইল সমস্যা পরীক্ষা করা হয়।
স্কিলটি তৈরি করা ভিজ্যুয়াল AI উত্তর

প্রয়োজনীয়তা ও ইনস্টলেশন

আপনার Node.js ২০ বা তার পরের সংস্করণ প্রয়োজন। সাধারণ স্কিল ইনস্টলেশনের জন্য আলাদা npm install প্রয়োজন হয় না, কারণ CLI এবং এর রানটাইম নির্ভরতা স্কিলের সঙ্গে বান্ডেল করা থাকে।

বিকল্প ১: আপনার এজেন্টকে ইনস্টল করতে দিন

প্রস্তাবিত পদ্ধতি হলো আপনার কোডিং এজেন্টকে একটি ইনস্টলেশন অনুরোধ দেওয়া। ইনস্টলারটি 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 three-way handshake ব্যাখ্যা করে একটি পেজ তৈরি করুন।

বিকল্প ২: ইন্টার‌্যাক্টিভ ইনস্টলার ব্যবহার করুন

নিচের কমান্ডটি চালিয়ে যে এজেন্টগুলোতে স্কিলটি ইনস্টল করতে চান, সেগুলো নির্বাচন করুন:

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

কমান্ডটি vercel-labs/skills ইনস্টলার ব্যবহার করে, যা ৭০টিরও বেশি এজেন্ট সমর্থন করে।

বিকল্প ৩: Claude Code প্লাগইন ইনস্টল করুন

Claude Code-এর ভেতরে মার্কেটপ্লেস যোগ করে প্লাগইনটি ইনস্টল করুন:

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

বিকল্প ৪: ম্যানুয়ালি ইনস্টল করুন

রিপোজিটরি ক্লোন করে স্কিল ডিরেক্টরিটি আপনার এজেন্টের স্কিল ফোল্ডারে কপি করুন। 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 ব্যবহার করতে পারেন। একটি খসড়া ঐচ্ছিক front matter দিয়ে শুরু হয় এবং প্রতিটি দ্বিতীয়-স্তরের শিরোনামকে একটি প্যানেল হিসেবে ব্যবহার করে। নিচের উদাহরণটি একটি TCP handshake-এর জন্য 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 ফাইলটি ইনস্টল করা skill-এর ভেতরে scripts/am.mjs। কোনো repository checkout থেকে এর পথ নির্ধারণ করে প্রয়োজনীয় কমান্ড চালান:

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

প্রথম কমান্ডটি একটি খসড়া রেন্ডার করে এবং সেটি খুলে দেয়। দ্বিতীয়টি আউটপুট ফাইলের নাম নির্বাচন করে এবং ব্রাউজার খোলা বন্ধ রাখে। তৃতীয়টি একটি রান-এর জন্য থিম পরিবর্তন করে। বাকি কমান্ডগুলো লেখার পরীক্ষা চালায়, কম্পোনেন্টের তালিকা দেখায় এবং সেটিংস প্রদর্শন করে।

এজেন্টরা সাধারণত standard input-এর মাধ্যমে খসড়া পাঠায়। আপনিও একইভাবে করতে পারেন:

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

নির্দিষ্ট কোনো কম্পোনেন্টের সম্পূর্ণ সিনট্যাক্স দেখতে am help <component> ব্যবহার করুন। ডিফল্ট ডিরেক্টরির পরিবর্তে অন্য কোথাও তৈরি হওয়া পেজ সংরক্ষণ করতে চাইলে AM_HOME environment variable নির্ধারণ করুন।

থিম, ব্রাউজারের আচরণ এবং লেখার পরীক্ষা কনফিগার করুন

সেটিংস কমান্ডের মাধ্যমে পরিচালিত হয়, তাই কনফিগারেশন ফাইল হাতে সম্পাদনা করার প্রয়োজন নেই। মানগুলো ~/.answer-me-with-html/config.json-এ সংরক্ষিত থাকে।

Claude Code plugin ইনস্টল করা থাকলে interactive configuration কমান্ড খুলুন অথবা সরাসরি কোনো সেটিং পরিবর্তন করুন:

/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 integration ইনস্টল করা থাকলেই এটি কার্যকর।
  • theme-এর ডিফল্ট মান blueprint; shadcn-ও গ্রহণ করে।
  • mode auto, light বা dark গ্রহণ করে।
  • style off, 80 বা strict গ্রহণ করে। ডিফল্ট 80 মোড রেন্ডার বন্ধ না করে সতর্ক করে।

খসড়ায় ঘোষিত কোনো থিম কনফিগার করা ডিফল্ট থিমকে ছাপিয়ে যায়। --open এবং --no-open flag শুধুমাত্র একটি রেন্ডারের জন্য ব্রাউজারের আচরণ পরিবর্তন করে।

হালকা ও গাঢ় পেজ থিমের উদাহরণ

উন্নত পরামর্শ

Always-On Mode চালু করুন

সাধারণত কোনো উত্তরে পেজ থাকলে উপকার হবে কেবল তখনই এজেন্ট একটি পেজ তৈরি করে। Always-on mode চালু থাকলে কোনো উত্তরে উপসংহার, সারসংক্ষেপ, পরিকল্পনা, তুলনা, পর্যালোচনা বা ব্যাখ্যা থাকলেই একটি ছোট পেজ যোগ হয়। সাধারণ পেজে দুই থেকে চারটি প্যানেল থাকে এবং ব্রাউজার না খুলেই রেন্ডার হয়। সাধারণ কথোপকথন এবং উপসংহারবিহীন উত্তর অপরিবর্তিত থাকে।

Claude Code-এর জন্য অতিরিক্ত plugin ইনস্টল করুন:

/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

অন্য এজেন্টগুলো তাদের global rules file-এ, যেমন AGENTS.md-এ, নথিভুক্ত always-on নিয়ম গ্রহণ করতে পারে। নিয়মটিতে বলা উচিত, উপসংহারের জন্য একটি ছোট পেজ তৈরি করে --no-open দিয়ে রেন্ডার করতে হবে; তবে সাধারণ কথোপকথন, শুধু কমান্ডের আউটপুট এবং plain text-এর অনুরোধ এড়িয়ে যেতে হবে।

কঠোর লেখার যাচাই ব্যবহার করুন

লেখার পরীক্ষা ASD-STE100 থেকে অভিযোজিত, মেশিনে যাচাইযোগ্য ধারণার ওপর ভিত্তি করে তৈরি। এটি ছোট বাক্য, প্রচলিত শব্দ, সরাসরি নির্দেশ এবং সামঞ্জস্যপূর্ণ পরিভাষাকে অগ্রাধিকার দেয়। ইংরেজি ধাপগুলো 20 শব্দের মধ্যে, বিবরণ 25 শব্দের মধ্যে এবং অনুচ্ছেদ সর্বোচ্চ ছয়টি বাক্যের হওয়া উচিত। চীনা ভাষার পরীক্ষায় সংশ্লিষ্ট অক্ষরসীমা ব্যবহার করা হয় এবং নির্বাচিত পুনরাবৃত্তিমূলক বা অস্পষ্ট গঠন চিহ্নিত করা হয়।

বিশ্বব্যাপী blocking validation চালু করুন:

/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

src/-এর অধীনে ফাইল পরিবর্তন করার পর বান্ডেল করা skills/answer-me-with-html/scripts/am.mjs পুনর্নির্মাণ করতে npm run build চালান। দুটি রানটাইম নির্ভরতা হলো Markdown পার্সিংয়ের জন্য marked এবং ফ্লো-চার্ট লেআউটের জন্য Dagre; উভয়ই CLI-এর মধ্যে বান্ডেল করা আছে।

উপসংহার

Answer me with HTML কনটেন্ট তৈরি ও পৃষ্ঠা নির্মাণকে আলাদা করে। আপনার এজেন্ট একটি সংক্ষিপ্ত Markdown খসড়া লেখে, আর CLI লেআউট, ডায়াগ্রাম, থিম, যাচাই এবং বহনযোগ্য অফলাইন HTML ফাইল সরবরাহ করে। প্রথমে স্কিলটি ইনস্টল করে একটি ভিজ্যুয়াল ব্যাখ্যা চাইুন। এরপর সরাসরি CLI রেন্ডারিং, প্রতি-পৃষ্ঠার থিম, কঠোর লেখার যাচাই বা ঐচ্ছিক সর্বদা-চালু মোড ব্যবহার করে ওয়ার্কফ্লোটি পরিমার্জন করুন।