حوّل مكدّس تقني فـ جملة وحدة لمخطط معماري

شنو هو stack-diagram؟

stack-diagram هي مهارة ديال وكيل ذكاء اصطناعي كتبدّل وصف مكتوب بالإنجليزية العادية للتقنيات المستعملة فالمشروع لمخطط معماري. بلا ما تبقى تحطّ الأيقونات وترسم الروابط بيدك، كتشرح الخدمات والعلاقات والبروتوكولات وتدفّق النشر فجملة ولا فقرة قصيرة.

مثلاً، البرومبت التالي كيشرح تطبيق ويب، وواجهة API ديالو، وخدمات البيانات، وخط النشر:

رسُم لينا الـ stack: Next.js وHono API فوق Vercel. Postgres فوق Neon، والمصادقة بـ Clerk، والدفوعات بـ Stripe. GitHub Actions كيدير النشر.

هاد المهارة خدامة مع Claude Code وCodex وCursor ووكلاء آخرين كيدعمو صيغة Agent Skills.

أهم المزايا

• إدخال بلغة عادية: وصف المعمارية بلا ما تكتب صيغة ديال المخططات.
• شعارات رسمية: كيتجابو الشعارات من مصادر بحال SVGL وDevicon وgilbarbara/logos ومستودعات العلامات الرسمية وحزمة AWS Architecture Icons.
• توجيه دقيق للروابط: الخطوط كتدوز من حدا العناوين باش الأسهم ما تدوزش من وسط النص.
• ثيمات فاتحة ومظلمة: كل مخطط كيتصيّب بالثيمين. مربعات الشعارات كيبقاو بالبيض باش يحافظو على ألوان العلامة الأصلية.
• صيغ متعددة للإخراج: إنشاء ملف HTML مستقل، أو صورة PNG، أو مكوّن React بلا تبعيات، أو Artifact قابل للمشاركة.
• HTML محمول: الخطوط والشعارات كيتدمجو داخل الملف، وكيولي ملف HTML الناتج خدام بلا اتصال بالشبكة.

المتطلبات

قبل ما تستعمل هاد المهارة، تأكد باللي البيئة ديالك فيها:

• Python 3.9 ولا أحدث.
• الولوج للشبكة وقت جلب الشعارات.
• Playwright مع Chromium ملي كتصدّر المخططات بصيغة PNG.
• وكيل برمجة بالذكاء الاصطناعي ولا تطبيق كيدعم المهارات.

رغم أن ملف HTML النهائي كيخدم بلا إنترنت، الولوج للشبكة ضروري وقت التوليد حيث الشعارات كيتحمّلو فمرحلة البناء وماشي مدموجين مع المهارة.

تثبيت stack-diagram

التثبيت فوكيل برمجة مدعوم

شغّل الأمر التالي من التيرمينال:

npx skills add caru-ini/stack-diagram

هاد الأمر كيثبّت المهارة للوكلاء اللي كيدعمو منظومة المهارات، ومنهم Claude Code وCodex وCursor.

التثبيت فتطبيق Claude

إلى كان تطبيق Claude كيسمح بتحميل المهارات، حلّ آخر إصدار ديال المشروع، حمّل stack-diagram.zip ورفع ملف ZIP كمهارة.

إنشاء أول مخطط معماري ديالك

من بعد التثبيت، طلب من الوكيل يرسم الـ stack. البرومبت المفيد كيحدّد التقنيات الرئيسية، فين خدامة، وكيفاش كتتفاعل مع بعضها.

رسُم لينا الـ stack: Next.js وHono API فوق Vercel.
Postgres فوق Neon، والمصادقة بـ Clerk، والدفوعات بـ Stripe.
GitHub Actions كيدير النشر.

هاد الوصف كيعطي للوكيل معلومات كافية باش يمثّل الواجهة الأمامية، وواجهة API، وقاعدة البيانات، ومزوّد المصادقة، ومزوّد الدفع، وسيرورة النشر.

خلّي العلاقات واضحة

باش تحصل على نتائج أدق، ضمّن البروتوكولات ولا أنواع التفاعل ملي كيكونو مهمين. تقدر تقول باللي المتصفح كيوصل للتطبيق عبر HTTPS، وواجهة API كتستعلم من قاعدة البيانات عبر SQL، ولا خدمة كتدير استدعاء RPC.

رسُم مستخدم كيوصل لـ Next.js فوق Vercel عبر HTTPS.
Next.js كينادي Hono API عبر RPC.
الـ API كتستعلم من Neon عبر SQL وكتستعمل Clerk للجلسات.
GitHub Actions كينشر التطبيق.

المشروع كيرندر النتيجة وكيعاين المخطط قبل ما يرجّعو، وهادشي كيساعد يمنع الروابط من أنها تقطع العناوين.

أدوات تطوير المخططات

stack-diagram ماشي محدودة غير فالبنية التحتية السحابية. تقدر حتى تمثّل monorepos، وأدوات العمل المحلية، ومشغّلات الاختبارات، وcommit hooks، والتكامل المستمر، ونشر الحزم.

رسُم أدوات monorepo ديالنا: مساحة عمل pnpm فيها Turborepo وBiome وVitest وLefthook. GitHub Actions كيشغّل CI وكينشر فـ npm.

هاد النوع ديال البرومبت كيحدّد حدود مساحة العمل، والأدوات اللي خدامة داخلها، والأتمتة الخارجية المسؤولة على CI والنشر.

رسم مخطط لتطبيق ذكاء اصطناعي

مخططات تطبيقات الذكاء الاصطناعي تقدر تجمع بين أُطر الويب، ومزوّدي النماذج، وقواعد البيانات المتجهية، والمهام الخلفية، ومصادر المحتوى. شرح مسار الطلب التفاعلي وكذلك أي عملية إدخال مبرمجة.

رسُم chatbot ديال التوثيق ديالنا: Next.js فوق Vercel كيقلب فـ Supabase pgvector وكيردّ باستعمال Claude. Inngest كيسينكرونيز Notion كل ليلة.

هنا، البرومبت كيفرّق بين مسار السؤال والجواب اللي كيشوفو المستخدم، وعملية المزامنة الليلية.

رسم بنية AWS التحتية

فمعماريات AWS، سمّي الخدمات وحدود الشبكة بشكل مباشر. stack-diagram كتستعمل أيقونات AWS الرسمية للمعمارية.

رسُم التطبيق ديالنا فوق AWS: CloudFront قدّام S3 وALB فشبكة فرعية عمومية. Fargate وRDS وElastiCache كاينين فشبكة فرعية خاصة.

هاد الوصف كيوضّح طبقة التوجيه، والتخزين الثابت، وموازن الحمل، والفرق بين الشبكات الفرعية العمومية والخاصة.

اختيار صيغة الإخراج

النتيجة الافتراضية هي ملف HTML مستقل وكامل. وتقدر حتى تطلب فورما آخر مدعوم مباشرة فـ prompt ديالك:

• HTML: مناسب للمستودعات، التوثيق الداخلي، والويكيّات. الخطوط واللوغوهات مدموجين فملف واحد.
• PNG: مفيد للعروض التقديمية والوثائق. تصدير PNG كيتطلب Playwright مع Chromium.
• مكوّن React: مكوّن بلا تبعيات، مناسب للدمج فمشروع React.
• Artifact: مناسب للنشر والمشاركة عبر Claude.

صايب ليا مخطط لهاد الستاك فملف HTML مستقل وكامل:
Next.js على Vercel كينادي على Hono API، اللي كيخزّن البيانات فـ Neon.

ملفات PNG ومكوّن React كيتصايبو من نفس ملف HTML الأساسي، وهادشي كيساعد باش تبقى فورمات الإخراج منسجمة.

استعمل الثيمات الفاتحة والغامقة

كل مخطط كيتصايب بالثيم الفاتح والغامق. مربعات التقنيات كيبقاو بالبيض باش اللوغوهات الرسمية تحافظ على الألوان الأصلية ديالها، بينما تسميات المجموعات تقدر تبدّل للوغو مناسب للثيم الغامق.

ملي تنشر الإخراج فمستودع ولا ويكي، خلّي الثيمين بجوج متوفرين إلا كانو القرايا يقدرو يستعملو أنظمة ألوان مختلفة فالواجهة.

نصائح متقدمة لكتابة الطلبات

وصف اتجاه حركة البيانات

لائحة ديال المنتجات كتشرح شنو كاين فالستاك، ولكن اللغة اللي كتبيّن الاتجاه كتشرح كيفاش كيخدم. استعمل أفعال بحال كينادي، كيستعلم، كيقدّم، كينشر، كينشر على، وكيزامن.

سمّي الحدود والأماكن

وضّح واش المكوّنات كيتشاركو نفس النشر، كينتميو لنفس مساحة العمل، ولا كاينين فشبكات فرعية عامة وخاصة. هاد التفاصيل كتعاون المخطط يجمع المكوّنات المرتابطة بالطريقة الصحيحة.

ضمّن الجداول الزمنية والأتمتة

إلا كانت شي عملية كتخدم كل ليلة، مع كل commit، ولا أثناء النشر، ضمّن هاد المعلومة. هادشي كيساعد يميّز بين سير العمل اللي كيخدم فالخلفية والمسار الرئيسي للطلبات.

اطلب المخرج المطلوب

حدّد واش باغي إخراج HTML، PNG، React، ولا Artifact ملي ما يكونش فورما HTML الافتراضي هو اللي محتاج. وباش تحصل على نتيجة سهلة للمشاركة وخدامة بلا إنترنت، طلب ملف HTML مستقل وكامل.

خلّي أصول العلامة بلا تغيير

المشروع ما كيبدّلش ألوان اللوغوهات وما كيرسمهاش من جديد. أسماء العلامات واللوغوهات كيبقاو علامات تجارية ديال المالكين ديالهم، ووجودهم فالمخطط ما كيعنيش التأييد.

اعتبارات الترخيص

الكود والتوثيق ديال المشروع كيستعملو ترخيص MIT. الخطوط المدموجة كتستعمل SIL Open Font License 1.1. اللوغوهات ماشي مدموجة؛ كيتحمّلو أثناء التوليد من مجموعات اللوغوهات المدعومة، وAWS، وLucide، ولا من المصادر والمستودعات الرسمية ديال العلامات.

الخلاصة

stack-diagram كيوفّر طريقة سريعة باش تحوّل وصف مختصر للبنية إلى تصميم بصري منسّق فيه لوغوهات رسمية، توجيه واضح، دعم للثيمات، وعدة اختيارات للتصدير. ثبّت الـ skill، وصف المكوّنات والعلاقات بوضوح، وطلب فورما الإخراج اللي مناسب للتوثيق ولا لطريقة المشاركة ديالك.