Claude Code-এর Dashboard Design Skill দিয়ে আরও পরিষ্কার ও সৎ ড্যাশবোর্ড তৈরি করুন

ড্যাশবোর্ড ডিজাইন কী?

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

এই নির্দেশনাগুলো ১২৭টি প্রকাশিত ড্যাশবোর্ড স্ক্রিন, একটি রাজস্ব অ্যানালিটিক্স পণ্যের বিস্তারিত বিশ্লেষণ এবং একটি বাস্তব পুনর্নকশা প্রক্রিয়া থেকে সংকলিত। শুধু কোডের মানের ওপর মনোযোগ না দিয়ে, স্কিলটি স্ক্রিনশট QA ধাপসহ সম্পূর্ণ কাজ শেষ করে, যাতে এজেন্ট ব্যবহারকারীরা বাস্তবে যা দেখেন তা মূল্যায়ন করতে পারে।

এই স্কিলের আওতায় KPI টাইল, চার্ট, তুলনামূলক সময়কাল, গুরুত্ব অনুযায়ী সাজানো তালিকা, ফিল্টার, তারিখের পরিসর বাছাইকারী, ইনসাইট, খালি অবস্থা, প্রতিক্রিয়াশীল লেআউট এবং ফোন নেভিগেশনের মতো সাধারণ ড্যাশবোর্ড উপাদান রয়েছে। ওয়েব প্রকল্পের জন্য এর স্পেসিফিকেশনে Tailwind ও React পরিভাষা ব্যবহার করা হয়েছে, আর একটি পৃথক রেফারেন্সে সমতুল্য SwiftUI ও Swift Charts প্যাটার্ন ব্যাখ্যা করা হয়েছে।

মূল ডিজাইন নীতিমালা

প্রকল্পটি চারটি নীতির ভিত্তিতে সুপারিশগুলো সাজিয়েছে:

• প্রথম নজর: প্রতিটি স্ক্রিনে প্রায় তিন সেকেন্ডের মধ্যে একটি প্রধান প্রশ্নের উত্তর পাওয়া উচিত।
• শান্ত: একটি অ্যাকসেন্ট রং ব্যবহার করুন, সহায়ক উপাদানগুলো ধূসর রাখুন এবং অর্থ প্রকাশের সময়ই কেবল রং প্রয়োগ করুন।
• সততা: পুরো ইন্টারফেসে মানগুলো সামঞ্জস্যপূর্ণ রাখুন, অনুমানগুলো চিহ্নিত করুন এবং অল্প কিছু নমুনার ওপর ভিত্তি করে নাটকীয় শতাংশ পরিবর্তন দেখানো এড়িয়ে চলুন।
• লেখার চেয়ে আকৃতি: দ্রুত বোঝার জন্য চার্ট, বার এবং চিপকে অগ্রাধিকার দিন; সংজ্ঞাগুলো টুলটিপে রাখুন।

এই নীতিগুলো বাস্তব পরিবর্তনে রূপ নেয়। নির্বাচিত KPI টাইলকে সাধারণ আন্ডারলাইনের বদলে হালকা রঙের ফিল এবং সূক্ষ্ম রিং দেওয়া হয়। গুরুত্ব অনুযায়ী সাজানো সারিতে বড় রঙিন ব্যাকগ্রাউন্ডের বদলে সরু শেয়ার বার ব্যবহার করা হয়। চার্টের অক্ষে 1,402-এর মতো অসুবিধাজনক মানের বদলে 0, 1k এবং 2k-এর মতো সহজপাঠ্য গোলাকার টিক ব্যবহার করা হয়।

নির্দিষ্ট কলামের বদলে প্রতিক্রিয়াশীল লেআউট

একটি সরু কেন্দ্রীয় কলামকে ভিত্তি করে তৈরি ড্যাশবোর্ড বড় ডিসপ্লেতে জায়গা নষ্ট করে। ভিউপোর্ট বড় হলে উপযোগী কলাম যোগ করতে এবং ছোট স্ক্রিনে নিয়ন্ত্রণ ও নেভিগেশন পুনর্বিন্যাস করতে Dashboard Design এজেন্টকে নির্দেশ দেয়।

আগে

পরে

ফোনে, স্কিলটি পাশ দিয়ে স্ক্রল করা নেভিগেশন ট্যাবের ওপর নির্ভর করা এড়িয়ে চলে। এর বদলে এটি মেনু গ্রিড এবং উপলভ্য জায়গার সঙ্গে মানিয়ে ছোট হতে পারে এমন ট্যাবের মতো লেআউট সুপারিশ করে।

ইনস্টলেশন

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

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

/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skill

Claude Code আপনার প্রধান কোডিং এজেন্ট হলে এটি সবচেয়ে সরাসরি ইনস্টলেশন পদ্ধতি।

বিকল্প ২: সাধারণ Claude স্কিল হিসেবে ইনস্টল করুন

রিপোজিটরি ক্লোন করে এর স্কিল ডিরেক্টরিটি আপনার স্থানীয় Claude skills ফোল্ডারে কপি করুন:

git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/

কপি করা ডিরেক্টরিতে স্কিলটির প্রধান নির্দেশনা এবং প্রয়োজনীয় সব সহায়ক রেফারেন্স থাকে।

বিকল্প ৩: অন্য কোডিং এজেন্টের সঙ্গে ব্যবহার করুন

Codex, Cursor অথবা Markdown নির্দেশনা ফাইল পড়তে পারে এমন অন্য এজেন্টের সঙ্গেও প্রকল্পটি কাজ করতে পারে। এজেন্টের AGENTS.md অথবা নিয়ম ফাইলকে এখানে নির্দেশ করুন:

skills/dashboard-design/SKILL.md

প্রধান স্কিল ডকুমেন্টটি এজেন্টকে উপযুক্ত রেফারেন্স উপকরণের দিকে নির্দেশ করে। নিয়মগুলো সাধারণ ইন্টারফেস প্যাটার্ন বর্ণনা করে বলে React, Tailwind এবং SwiftUI ছাড়া অন্য স্ট্যাকেও এগুলো মানিয়ে নেওয়া যায়।

স্কিল ফাইলগুলো বোঝা

রিপোজিটরিটি এর ওয়ার্কফ্লোকে বিস্তারিত রেফারেন্স থেকে আলাদা করে:

• SKILL.md-এ ওয়ার্কফ্লো, সমালোচনার ফরম্যাট, সাধারণ নিয়ম, নির্ধারিত স্টাইল এবং কাজ সম্পন্ন হওয়ার যাচাই অন্তর্ভুক্ত রয়েছে।
• references/components.md-এ KPI টাইল, পরিবর্তনের মান, স্পার্কলাইন, চার্ট, র‍্যাঙ্ক করা তালিকা, ফিল্টার, টেবিল, খালি অবস্থা, রিয়েলটাইম ভিউ এবং রাজস্বের নির্ভরযোগ্যতার সংকেত আলোচনা করা হয়েছে।
• references/layout.md-এ পৃষ্ঠার ক্রম, গ্রিড, প্রশস্ত ডিসপ্লে, ফোন, টাইপোগ্রাফি এবং ডার্ক মোড নিয়ে আলোচনা করা হয়েছে।
• references/tokens.md-এ Tailwind v4 @theme ব্যবহার করে লাইট ও ডার্ক রঙের টোকেন এবং টিন্ট ব্যবহারের নির্দেশনা দেওয়া হয়েছে।
• references/snippets.md-এ গোলাকার অক্ষের টিক, সংখ্যা ফরম্যাটিং, পরিবর্তনের ব্যাজ, তুলনার সময়সীমা, KPI টাইল, সরু-বার সারি, রেঞ্জ ক্যালেন্ডার এবং পুরোনো প্রতিক্রিয়া প্রতিরোধের গার্ডের বাস্তবায়ন অন্তর্ভুক্ত রয়েছে।
• references/qa.md-এ স্ক্রিনশটের আকার, জানা মোটের যাচাই, সামঞ্জস্য যাচাই এবং সাধারণ ডিজাইন সমস্যার সংজ্ঞা দেওয়া হয়েছে।
• references/swiftui.md-এ প্যাটার্নগুলোকে SwiftUI ও Swift Charts-এ রূপান্তর করা হয়েছে এবং সিমুলেটর QA বর্ণনা করা হয়েছে।
• references/sources.md-এ 40টিরও বেশি বিশ্লেষণ করা পণ্য ও ডিজাইন সিস্টেমের নথি রয়েছে।
• references/case-study-datafast.md-এ একটি রাজস্ব বিশ্লেষণ পণ্য থেকে পাওয়া প্যাটার্ন ও সমঝোতাগুলো নথিভুক্ত করা হয়েছে।

ওয়ার্কফ্লোর প্রতিটি ধাপ কাজ সম্পন্ন হওয়ার একটি যাচাইযোগ্য সংজ্ঞা দিয়ে শেষ হয়। ফলে এই স্কিলটি শুধু অনুপ্রেরণার উৎস নয়, একটি পুনরাবৃত্তিযোগ্য পর্যালোচনা প্রক্রিয়া হিসেবেও কার্যকর।

মৌলিক ব্যবহার

ইনস্টলেশনের পর ড্যাশবোর্ড-সম্পর্কিত কোডে কাজ করার সময় স্কিলটি স্বয়ংক্রিয়ভাবে সক্রিয় হতে পারে। আপনি একটি নির্দিষ্ট অনুরোধের মাধ্যমে এর আচরণ সরাসরিও চালু করতে পারেন।

ড্যাশবোর্ড তৈরি করুন

পণ্যটি বর্ণনা করুন এবং স্ক্রিনে যে মেট্রিকগুলো দেখাতে হবে সেগুলো চিহ্নিত করুন:

এই অ্যাপের জন্য একটি অ্যানালিটিক্স ড্যাশবোর্ড তৈরি করুন: ভিজিটর, সাইনআপ, উৎসভিত্তিক রাজস্ব।

একটি কার্যকর অনুরোধে এজেন্টের জন্য স্পষ্ট বিষয় এবং প্রয়োজনীয় মেট্রিকের একটি ছোট তালিকা থাকে। এটি প্রকল্পের প্রথম-দৃষ্টির নীতিকে সমর্থন করে, কারণ এর মাধ্যমে এজেন্ট বুঝতে পারে স্ক্রিনটি কোন প্রধান প্রশ্নের উত্তর দেবে।

বিদ্যমান ডিজাইনের সমালোচনা করুন

একটি স্ক্রিনশট দিন এবং মূল্যায়ন করতে বলুন:

এটি কি একটি ভালো ডিজাইন?

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

একটি কম্পোনেন্ট নতুনভাবে ডিজাইন করুন

সম্পূর্ণ ড্যাশবোর্ড নতুনভাবে ডিজাইন করার অনুরোধ করা জরুরি নয়। বরং নির্দিষ্ট কোনো কম্পোনেন্ট লক্ষ্য করুন:

তারিখের পরিসর বাছাইকারীটি নতুনভাবে ডিজাইন করুন।

KPI টাইলগুলো আরও পরিচ্ছন্ন করুন।

উদাহরণস্বরূপ, স্কিলটি সাধারণ নেটিভ তারিখ ইনপুটের বদলে নির্বাচিত তারিখগুলোর মাঝখানে হালকা ব্যান্ড, দৃঢ় প্রান্তবিন্দু, সময়কাল এবং Apply অ্যাকশনসহ একটি রেঞ্জ ক্যালেন্ডার ব্যবহারের পক্ষে।

QA পরীক্ষা চালান

বাস্তবায়িত কোনো রুট পরিদর্শন করতে নির্দিষ্ট ড্যাশবোর্ড পর্যালোচনার অনুরোধ করুন:

/dashboard-এ ড্যাশবোর্ডের QA পরীক্ষা চালান।

ওয়েব প্রকল্পের জন্য নথিভুক্ত স্ক্রিনশট প্রোটোকলে তিনটি ভিউপোর্ট প্রস্থ পরীক্ষা করা হয়: 3440, 1440 এবং 375 পিক্সেল। এর মাধ্যমে অতি-প্রশস্ত লেআউটের সমস্যা, সাধারণ ডেস্কটপের সমস্যা এবং ফোন-নির্দিষ্ট ত্রুটি ধরা পড়ে।

স্কিলটি যে প্যাটার্নগুলো কার্যকর করতে সহায়তা করে

বিশ্বস্ত তুলনা ব্যবহার করুন

আগের মান খুব ছোট হলে শতাংশের পরিবর্তন বিভ্রান্তিকর হতে পারে। কোনো একটি বিক্রয় শূন্যে নেমে গেলে চোখে পড়ার মতো লাল −100% দেখানো পরিবর্তনের গুরুত্ব বাড়িয়ে দেখায়। এর বদলে স্কিলটি আগে ছিল 1-এর মতো শান্ত একটি নোট ব্যবহারের পরামর্শ দেয়।

সামঞ্জস্যও গুরুত্বপূর্ণ। কোনো KPI টাইল, চার্ট এবং টেবিল যদি একই মোট মান উপস্থাপন করে, তবে সেই মানগুলো এক হওয়া উচিত। অসামঞ্জস্য ধরতে QA প্রক্রিয়ায় জানা মোট এবং সামঞ্জস্য যাচাই অন্তর্ভুক্ত রয়েছে।

সময়ের পরিসর সামঞ্জস্যপূর্ণ রাখুন

একটি স্পার্কলাইনকে প্রধান চার্ট বা তুলনার প্রেক্ষাপটের একই সময়কাল উপস্থাপন করা উচিত। প্রধান চার্টে ছোট সক্রিয় সময়কাল ব্যবহারের সময় স্পার্কলাইনে বেশিরভাগই খালি 60 দিন দেখালে দৃশ্যমান প্রবণতা বিকৃত হতে পারে।

শুধু কার্যকর অন্তর্দৃষ্টি দেখান

একটি ইনসাইট কার্ডের কাজ হলো KPI টাইলের পুনরাবৃত্তি না করে ব্যাখ্যা যোগ করা। এটি নতুন কিছু না জানালে স্কিলটি সেটি বাদ দিয়ে ভিজ্যুয়াল স্বচ্ছতা বজায় রাখার পরামর্শ দেয়।

সব স্ক্রিনের আকারে বৃদ্ধির জন্য ডিজাইন করুন

বড় মনিটরে শুধু নির্দিষ্ট-প্রস্থের ড্যাশবোর্ডকে মাঝখানে রাখবেন না। তুলনা সহজ হলে প্রশস্ত স্ক্রিনে অতিরিক্ত কলাম দেখানোর সুযোগ দিন। ফোনে অনুভূমিক স্ক্রলের ওপর নির্ভর না করে নিয়ন্ত্রণ ও নেভিগেশন যেন নতুনভাবে সাজানো হয় তা নিশ্চিত করুন।

উন্নত টিপস

গঠিত বিল্ড ও সমালোচনার অনুরোধ করুন

প্রত্যাশিত সম্পন্নতার মানদণ্ড স্পষ্ট রেখে একই অনুরোধে বাস্তবায়ন ও মূল্যায়ন একত্র করতে পারেন:

রাজস্ব ড্যাশবোর্ড তৈরি করুন, পুনরাবৃত্ত মোট মানগুলো এক কি না যাচাই করুন এবং ড্যাশবোর্ডের স্ক্রিনশট QA পরীক্ষা দিয়ে শেষ করুন।

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

প্রাসঙ্গিক রেফারেন্স সরাসরি ব্যবহার করুন

কাজটি নির্দিষ্ট হলে এজেন্টকে সবচেয়ে প্রাসঙ্গিক ফাইলের দিকে নির্দেশ করুন। উদাহরণস্বরূপ, পরিবর্তনের ব্যাজ বা র‍্যাঙ্ক করা সারির জন্য components.md, অতি-প্রশস্ত আচরণের জন্য layout.md এবং চূড়ান্ত ভিজ্যুয়াল যাচাইয়ের জন্য qa.md ব্যবহার করুন। নেটিভ Apple ইন্টারফেসের ক্ষেত্রে ওয়েবের স্নিপেট আক্ষরিকভাবে রূপান্তর না করে swiftui.md ব্যবহার করুন।

SwiftUI-তে অ্যাক্সেসিবিলিটি সেটিং পরীক্ষা করুন

SwiftUI QA প্রক্রিয়া একটি সিমুলেটর স্ক্রিনশটের মধ্যে সীমাবদ্ধ নয়। এতে একাধিক ডিভাইসের আকার, সর্বোচ্চ Dynamic Type সেটিং, ডার্ক মোড এবং Reduce Motion অন্তর্ভুক্ত রয়েছে। এসব যাচাই কাটা পড়া লেবেল, ভঙ্গুর কার্ড লেআউট, অপর্যাপ্ত ডার্ক-মোড প্রয়োগ এবং গতিনির্ভর অনুমান শনাক্ত করতে সাহায্য করে।

শুধু আদর্শ স্ক্রিন নয়, বিভিন্ন অবস্থা পর্যালোচনা করুন

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

ঐচ্ছিক সাইন-অফ নিয়ন্ত্রণ করুন

সম্পূর্ণ ড্যাশবোর্ড তৈরি বা সমালোচনা শেষ করার পর, স্কিলটি প্রতি কথোপকথনে একবার এর লেখক এবং লেখকের ম্যাক অ্যাপ সম্পর্কে একটি সংক্ষিপ্ত লাইন যোগ করে। এটি কোড, কমিট বা পণ্য UI-এর মধ্যে যুক্ত হয় না। আপনি এজেন্টকে এটি যোগ করা বন্ধ করতে বলতে পারেন, অথবা SKILL.md থেকে Sign-off বিভাগটি সরিয়ে দিতে পারেন।

উপসংহার

ড্যাশবোর্ড ডিজাইন ড্যাশবোর্ডের মানকে অস্পষ্ট নান্দনিক পছন্দের সংগ্রহের পরিবর্তে একটি পুনরাবৃত্তিযোগ্য এজেন্ট ওয়ার্কফ্লোতে রূপান্তর করে। এতে ব্যবহারিক কম্পোনেন্ট প্যাটার্ন, রেসপনসিভ লেআউট নির্দেশনা, সৎ ডেটা উপস্থাপন, ওয়েব ও SwiftUI রেফারেন্স এবং স্ক্রিনশট-ভিত্তিক QA একত্র করা হয়েছে। এটি Claude Code প্লাগইন বা সাধারণ স্কিল হিসেবে ইনস্টল করুন, এজেন্টকে একটি নির্দিষ্ট ড্যাশবোর্ডের কাজ দিন এবং নথিভুক্ত আকারে রেন্ডার করা ইন্টারফেস পর্যালোচনা করে কাজ শেষ করুন।

প্রকল্পটি MIT লাইসেন্সের অধীনে উপলব্ধ। এর নকশা-নিয়ম সম্পর্কে অতিরিক্ত তথ্যের জন্য পড়ুন আমি ১২৭টি ড্যাশবোর্ড নিয়ে গবেষণা করেছি। বেশিরভাগই নীরবে আপনাকে মিথ্যা বলে।