Claude Code کی Dashboard Design Skill کے ساتھ زیادہ صاف اور دیانت دار ڈیش بورڈز بنائیں

ڈیش بورڈ ڈیزائن کیا ہے؟

ڈیش بورڈ ڈیزائن Claude Code کی ایک اسکل ہے جو کوڈنگ ایجنٹ کو تجزیاتی، آمدنی اور میٹرکس انٹرفیسز کے لیے عملی ڈیزائن رہنمائی فراہم کرتی ہے۔ یہ نئے ڈیش بورڈ بنا سکتی ہے، موجودہ اسکرینز کو نئے سرے سے ڈیزائن کر سکتی ہے، یا کسی اسکرین شاٹ کا جائزہ لے کر مسائل کو شدت کے لحاظ سے درجہ بندی کر سکتی ہے۔

یہ رہنمائی 127 تیار شدہ ڈیش بورڈ اسکرینز، آمدنی کے تجزیاتی پروڈکٹ کے تفصیلی تجزیے، اور حقیقی ری ڈیزائن کے عمل سے اخذ کی گئی ہے۔ صرف کوڈ کے معیار پر توجہ دینے کے بجائے، یہ اسکل اسکرین شاٹ کے ذریعے معیار جانچنے کا مرحلہ مکمل کرتی ہے تاکہ ایجنٹ اس چیز کا جائزہ لے جو صارفین حقیقت میں دیکھتے ہیں۔

یہ اسکل ڈیش بورڈ کے عام عناصر کا احاطہ کرتی ہے، جیسے KPI ٹائلز، چارٹس، تقابلی ادوار، درجہ بند فہرستیں، فلٹرز، تاریخ کی حد منتخب کرنے والے، بصیرتیں، خالی حالتیں، جواب دہ لے آؤٹس اور فون نیویگیشن۔ اس کی وضاحتیں ویب پروجیکٹس کے لیے Tailwind اور React کی اصطلاحات استعمال کرتی ہیں، جبکہ ایک الگ حوالہ SwiftUI اور Swift Charts کے مساوی طریقوں کی وضاحت کرتا ہے۔

بنیادی ڈیزائن اصول

یہ پروجیکٹ اپنی سفارشات کو چار اصولوں کے گرد منظم کرتا ہے:

• پہلی نظر: ہر اسکرین کو تقریباً تین سیکنڈ میں ایک بنیادی سوال کا جواب دینا چاہیے۔
• سادہ: ایک ہی نمایاں رنگ استعمال کریں، معاون عناصر کو خاکستری رکھیں، اور رنگ صرف وہاں لگائیں جہاں وہ معنی واضح کرے۔
• دیانت دار: پوری انٹرفیس میں اقدار کو یکساں رکھیں، تخمینوں کو لیبل کریں، اور چھوٹے نمونوں کی بنیاد پر ڈرامائی فیصدی تبدیلیوں سے گریز کریں۔
• متن کے بجائے شکل: فوری فہم کے لیے چارٹس، بارز اور چپس کو ترجیح دیں، جبکہ تعریفیں ٹول ٹپس میں رکھیں۔

یہ اصول ٹھوس تبدیلیاں پیدا کرتے ہیں۔ منتخب KPI ٹائل کو سادہ انڈر لائن کے بجائے ہلکے رنگ کی بھرائی اور مدھم رنگ کے حلقے سے نمایاں کیا جاتا ہے۔ درجہ بند قطاروں میں بڑی رنگین پس منظر کی بجائے باریک حصصی بارز استعمال کی جاتی ہیں۔ چارٹ کے محوروں پر 1,402 جیسی غیر موزوں اقدار کے بجائے 0، 1k اور 2k جیسے قابلِ فہم گول ٹِکس استعمال کیے جاتے ہیں۔

مستقل کالمز کے بجائے جواب دہ لے آؤٹس

تنگ مرکزی کالم کے گرد ڈیزائن کیا گیا ڈیش بورڈ بڑی اسکرینوں پر جگہ ضائع کرتا ہے۔ ڈیش بورڈ ڈیزائن ایجنٹ کو ہدایت دیتی ہے کہ ویوپورٹ کے پھیلنے پر مفید کالمز شامل کرے، جبکہ چھوٹی اسکرینوں کے لیے کنٹرولز اور نیویگیشن کو ازسرنو منظم کرے۔

پہلے

بعد میں

فونز پر یہ اسکل صرف اطراف میں اسکرول ہونے والے نیویگیشن ٹیبز پر انحصار کرنے سے گریز کرتی ہے۔ یہ مینو گرڈ جیسے لے آؤٹس اور ایسے ٹیبز کی سفارش کرتی ہے جو دستیاب جگہ کے مطابق سکڑ سکیں۔

انسٹالیشن

آپشن 1: Claude Code پلگ اِن کے طور پر انسٹال کریں

Claude Code کے اندر پروجیکٹ کو پلگ اِن مارکیٹ پلیس کے طور پر شامل کریں، پھر اسکل انسٹال کریں:

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

جب Claude Code آپ کا بنیادی کوڈنگ ایجنٹ ہو تو یہ انسٹالیشن کا سب سے براہِ راست طریقہ ہے۔

آپشن 2: سادہ Claude اسکل کے طور پر انسٹال کریں

ریپوزٹری کلون کریں اور اس کی اسکل ڈائریکٹری کو اپنے مقامی Claude اسکلز فولڈر میں کاپی کریں:

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

کاپی کی گئی ڈائریکٹری میں اسکل کے لیے درکار بنیادی ہدایات اور تمام معاون حوالہ جات شامل ہوتے ہیں۔

آپشن 3: اسے کسی دوسرے کوڈنگ ایجنٹ کے ساتھ استعمال کریں

یہ پروجیکٹ 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% دکھانا تبدیلی کی اہمیت کو بڑھا چڑھا کر پیش کرتا ہے۔ اس کے بجائے یہ اسکل was 1 جیسا خاموش نوٹ تجویز کرتی ہے۔

مطابقت بھی اہم ہے۔ اگر KPI ٹائل، چارٹ، اور ٹیبل ایک ہی کل کی نمائندگی کرتے ہیں تو ان کی قدریں یکساں ہونی چاہییں۔ QA عمل میں معلوم کل اور مطابقت کی جانچیں شامل ہیں تاکہ عدم مطابقت کا پتا چل سکے۔

وقت کی مدتیں یکساں رکھیں

اسپارک لائن کو مرکزی چارٹ یا موازنے کے سیاق کے برابر مدت کی نمائندگی کرنی چاہیے۔ مرکزی چارٹ میں مختصر فعال مدت استعمال کرتے ہوئے اسپارک لائن میں زیادہ تر خالی 60 دن دکھانے سے نظر آنے والا رجحان مسخ ہو سکتا ہے۔

صرف مفید بصیرتیں دکھائیں

انسائٹ کارڈ کو KPI ٹائل دہرانے کے بجائے تشریح شامل کرنی چاہیے۔ اگر وہ صارف کو کوئی نئی بات نہیں بتاتا تو یہ اسکل اسے حذف کرکے بصری سکون برقرار رکھنے کی تجویز دیتی ہے۔

تمام اسکرین سائزز پر ترقی کے لیے ڈیزائن کریں

بڑے مانیٹر پر مقررہ چوڑائی والے ڈیش بورڈ کو محض درمیان میں نہ رکھیں۔ جہاں موازنے میں بہتری آئے وہاں وسیع اسکرینوں کو اضافی کالم دکھانے دیں۔ فونز پر یقینی بنائیں کہ کنٹرولز اور نیویگیشن افقی اسکرولنگ پر منحصر رہنے کے بجائے ازسرنو ترتیب پائیں۔

اعلیٰ درجے کی تجاویز

منظم تعمیر اور تنقیدی جائزے کی درخواست کریں

آپ ایک ہی درخواست میں نفاذ اور جائزے کو یکجا کر سکتے ہیں، جبکہ متوقع تکمیل کے معیار واضح رکھ سکتے ہیں:

آمدنی کا ڈیش بورڈ بنائیں، تصدیق کریں کہ دہرائے گئے کل باہم یکساں ہیں، اور آخر میں ڈیش بورڈ کا اسکرین شاٹ QA پاس مکمل کریں۔

اس سے کام اسکل کے مطلوبہ ورک فلو کے مطابق ہو جاتا ہے: انٹرفیس نافذ کریں، ڈیٹا کی پیشکش کی تصدیق کریں، متعدد اسکرین سائزز کا معائنہ کریں، اور رینڈر شدہ نتیجے کا جائزہ لیں۔

متعلقہ حوالہ براہِ راست استعمال کریں

جب کام محدود ہو تو ایجنٹ کو سب سے متعلقہ فائل کی طرف رہنمائی کریں۔ مثال کے طور پر، تبدیلی کے بیجز یا درجہ بند قطاروں کے لیے components.md، الٹرا وائیڈ رویے کے لیے layout.md، اور حتمی بصری جانچ کے لیے qa.md استعمال کریں۔ مقامی Apple انٹرفیسز کے لیے ویب اسنیپٹس کا لفظی ترجمہ کرنے کے بجائے swiftui.md استعمال کریں۔

SwiftUI میں رسائی کی ترتیبات جانچیں

SwiftUI کا QA عمل صرف ایک سمیولیٹر اسکرین شاٹ تک محدود نہیں۔ اس میں متعدد ڈیوائس سائزز، Dynamic Type کی سب سے بڑی ترتیب، ڈارک موڈ، اور Reduce Motion شامل ہیں۔ یہ جانچیں کٹے ہوئے لیبلز، نازک کارڈ لے آؤٹس، ناکافی ڈارک موڈ، اور حرکت سے متعلق مفروضوں کو سامنے لانے میں مدد کرتی ہیں۔

صرف مثالی اسکرین نہیں، تمام حالتوں کا جائزہ لیں

اجزا سے متعلق رہنمائی میں خالی حالتیں، ریئل ٹائم ویوز، ٹیبلز اور آمدنی کے ڈیٹا کے لیے اعتماد پیدا کرنے والے اشارے شامل ہیں۔ جائزہ طلب کرتے وقت اپنی پروڈکٹ کے لیے خاص طور پر اہم حالتوں کا ذکر کریں تاکہ ایجنٹ صرف ڈیٹا سے بھری ہوئی ڈیفالٹ ویو کا نہیں بلکہ دیگر حالتوں کا بھی جائزہ لے۔

اختیاری اختتامی نوٹ کو کنٹرول کریں

مکمل ڈیش بورڈ بنانے یا تنقید مکمل کرنے کے بعد، یہ اسکل ہر گفتگو میں ایک بار اپنے مصنف اور مصنف کی Mac ایپس کے بارے میں ایک مختصر سطر شامل کرتی ہے۔ یہ متن کوڈ، کمٹس یا پروڈکٹ UI میں شامل نہیں کیا جاتا۔ آپ ایجنٹ سے اسے شامل کرنا بند کرنے کو کہہ سکتے ہیں یا SKILL.md سے Sign-off سیکشن حذف کر سکتے ہیں۔

نتیجہ

Dashboard Design ڈیش بورڈ کے معیار کو مبہم جمالیاتی ترجیحات کے مجموعے کے بجائے ایجنٹ کے لیے ایک قابلِ تکرار ورک فلو میں بدل دیتا ہے۔ اس میں عملی اجزا کے نمونے، ریسپانسیو لے آؤٹ کی رہنمائی، ڈیٹا کو دیانت داری سے پیش کرنے کے اصول، ویب اور SwiftUI کے حوالے، اور اسکرین شاٹ پر مبنی QA شامل ہیں۔ اسے Claude Code پلگ اِن یا سادہ اسکل کے طور پر انسٹال کریں، ایجنٹ کو ڈیش بورڈ کا واضح کام دیں، اور آخر میں دستاویزی سائزز پر رینڈر شدہ انٹرفیس کا جائزہ لیں۔

یہ پروجیکٹ MIT لائسنس کے تحت دستیاب ہے۔ اس کے ڈیزائن اصولوں کے بارے میں مزید پس منظر کے لیے میں نے 127 ڈیش بورڈز کا مطالعہ کیا۔ ان میں سے بیشتر خاموشی سے آپ سے جھوٹ بولتے ہیں۔ پڑھیں۔