ایک جملے پر مشتمل ٹیک اسٹیک کو آرکیٹیکچر ڈایاگرام میں تبدیل کریں

stack-diagram کیا ہے؟

stack-diagram ایک AI ایجنٹ اسکل ہے جو ٹیکنالوجی اسٹیک کی سادہ انگریزی وضاحت کو آرکیٹیکچر ڈایاگرام میں تبدیل کرتی ہے۔ آئیکنز کی پوزیشن مقرر کرنے اور کنکشنز دستی طور پر بنانے کے بجائے، آپ سروسز، تعلقات، پروٹوکولز اور تعیناتی کے بہاؤ کو ایک جملے یا مختصر پیراگراف میں بیان کرتے ہیں۔

مثال کے طور پر، درج ذیل پرامپٹ ایک ویب ایپلیکیشن، اس کی API، ڈیٹا سروسز اور تعیناتی پائپ لائن کی وضاحت کرتا ہے:

ہمارے اسٹیک کا ڈایاگرام بنائیں: Vercel پر Next.js اور Hono API۔ Neon پر Postgres، Clerk کے ذریعے تصدیق، Stripe کے ذریعے ادائیگیاں۔ GitHub Actions تعیناتی کرتا ہے۔

یہ اسکل Claude Code، Codex، Cursor اور دیگر ایسے ایجنٹس کے ساتھ کام کرتی ہے جو Agent Skills فارمیٹ کو سپورٹ کرتے ہیں۔

اہم خصوصیات

• سادہ زبان میں ان پٹ: ڈایاگرام کا نحو لکھے بغیر آرکیٹیکچر بیان کریں۔
• آفیشل لوگوز: لوگوز SVGL، Devicon، gilbarbara/logos، آفیشل برانڈ ریپوزٹریز اور AWS Architecture Icons پیکیج جیسے ذرائع سے حاصل کیے جاتے ہیں۔
• محتاط کنیکٹر روٹنگ: لائنوں کو لیبلز کے گرد سے گزارا جاتا ہے تاکہ تیر متن کے اوپر سے نہ گزریں۔
• روشن اور تاریک تھیمز: ہر ڈایاگرام دونوں تھیمز میں رینڈر کیا جاتا ہے۔ لوگو ٹائلز سفید رہتی ہیں تاکہ برانڈ کے اصل رنگ برقرار رہیں۔
• متعدد آؤٹ پٹ فارمیٹس: خودکفیل HTML فائل، PNG تصویر، انحصار سے پاک React component یا قابلِ اشتراک Artifact تیار کریں۔
• قابلِ نقل HTML: فونٹس اور لوگوز ان لائن کیے جاتے ہیں، جس سے تیار کردہ HTML فائل نیٹ ورک کے بغیر بھی رینڈر ہو سکتی ہے۔

تقاضے

اسکل استعمال کرنے سے پہلے یقینی بنائیں کہ آپ کا ماحول یہ سہولیات فراہم کرتا ہے:

• Python 3.9 یا اس کے بعد کا ورژن۔
• لوگوز حاصل کیے جانے کے دوران نیٹ ورک تک رسائی۔
• ڈایاگرامز کو PNG فائلوں کے طور پر ایکسپورٹ کرنے کے لیے Chromium کے ساتھ Playwright۔
• ایسا AI coding agent یا ایپلیکیشن جو اسکلز کو سپورٹ کرتی ہو۔

اگرچہ مکمل HTML آؤٹ پٹ آف لائن کام کرتا ہے، لیکن تیاری کے دوران نیٹ ورک تک رسائی ضروری ہے کیونکہ لوگوز اسکل کے ساتھ بنڈل ہونے کے بجائے build time پر ڈاؤن لوڈ کیے جاتے ہیں۔

stack-diagram انسٹال کریں

معاون coding agent میں انسٹال کریں

اپنے ٹرمینل سے درج ذیل کمانڈ چلائیں:

npx skills add caru-ini/stack-diagram

یہ اسکل ایسے ایجنٹس کے لیے انسٹال ہوتی ہے جو skills ecosystem کو سپورٹ کرتے ہیں، جن میں Claude Code، Codex اور Cursor شامل ہیں۔

Claude app میں انسٹال کریں

ایسی Claude app کے لیے جو اپ لوڈ کی گئی اسکلز قبول کرتی ہو، تازہ ترین ریلیز کھولیں، stack-diagram.zip ڈاؤن لوڈ کریں اور اس ZIP فائل کو بطور اسکل اپ لوڈ کریں۔

اپنا پہلا آرکیٹیکچر ڈایاگرام بنائیں

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

ہمارے اسٹیک کا ڈایاگرام بنائیں: Vercel پر Next.js اور Hono API۔
Neon پر Postgres، Clerk کے ذریعے تصدیق، Stripe کے ذریعے ادائیگیاں۔
GitHub Actions تعیناتی کرتا ہے۔

یہ وضاحت ایجنٹ کو فرنٹ اینڈ، API، ڈیٹا بیس، تصدیقی فراہم کنندہ، ادائیگی کے فراہم کنندہ اور تعیناتی کے ورک فلو کی نمائندگی کے لیے کافی معلومات دیتی ہے۔

تعلقات واضح کریں

زیادہ درست نتائج کے لیے، جہاں ضروری ہو وہاں پروٹوکولز یا تعامل کی اقسام شامل کریں۔ آپ بتا سکتے ہیں کہ براؤزر HTTPS کے ذریعے ایپلیکیشن تک پہنچتا ہے، API SQL کے ذریعے ڈیٹا بیس سے سوال کرتی ہے، یا ایک سروس RPC کال کرتی ہے۔

ایک صارف کو HTTPS کے ذریعے Vercel پر موجود Next.js تک پہنچتے ہوئے دکھائیں۔
Next.js، Hono API کو RPC کے ذریعے کال کرتا ہے۔
API، SQL کے ذریعے Neon سے سوال کرتی ہے اور سیشنز کے لیے Clerk استعمال کرتی ہے۔
GitHub Actions ایپلیکیشن کو تعینات کرتا ہے۔

پروجیکٹ نتیجہ رینڈر کرتا ہے اور واپس کرنے سے پہلے ڈایاگرام کو چیک کرتا ہے، جس سے کنیکٹرز کو لیبلز کے درمیان سے گزرنے سے روکنے میں مدد ملتی ہے۔

ڈایاگرام ڈیولپمنٹ ٹولنگ

stack-diagram صرف کلاؤڈ انفراسٹرکچر تک محدود نہیں ہے۔ یہ monorepos، مقامی ٹولنگ، ٹیسٹ رنرز، commit hooks، continuous integration اور package publishing کو بھی بصری شکل دے سکتی ہے۔

ہماری monorepo ٹولنگ کا ڈایاگرام بنائیں: Turborepo، Biome، Vitest اور Lefthook کے ساتھ pnpm workspace۔ GitHub Actions CI چلاتا ہے اور npm پر شائع کرتا ہے۔

اس قسم کا پرامپٹ workspace کی حدود، اس کے اندر کام کرنے والے ٹولز اور CI و publishing کے لیے ذمہ دار بیرونی آٹومیشن کی نشاندہی کرتا ہے۔

AI ایپلیکیشن کا ڈایاگرام بنائیں

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

ہمارے docs chatbot کا ڈایاگرام بنائیں: Vercel پر Next.js، Supabase pgvector میں تلاش کرتا ہے اور Claude کے ذریعے جواب دیتا ہے۔ Inngest ہر رات Notion کو sync کرتا ہے۔

یہاں پرامپٹ صارف کے سامنے ہونے والے سوال و جواب کے بہاؤ کو رات کے وقت ہونے والے synchronization process سے الگ کرتا ہے۔

AWS انفراسٹرکچر کا ڈایاگرام بنائیں

AWS آرکیٹیکچرز کے لیے سروسز اور نیٹ ورک کی حدود براہِ راست بیان کریں۔ stack-diagram، AWS کے آفیشل architecture icons استعمال کرتی ہے۔

AWS پر ہماری ایپ کا ڈایاگرام بنائیں: عوامی subnet میں S3 اور ALB کے سامنے CloudFront۔ نجی subnet میں Fargate، RDS اور ElastiCache موجود ہیں۔

یہ وضاحت routing layer، static storage، load balancer اور عوامی و نجی subnets کے درمیان تقسیم کو واضح کرتی ہے۔

آؤٹ پٹ فارمیٹ منتخب کریں

پہلے سے طے شدہ نتیجہ ایک خود کفیل HTML فائل ہوتا ہے۔ آپ اپنی ہدایت میں براہِ راست کسی دوسرے معاون فارمیٹ کی درخواست بھی کر سکتے ہیں:

• HTML: ریپوزٹریز، اندرونی دستاویزات اور وکیز کے لیے بہترین۔ فونٹس اور لوگو ایک ہی فائل میں شامل ہوتے ہیں۔
• PNG: پریزنٹیشنز اور دستاویزات کے لیے مفید۔ PNG ایکسپورٹ کے لیے Chromium کے ساتھ Playwright درکار ہے۔
• React component: React پروجیکٹ میں انضمام کے لیے موزوں، کسی اضافی انحصار سے پاک component۔
• Artifact: Claude کے ذریعے شائع کرنے اور شیئر کرنے کے لیے موزوں۔

اس اسٹیک کا خاکہ ایک خود کفیل HTML فائل کے طور پر بنائیں:
Vercel پر Next.js، Hono API کو کال کرتا ہے، جو ڈیٹا Neon میں محفوظ کرتی ہے۔

PNG فائلیں اور React component اسی بنیادی HTML فائل سے تیار کیے جاتے ہیں، جس سے آؤٹ پٹ فارمیٹس میں یکسانیت برقرار رکھنے میں مدد ملتی ہے۔

روشن اور تاریک تھیمز استعمال کریں

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

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

اعلیٰ درجے کی پرامپٹنگ کے نکات

ٹریفک کی سمت بیان کریں

مصنوعات کی فہرست بتاتی ہے کہ اسٹیک میں کیا شامل ہے، لیکن سمت ظاہر کرنے والی زبان یہ سمجھاتی ہے کہ یہ کیسے کام کرتا ہے۔ کال کرتا ہے، استفسار کرتا ہے، فراہم کرتا ہے، شائع کرتا ہے، تعینات کرتا ہے اور ہم وقت کرتا ہے جیسے افعال استعمال کریں۔

حدود اور مقامات کے نام بتائیں

واضح کریں کہ آیا components ایک ہی deployment کا حصہ ہیں، کسی workspace سے تعلق رکھتے ہیں، یا public اور private subnets میں موجود ہیں۔ یہ تفصیلات خاکے کو متعلقہ components کو درست طور پر گروپ کرنے میں مدد دیتی ہیں۔

شیڈولز اور آٹومیشن شامل کریں

اگر کوئی عمل ہر رات، ہر commit پر، یا deployment کے دوران چلتا ہے تو یہ معلومات شامل کریں۔ اس سے background workflows کو مرکزی request path سے الگ سمجھنے میں مدد ملتی ہے۔

مطلوبہ deliverable کی درخواست کریں

جب پہلے سے طے شدہ HTML فارمیٹ آپ کی ضرورت نہ ہو تو HTML، PNG، React یا Artifact آؤٹ پٹ واضح طور پر بتائیں۔ شیئر کرنے کے قابل، آف لائن دوستانہ نتیجے کے لیے خود کفیل HTML فائل کی درخواست کریں۔

برانڈ assets میں تبدیلی نہ کریں

یہ پروجیکٹ لوگو کے رنگ تبدیل یا انہیں دوبارہ نہیں بناتا۔ برانڈ کے نام اور لوگو اپنے متعلقہ مالکان کے trademarks رہتے ہیں، اور کسی خاکے میں ان کی موجودگی endorsement کا مفہوم نہیں رکھتی۔

لائسنسنگ سے متعلق امور

پروجیکٹ کا کوڈ اور دستاویزات MIT License استعمال کرتے ہیں۔ شامل کردہ فونٹس SIL Open Font License 1.1 استعمال کرتے ہیں۔ لوگو شامل نہیں کیے جاتے؛ انہیں generation کے دوران معاون logo collections، AWS، Lucide، یا آفیشل برانڈ ذرائع اور ریپوزٹریز سے ڈاؤن لوڈ کیا جاتا ہے۔

نتیجہ

stack-diagram مختصر آرکیٹیکچر کی وضاحت کو آفیشل لوگوز، قابلِ فہم routing، تھیم سپورٹ اور متعدد ایکسپورٹ آپشنز کے ساتھ ایک نفیس بصری شکل میں تبدیل کرنے کا تیز طریقہ فراہم کرتا ہے۔ skill انسٹال کریں، components اور تعلقات واضح طور پر بیان کریں، اور اپنی دستاویزات یا شیئرنگ workflow کے لیے موزوں آؤٹ پٹ فارمیٹ کی درخواست کریں۔