smyw ব্যবহার করে কোডিং Agent-কে কোড লেখার আগে প্রোটোটাইপ আঁকান: ইনস্টলেশন, পর্যালোচনা ও মতামতের সম্পূর্ণ টিউটোরিয়াল

smyw কী

smyw, অর্থাৎ “show me you want”, হলো কোডিং Agent-এর জন্য একটি skill, যা Claude Code, DeepSeek Harness এবং SKILL.md সমর্থনকারী অন্যান্য Agent-এ ব্যবহার করা যায়। এটি 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

দ্বিতীয় ধাপ: Agent যে অবস্থান থেকে skill পড়তে পারে সেখানে রাখুন

Claude Code ব্যবহারকারীরা একটি গ্লোবাল সিম্বলিক লিংক তৈরি করতে পারেন, যাতে সব প্রকল্পে 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 সংশ্লিষ্ট আচরণ বা API-এর প্লেসহোল্ডার বোঝায়।

সম্পূর্ণ ফিল্ডের বিবরণ spec-format.md-এ দেখা যাবে, আর Agent-এর কার্যনির্বাহের নিয়ম SKILL.md-এ পাওয়া যাবে।

উন্নত ব্যবহারের কৌশল

ইন্টারফেস, প্রক্রিয়া ও ব্যাকএন্ড একসঙ্গে পরীক্ষা করুন

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

কোডের প্রভাব বুঝতে টুলবার ব্যবহার করুন

• উপাদানের পেছনের আচরণ বা API প্লেসহোল্ডার দেখতে “ƒ ফাংশন” খুলুন।
• মডিউলের সঙ্গে সম্পর্কিত কোড কম্পোনেন্ট দেখতে “কম্পোনেন্ট” খুলুন।
• এই চাহিদার প্রভাবের পরিসরে মনোযোগ কেন্দ্রীভূত করতে “অপরিবর্তিত অংশ ম্লান করুন” খুলুন।
• সম্পূর্ণ ট্রিগার সম্পর্ক পর্যালোচনা করার প্রয়োজন হলে “সব সংযোগ” খুলুন।

স্টেটের পরিবর্তন যাচাই করতে ডেমো মোড ব্যবহার করুন

ডেমো মোড শুধু নেভিগেশন দেখার জন্য নয়, স্টেটের পারস্পরিক সংযোগ যাচাই করতেও উপযোগী। যেমন, “উত্তর বাক্সে প্রতিস্থাপন করুন” বোতামটি ড্রাফটটি উত্তর বাক্সে বসিয়ে ড্রয়ার বন্ধ করতে পারে। অ্যানোটেশন স্বয়ংক্রিয়ভাবে সেই সময়ের পেজ, খোলা কনটেন্ট এবং ক্লিকের ইতিহাস রেকর্ড করে, যা 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 তৈরি করা, ইন্টার‌্যাক্টিভ প্রোটোটাইপ দেখানো, কাঠামোবদ্ধ ফিডব্যাক সংগ্রহ করা, তারপর বাস্তবায়ন শুরু করা”-তে রূপান্তর করে। পেজের বিন্যাস, পপ-আপ, স্টেট পরিবর্তন, একাধিক পেজের প্রক্রিয়া অথবা ফ্রন্টএন্ড ও ব্যাকএন্ড API-সংক্রান্ত চাহিদার জন্য এটি বিশেষভাবে উপযোগী।

রিপোজিটরির উদাহরণ দিয়ে শুরু করুন। Agent skill পড়তে পারছে কিনা নিশ্চিত করার পর এটি বাস্তব প্রকল্পে ব্যবহার করুন। পরিবর্তনের চিহ্ন, ডেমো মোড, সরাসরি সম্পাদনা, অ্যানোটেশন এবং সংস্করণভিত্তিক ফিডব্যাকের মাধ্যমে চাহিদা বোঝার বিচ্যুতি উল্লেখযোগ্যভাবে কমানো যায়, ফলে আনুষ্ঠানিক কোডিং ইতিমধ্যে নিশ্চিত করা সমাধানের ভিত্তিতে শুরু হয়।