Open Claude UI টিউটোরিয়াল: উচ্চমানের AI কথোপকথন ইন্টারফেস ও প্রোডাকশন-গ্রেড ইন্টারঅ্যাকশন অ্যানিমেশন তৈরি

প্রকল্পের সংক্ষিপ্ত পরিচিতি

open-claude-ui আধুনিক ডেস্কটপ AI ক্লায়েন্টের জন্য একটি ওপেন-সোর্স UI কম্পোনেন্ট লাইব্রেরি ও মোশন ইঞ্জিন। প্রকল্পটি REA রিভার্স ইঞ্জিনিয়ারিং ফ্রেমওয়ার্কের মাধ্যমে স্ট্যাটিক AST বিশ্লেষণ, ক্লোজার কোড ডি-অবফাসকেশন, রানটাইম ট্র্যাকিং এবং ASAR রিসোর্স ডিকনস্ট্রাকশন সম্পন্ন করেছে। গবেষণার ফলাফল পুনর্ব্যবহারযোগ্য React কম্পোনেন্ট, Hooks, থিম স্টাইল এবং প্রযুক্তিগত ডকুমেন্টেশনে সাজানো হয়েছে।

এটি শুধু ইন্টারফেসের বাহ্যিক রূপ পুনর্নির্মাণ করে না; বরং ইন্টারঅ্যাকশনের অনুভূতিকে প্রভাবিত করা প্রকৌশলগত প্রক্রিয়াগুলিও পুনরুদ্ধার করে। এর মধ্যে রয়েছে ফিজিক্যাল স্প্রিং প্যারামিটার, CJK ইনপুট মেথড সুরক্ষা, স্ক্রল প্রান্তের ফেড-আউট, স্ট্রিমিং মেসেজ স্ক্রল নিয়ন্ত্রণ, কার্সর-অ্যাঙ্করড জুম, ড্র্যাগ ডেড জোন এবং Web Audio-ভিত্তিক সিন্থেটিক নোটিফিকেশন সাউন্ড।

কমপ্লায়েন্স নোট: প্রকল্পটি বাণিজ্যিক ফন্ট, রেকর্ডিং ফাইল বা অন্যান্য মালিকানাধীন বাইনারি অ্যাসেট বিতরণ করে না; এর পরিবর্তে সিস্টেম ফন্ট ফলব্যাক স্ট্যাক এবং Web Audio API-ভিত্তিক সম্পূর্ণ কোডেড সাউন্ড ইফেক্ট ব্যবহার করে। প্রকল্পটি MIT License-এর অধীনে প্রকাশিত এবং সংশ্লিষ্ট ফলাফল শিক্ষা, গবেষণা ও প্রকৌশলগত বিনিময়ের জন্য ব্যবহৃত হয়।

কোন ধরনের প্রকল্পের জন্য উপযোগী

আপনি যদি AI চ্যাট ক্লায়েন্ট, মডেল কনসোল, টুল কল অনুমোদন ইন্টারফেস, ডেস্কটপ সহকারী, মিডিয়া ভিউয়ার বা মাল্টি-এজেন্ট সহযোগিতা স্পেস তৈরি করেন, তাহলে এই রিপোজিটরি থেকে প্রয়োজন অনুযায়ী কম্পোনেন্ট নিতে পারবেন। এতে ভিজ্যুয়াল টোকেন ও জটিল ইন্টারঅ্যাকশন নিজে থেকে পুনরায় ডিবাগ করতে হবে না।

• Web AI অ্যাপ্লিকেশন: সেশন বাবল, রিচ-টেক্সট ইনপুট বক্স, মডেল সুইচার এবং Token ড্যাশবোর্ড ব্যবহার করুন।
• স্ট্রিমিং জেনারেশন ইন্টারফেস: স্ক্রল পিন, থিংকিং প্রসেস ভাঁজ করা এবং ফেড-আউট মাস্ক ব্যবহার করুন।
• ডেস্কটপ অ্যাপ্লিকেশন: Electron উইন্ডো ফ্যাক্টরি, macOS টাইটেল বার এবং Vibrancy ম্যাটেরিয়াল স্কিম ব্যবহার করুন।
• Artifacts ও মাল্টিমিডিয়া অ্যাপ্লিকেশন: বিভক্ত প্যান ড্র্যাগ, মিডিয়া লাইটবক্স, শেয়ার্ড এলিমেন্ট ট্রানজিশন এবং iframe স্যান্ডবক্স ব্রিজ ব্যবহার করুন।
• অ্যাক্সেসিবল অ্যাপ্লিকেশন: WAI-ARIA ধারণার সঙ্গে সামঞ্জস্যপূর্ণ Roving TabIndex ফোকাস রোমিং Hook ব্যবহার করুন।

মূল বৈশিষ্ট্য

ডিজাইন টোকেন ও ভিজ্যুয়াল সিস্টেম

প্রকল্পে Surface 0 থেকে Surface 3 পর্যন্ত কম-কনট্রাস্ট সারফেস স্তর, টেরাকোটা কমলা #d97757, হাই-ডিপিআই স্ক্রিনের সূক্ষ্ম বর্ডার ক্ষতিপূরণ, সিস্টেম ফন্ট ফলব্যাক স্ট্যাক এবং বোতাম, প্যানেল, বাবল ও ইনপুট বক্সের জন্য নির্ধারিত কর্নার-রেডিয়াস ম্যাট্রিক্স রয়েছে। গ্লোবাল থিম ভেরিয়েবল ও কীফ্রেম code-examples/cds-theme.css-এ কেন্দ্রীভূত।

৩০টি স্বতন্ত্র কোড মডিউল

রিপোজিটরিতে ১১টি মৌলিক অ্যাটমিক কন্ট্রোল এবং ১৯টি আর্কিটেকচার বা ইন্টারঅ্যাকশন মডিউল রয়েছে। কম্পোনেন্টের সোর্স code-examples-এ, আর একীভূত TypeScript এক্সপোর্ট এন্ট্রি src/index.ts-এ অবস্থিত। এসব মডিউল বোতাম, সেগমেন্টেড নির্বাচন, ইনপুট বক্স, সেশন বাবল, MCP সিদ্ধান্ত কার্ড, মিডিয়া ভিউয়ার, স্ট্রিমিং Diff, ডেস্কটপ উইন্ডো এবং মাল্টি-এজেন্ট ক্যানভাসসহ বিভিন্ন পরিস্থিতি কভার করে।

প্রোডাকশন-গ্রেড ইন্টারঅ্যাকশন মেকানিজম

• Bouncy, Snappy, Gentle এবং Heavy Snap-সহ ৪টি ফিজিক্যাল স্প্রিং প্রিসেট।
• স্ক্রল এলাকায় ৭ স্তরের নন-লিনিয়ার Alpha মাস্ক ব্যবহার করা হয় এবং শীর্ষ বা নিচে পৌঁছানো হয়েছে কি না তার ভিত্তিতে তা গতিশীলভাবে সমন্বয় করা হয়।
• ইনপুট বক্সে isComposing এবং keyCode === 229-এর দ্বৈত শর্তের মাধ্যমে CJK ইনপুট মেথড সুরক্ষিত থাকে।
• স্ট্রিমিং আউটপুটে 40px নিচের সহনসীমা এবং 150ms ম্যানুয়াল স্ক্রল কুলডাউন ব্যবহার করা হয়, যাতে স্বয়ংক্রিয় স্ক্রল ভিউপোর্টের নিয়ন্ত্রণ কেড়ে না নেয়।
• মাইক্রোফোনের ওয়েভফর্মে 8% নয়েজ গেট এবং 0.7 ঘাতের Gamma কম্প্রেশন ব্যবহার করা হয়।
• ড্র্যাগ ও গ্যালারি ইন্টারঅ্যাকশনে 4px পয়েন্টার-মুভমেন্ট ডেড জোন যোগ করা হয়েছে, যা হাতের সামান্য কাঁপুনি ফিল্টার করে।

অফলাইন কম্পোনেন্ট প্রিভিউ

রিপোজিটরির সঙ্গে একক-ফাইলের ইন্টারঅ্যাকটিভ স্টোরিবুক docs/claude-components-storybook.html রয়েছে। স্থানীয় ডেভেলপমেন্ট সার্ভার চালু না করেই টেরাকোটা রঙের সিস্টেম, ডার্ক মোড, বোতামের প্রতিক্রিয়া, সেগমেন্টেড ক্যাপসুল, স্প্রিং অ্যানিমেশন, অ্যাটাচমেন্ট টাইল এবং কপি-স্টেট অ্যানিমেশন দেখা যায়।

ইনস্টলেশন ও পরিবেশ প্রস্তুতি

টেকনোলজি স্ট্যাক যাচাই

রিপোজিটরির নির্দেশনা অনুযায়ী, প্রকল্পে নিম্নলিখিত পরিবেশ থাকা সুপারিশ করা হয়:

• React 18 বা তার পরবর্তী সংস্করণ।
• TypeScript 5.5 বা তার পরবর্তী সংস্করণ।
• Tailwind CSS 3.4 বা তার পরবর্তী সংস্করণ।
• Framer Motion 11 বা তার পরবর্তী সংস্করণ।

README-তে কোনো নির্দিষ্ট প্যাকেজ ম্যানেজারের ইনস্টলেশন কমান্ড দেওয়া নেই। শুরু করার আগে আপনার ওয়ার্কস্পেস, Git নির্ভরতা বা প্যাকেজ প্রকাশের পদ্ধতি অনুযায়ী প্রকল্পটিকে open-claude-ui পাথের মাধ্যমে অ্যাক্সেসযোগ্য করুন এবং উপরোক্ত সমমানের টেকনোলজি স্ট্যাক কনফিগার করা আছে তা নিশ্চিত করুন।

প্রথমে অফলাইন স্টোরিবুক দেখুন

রিপোজিটরির সোর্স কোড সংগ্রহ করা থাকলে, প্রথমে সরাসরি প্রিভিউ ফাইলটি খুলতে পারেন:

open docs/claude-components-storybook.html

ব্যবসায়িক প্রকল্প পরিবর্তন না করেই এই ধাপটি কম্পোনেন্টের ভিজ্যুয়াল প্রভাব, ডার্ক থিম এবং ইন্টারঅ্যাকশন অ্যানিমেশন আপনার প্রকল্পের চাহিদার সঙ্গে সামঞ্জস্যপূর্ণ কি না তা যাচাই করতে সাহায্য করবে।

থিম স্টাইল কনফিগার করা

গ্লোবাল CSS ইমপোর্ট

অ্যাপ্লিকেশনের গ্লোবাল স্টাইল এন্ট্রিতে CDS থিম ফাইলটি ইমপোর্ট করুন। এতে CSS কাস্টম প্রপার্টি এবং কম্পোনেন্টের প্রয়োজনীয় কীফ্রেম রয়েছে:

@import "open-claude-ui/code-examples/cds-theme.css";

এই থিমে সারফেস রং, টেরাকোটা ব্র্যান্ড রং, বর্ডার, শ্যাডো এবং অ্যানিমেশনের ভিত্তি রয়েছে। কম্পোনেন্টগুলোর মধ্যে সামঞ্জস্য বজায় রাখতে প্রতিটি কম্পোনেন্টে রং হার্ডকোড না করে বিদ্যমান CSS ভেরিয়েবল ব্যবহারের পরামর্শ দেওয়া হয়।

Tailwind কনফিগারেশন সম্প্রসারণ

প্রকল্পের tailwind.config.js-এ রিপোজিটরির দেওয়া থিম এক্সটেনশন লোড করুন:

const cdsTheme = require("open-claude-ui/code-examples/tailwind.config.js");

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/open-claude-ui/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      ...cdsTheme.theme.extend
    }
  }
};

content অ্যারেতে আপনার অ্যাপ্লিকেশনের সোর্স কোড এবং open-claude-ui-এর Tailwind ক্লাসনামযুক্ত ফাইলগুলো অন্তর্ভুক্ত করতে হবে। অন্যথায়, প্রোডাকশন বিল্ডের সময় কম্পোনেন্ট ব্যবহৃত ইউটিলিটি ক্লাসগুলো তৈরি নাও হতে পারে।

প্রাথমিক ব্যবহার: মডেল নিয়ন্ত্রণ ও চ্যাট ইনপুট এলাকা তৈরি

নিচের উদাহরণে তিনটি মূল মডিউল একত্র করা হয়েছে:

1. ScrollFadeContainer স্ক্রলযোগ্য এলাকায় ওপর ও নিচের প্রান্তে ফেড-আউট যোগ করে।
2. ModelSwitcherWithTokenGauge মডেল নির্বাচন, Extended Thinking অবস্থা এবং Token বাজেট প্রদর্শন করে।
3. ChatComposer মূল মেসেজ ইনপুট ও পাঠানোর কলব্যাক সরবরাহ করে।

import React, { useState } from 'react';
import {
  ChatComposer,
  ModelSwitcherWithTokenGauge,
  ScrollFadeContainer
} from 'open-claude-ui';

export function App() {
  const [model, setModel] = useState<
    'sonnet-3.5' | 'haiku-3.5' | 'opus-3'
  >('sonnet-3.5');
  const [thinking, setThinking] = useState(true);

  return (
    <div className="flex h-screen w-full bg-[var(--cds-surface-1)]">
      <ScrollFadeContainer
        axis="vertical"
        fadeSize={32}
        className="flex-1 p-6"
      >
        <div className="mx-auto max-w-3xl space-y-4">
          <ModelSwitcherWithTokenGauge
            currentModel={model}
            onModelChange={setModel}
            extendedThinking={thinking}
            onThinkingChange={setThinking}
            tokenBudget={{
              inputTokens: 12400,
              outputTokens: 3200,
              cacheReadTokens: 48000,
              cacheWriteTokens: 16000,
              maxContextWindow: 200000
            }}
          />

          <ChatComposer
            onSend={(text) => console.log('Send message:', text)}
          />
        </div>
      </ScrollFadeContainer>
    </div>
  );
}

স্টেট ম্যানেজমেন্ট বোঝা

currentModel এবং extendedThinking দুটিই অ্যাপ্লিকেশন স্তরে পরিচালিত হয়, তাই মডেল সুইচারকে প্রকৃত মডেল রিকোয়েস্ট কনফিগারেশনের সঙ্গে সিঙ্ক্রোনাইজ করা যায়। উদাহরণের tokenBudget-এ ইনপুট, আউটপুট, ক্যাশ রিড, ক্যাশ রাইট এবং সর্বোচ্চ কনটেক্সট উইন্ডো আলাদাভাবে ড্যাশবোর্ডে পাঠানো হয়েছে।

উদাহরণে ChatComposer-এর onSend শুধু লগ আউটপুট করে। বাস্তব প্রকল্পে যুক্ত করার সময় এই কলব্যাকে আপনার সেশন সার্ভিস কল করতে, মেসেজ তালিকা আপডেট করতে এবং স্ট্রিমিং রেসপন্সের অবস্থা চালু করতে পারেন।

প্রচলিত কম্পোনেন্ট নির্বাচন নির্দেশিকা

মৌলিক কন্ট্রোল

• CdsButton: XS, SM, MD ও LG চারটি আকার এবং Primary, Secondary, Ghost, Outline ও Danger পাঁচটি ভ্যারিয়েন্ট প্রদান করে।
• SegmentedControl: মোড পরিবর্তনের জন্য ব্যবহৃত হয়; এতে জ্যামিতিক পজিশনিং এবং Framer Motion layoutId অ্যানিমেশন স্কিম সমর্থিত।
• StatusIndicators: টেরাকোটা ব্রিদিং লাইট, রিয়েল-টাইম অ্যাক্টিভিটি পালস, থিংকিং থ্রি-ডট অ্যানিমেশন এবং skeleton shimmer অন্তর্ভুক্ত।
• ConfirmationDialog: সাধারণ বা ঝুঁকিপূর্ণ অপারেশনের নিশ্চয়তার জন্য ব্যবহৃত হয়; এতে ব্লার মাস্ক ও কিবোর্ড ফোকাস সীমাবদ্ধতা রয়েছে।
• AttachmentCard: ডেস্কটপ টাইল এবং ইনপুট বক্সের ইনলাইন ক্যাপসুল, এই দুই ধরনের অ্যাটাচমেন্ট প্রদর্শন সমর্থন করে।

সেশন ও টুল কল

• ChatMessageBubbles: ব্যবহারকারীর বাবল ও সহকারীর স্বচ্ছ টাইপোগ্রাফি আলাদা করে।
• ThinkingAccordion: ভাঁজযোগ্য থিংকিং প্রসেস প্রদর্শন করে এবং জেনারেশনের সময় জোরপূর্বক খোলা রাখা যায়।
• RichComposerWithMentions: / কমান্ড, @ কনটেক্সট এবং Token পূর্বাভাস প্রয়োজন এমন ইনপুট টার্মিনালের জন্য উপযোগী।
• McpToolDecisionCard: টুল অনুমোদন প্রক্রিয়ার জন্য ব্যবহৃত হয় এবং pending_approval, running, success ও error অবস্থা কভার করে।

মিডিয়া, কোড ও Artifacts

• MediaLightboxViewer: 75vw গ্যালারি ট্র্যাক, কার্সর-অ্যাঙ্করড Pan/Zoom, ড্র্যাগ ডেড জোন এবং Ctrl-হুইল জুম প্রদান করে।
• ArtifactsSplitPaneResizer: দুই প্যানের আকার পরিবর্তন, প্রান্ত ভাঁজ করা, ডাবল-ক্লিকে 50/50 স্ন্যাপ এবং iframe পয়েন্টার ইভেন্টের হস্তক্ষেপ পরিচালনা করে।
• EpitaxyIframeBridge: Origin যাচাই এবং বিচ্ছিন্ন postMessage RPC প্রোটোকলের মাধ্যমে প্রিভিউ স্যান্ডবক্সের সঙ্গে সংযোগ স্থাপন করে।
• StreamingDiffViewer: ইনক্রিমেন্টাল স্ট্রিমিং সংযোজন এবং ইউনিফাইড ও স্প্লিট, উভয় Diff মোড সমর্থন করে।
• CodeBlock: কোড কনটেইনার এবং 2.5 সেকেন্ডের কপি-স্টেট ক্ষয় প্রদান করে।

উন্নত ব্যবহারিক প্রয়োগ

চীনা, জাপানি ও কোরিয়ান ইনপুট পদ্ধতি সুরক্ষিত রাখা

চ্যাট ইনপুট বক্সে কীবোর্ড ইভেন্ট নিজে থেকে সম্প্রসারণ করতে হলে ইনপুট পদ্ধতির কম্পোজিশন সুরক্ষা অবশ্যই বজায় রাখতে হবে। ব্যবহারকারী পিনইন বা কানার প্রার্থী উইন্ডোতে Enter চাপলে বার্তা জমা দেওয়া উচিত নয়। প্রকল্পে দ্বৈত যাচাই ব্যবহার করা হয়েছে:

const composing =
  event.nativeEvent.isComposing || event.keyCode === 229;

if (event.key === 'Enter' && !composing) {
  // বার্তা জমা দিন
}

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

স্ট্রিমিং আউটপুট যেন স্ক্রলের অবস্থান দখল না করে

ক্রমাগত যুক্ত হওয়া Token পরিচালনা করতে useClaudeScrollPinning ব্যবহার করা যায়। এর মূল কৌশলের মধ্যে রয়েছে নিচে 40px সহনসীমা, 150ms ব্যবহারকারীর স্ক্রল কুলডাউন এবং 35vh ইলাস্টিক বাফার। ব্যবহারকারী যখন নিচের কাছাকাছি অবস্থান করেন, তখন ইন্টারফেস আউটপুটের সঙ্গে অনুসরণ করে স্ক্রল করতে পারে; কিন্তু ব্যবহারকারী সক্রিয়ভাবে উপরে উঠে পুরোনো বার্তা দেখলে স্বয়ংক্রিয় স্ক্রল যেন সঙ্গে সঙ্গে ভিউপোর্টকে নিচে টেনে না আনে।

অ্যানিমেশন প্রিসেট একীভূতভাবে ব্যবহার করা

প্রকল্পের ClaudeMotionPresets.ts-এ সূক্ষ্মভাবে সমন্বয় করা চারটি স্প্রিং方案 রয়েছে। নতুন কম্পোনেন্ট তৈরি করার সময় প্রতিটি অ্যানিমেশনের জন্য ইচ্ছেমতো দৃঢ়তা ও ড্যাম্পিং নির্ধারণ না করে Bouncy, Snappy, Gentle বা Heavy Snap পুনর্ব্যবহার করাই অগ্রাধিকার পাওয়া উচিত। এতে বোতাম, প্যানেল, ড্র্যাগ-স্ন্যাপ এবং শেয়ার্ড এলিমেন্ট ট্রানজিশনের ভৌত ভাষা সামঞ্জস্যপূর্ণ থাকে।

iframe বিভাজন ড্র্যাগ সঠিকভাবে পরিচালনা করা

বিভাজক বারটি iframe-এর ওপর দিয়ে টানার সময় iframe পয়েন্টার ইভেন্ট আটকে ফেলতে পারে এবং ড্র্যাগ থেমে যেতে পারে। ড্র্যাগ সক্রিয় হলে ArtifactsSplitPaneResizer ইভেন্ট আটকে যাওয়া প্রতিরোধ ব্যবস্থা চালু করে এবং এর সঙ্গে 4px মুভমেন্ট ডেড জোন, প্রান্তসীমা এবং ডাবল-ক্লিক করে কেন্দ্রে স্ন্যাপ করার সুবিধা যুক্ত করে। অ্যাপ্লিকেশনে Artifacts প্রিভিউ থাকলে বিভাজক বারের নিজস্ব মাউস ইভেন্টে শুধু监听 না করে এই মডিউলটি পুনর্ব্যবহার করা উচিত।

কীবোর্ড ব্যবহারকারীদের জন্য সম্পূর্ণ নেভিগেশন রাখা

useClaudeRovingFocus একমাত্রিক বা দ্বিমাত্রিক দিকনির্দেশক কী নেভিগেশন, Home ও End দিয়ে সীমায় যাওয়া এবং RTL মিরর ফ্লিপ সমর্থন করে। মডেল গ্রিড, সংযুক্তি তালিকা বা টুল কার্ডের অ্যারে তৈরি করার সময় সঠিক ARIA অর্থ এবং দৃশ্যমান ফোকাসের অবস্থাও একসঙ্গে বজায় রাখতে হবে।

মডেলের রেট লিমিট ও পরিষেবা ত্রুটি পরিচালনা

useRateLimitBackoff 429 এবং 503 প্রতিক্রিয়ার জন্য ছাঁটা এক্সপোনেনশিয়াল ব্যাকঅফ, জিটার ইনজেকশন এবং তিনবার স্বয়ংক্রিয় সার্কিট-ব্রেকার পুনরুদ্ধার সরবরাহ করে। এটি মডেল অনুরোধ স্তরে ব্যবহারের উপযোগী, তবে কখন পুনরায় চেষ্টা করতে হবে, কখন ত্রুটি দেখাতে হবে এবং কখন ব্যবহারকারীকে হাতে পুনরুদ্ধারের অনুমতি দিতে হবে, তা ব্যবসায়িক লজিককে নিজস্ব API প্রতিক্রিয়া কাঠামোর ভিত্তিতে নির্ধারণ করতে হবে।

প্রযুক্তিগত ম্যানুয়াল ব্যবহার করে গভীরভাবে শেখা

কম্পোনেন্টের সোর্স কোডের পাশাপাশি রিপোজিটরিতে 3,000-এর বেশি লাইনের একটি ডিজাইন সিস্টেম প্রযুক্তিগত ম্যানুয়ালও রয়েছে। নিম্নলিখিত ক্রমে পড়ার পরামর্শ দেওয়া হচ্ছে:

1. প্রথমে ডিজাইন দর্শন, Surface রঙের স্তরবিন্যাস, কর্নার-রেডিয়াস ম্যাট্রিক্স এবং হেয়ারলাইন বর্ডারের নিয়ম পড়ুন।
2. এরপর বোতাম, সেগমেন্টেড কন্ট্রোল, স্টেট ইন্ডিকেটর এবং কনফার্মেশন ডায়ালগ শিখুন।
3. তারপর সেশন ইনপুট, CJK গার্ড, মডেল পরিবর্তন এবং MCP স্টেট মেশিন নিয়ে গবেষণা করুন।
4. জটিল অ্যানিমেশন প্রয়োজন হলে স্প্রিং প্যারামিটার, অ্যাম্বিয়েন্ট লাইট এবং স্ক্রল মাস্ক দেখুন।
5. ডেস্কটপ, মিডিয়া টুল বা সহযোগী স্পেস তৈরি করার সময় সংশ্লিষ্ট সিস্টেম আর্কিটেকচার অধ্যায় পড়ুন।

সম্পূর্ণ ম্যানুয়ালটি রয়েছে docs/Claude Design System (CDS).md-এ। প্রকল্পের রিভার্স-অ্যানালাইসিস কাজ REA-এর ওপর নির্ভর করে সম্পন্ন হয়েছে।

AI Coding Agent-এর সঙ্গে সহযোগিতা

রিপোজিটরিতে AGENTS.md, CLAUDE.md, .cursorrules এবং Copilot নির্দেশনা ফাইল রয়েছে। Cursor, Claude Code, GitHub Copilot-এর মতো টুল দিয়ে নতুন ইন্টারফেস তৈরি করার সময় Agent-কে রিপোজিটরির বিদ্যমান টোকেন, স্প্রিং প্রিসেট, বর্ডার নীতি এবং ইনপুট পদ্ধতি সুরক্ষা নিয়ম অনুসরণ করতে বলা যেতে পারে।

নমুনা প্রম্পট: অনুগ্রহ করে এই রিপোজিটরির AGENTS.md নির্দেশনা কঠোরভাবে অনুসরণ করে CDS টেরাকোটা ডিজাইন টোকেন এবং ClaudeMotionPresets স্প্রিং প্রিসেট ব্যবহার করে বর্তমান কম্পোনেন্ট তৈরি করুন।

সারসংক্ষেপ

open-claude-ui AI ক্লায়েন্টের ভিজ্যুয়াল টোকেন, সেশন কন্ট্রোল, অ্যানিমেশন ফিজিক্স, মাল্টিমিডিয়া ইন্টারঅ্যাকশন এবং ডেস্কটপ আর্কিটেকচারকে পুনর্ব্যবহারযোগ্য মডিউলে সাজিয়েছে। সবচেয়ে নির্ভরযোগ্য সংযুক্তির পদ্ধতি হলো প্রথমে অফলাইন স্টোরিবুকের মাধ্যমে ফলাফল নিশ্চিত করা, এরপর থিম CSS ও Tailwind এক্সটেনশন যোগ করা এবং সবশেষে চ্যাট ইনপুট বক্স, মডেল সুইচার ও স্ক্রল কন্টেইনারের মতো মূল কম্পোনেন্ট থেকে সমন্বয় শুরু করা। স্ট্রিমিং আউটপুট, CJK ইনপুট, iframe ড্র্যাগ এবং কীবোর্ড নেভিগেশনের মতো জটিল পরিস্থিতিতে শুধু বাহ্যিক স্টাইল কপি না করে রিপোজিটরির বিদ্যমান Hooks ও স্টেট মেশিন যতটা সম্ভব পুনর্ব্যবহার করা উচিত।