تطلب من Claude مخططًا لنظام، كمسار RAG أو رحلة طلب من المتصفح إلى قاعدة البيانات، فترسمه هذه المهارة كما يخطّه مهندس بقلم حبر على ورق بيج، ثم تحرّك نقاطًا على الأسهم لتتبع ما يتدفق فعلًا: تتفرع حيث يتفرع النظام وتدور حيث توجد حلقة. صُممت لـ Claude Code، وتسلّم ملف HTML واحدًا يعمل دون اتصال، وصورة GIF يصدّرها سكربت مرفق.
كيف تبني المخطط
- تختار الشكل من المحتوى بين ستة أنماط: شرائط لفئات متوازية، وطبقات لمعمارية متدرجة، وشكل شعاعي، وأعمدة للمقارنة، ومسار واحد متعرج، وخط زمني.
- تسألك عن مصدر الأيقونات: أن تولّدها بنموذج صور، أو ترسمها بنفسها بصيغة SVG، وهو ما توصي به، أو تجلب أيقونات مفتوحة الترخيص. وحين تعمل دون تفاعل ترسمها بنفسها.
- تلتزم بنظام بصري ثابت في references/style-guide.md يحدد ألوان الورق والحبر، وخمسة ألوان مائية للمناطق، وسرعة للنقاط بين 80 و150 بكسلًا في الثانية. وتبني الملف من قوالب references/svg-recipes.md، وتحوّل مكتبة rough.js المرفقة أشكاله إلى خطوط مرتعشة.
- تراجع عملها: تستخرج إطارين أو ثلاثة من GIF، وتفحص فيها النص والتوزيع والحركة، وتصحّح وتعيد التصدير حتى يسلم كل بند.
التصدير إلى GIF
يفتح scripts/render-gif.mjs ملف HTML في Chrome عبر playwright-core، ويوقف الحركات ويلتقط الصفحة إطارًا بعد إطار، ثم يجمع FFmpeg الإطارات في GIF. الأمر: node render-gif.mjs diagram.html diagram.gif، وقيم خياراته الافتراضية: fps 25، وloop 3000 ملّي ثانية، وscale 2، وخفض scale إلى 1 يجعل النص ضبابيًا. بهذه القيم يخرج 75 إطارًا، ولأن المهارة تشترط أن تقسم مدة كل حركة الدورة دون باقٍ، يتصل آخر إطار بالأول دون قفزة.
أمثلة تفتحها قبل التثبيت
في مجلد examples خمسة مخططات، لكل منها ملفا HTML وGIF: حلقة وكيل يخطط وينفّذ ويراقب، ورحلة طلب عبر طبقات النظام، وأنماط الحلقات في Claude Code، والتطبيق الواحد مقابل الخدمات المصغّرة، ومسار RAG.
كيف تطلب منها
يقترح README الأصلي طلبًا مثل «Draw me an animated sketch diagram of how a RAG pipeline works». ولأن تعليماتها ووصفها بالصينية مع كلمات إنجليزية، سمّها في طلبك العربي: «استخدم مهارة animated-sketch-diagram لرسم رحلة الطلب من المتصفح إلى الخادم ثم قاعدة البيانات».
التثبيت في Claude Code
- فك الضغط وانسخ محتوى مجلد plugin إلى ~/.claude/skills/animated-sketch-diagram بهذا الاسم تحديدًا، فأمر التصدير وسكربت تضمين الخطوط يشيران إليه.
- للتصدير شغّل npm ci مرة واحدة داخل scripts. يثبّت هذا playwright-core دون متصفح، فيلزمك Chrome أو Chromium، وFFmpeg متاحًا من سطر الأوامر، وNode.js 22 أو أحدث.
- على ويندوز يبحث السكربت عن Chrome في مسارات macOS وLinux فقط، فعرّف متغير البيئة CHROME_PATH بمسار chrome.exe.
- أرفقتُ دليلًا عربيًا مختصرًا. ويذكر README الأصلي الأمر npx skills add OLDyade/animated-sketch-diagram لـ Codex وCursor، ولم أجهّز ملف رفع إلى claude.ai.
حدودها
- لا يحتوي أي من الخطوط المرفقة، اللاتينية والصينية، على حروف عربية، فتظهر التسميات العربية بخط بديل من جهازك؛ راجع اتجاهها ومحاذاتها.
- خطوة تضمين الخطوط تستدعي fonttools عند وجود حروف غير لاتينية، ومنها العربية، فثبّت fonttools وbrotli في Python.
- ترسم المهارة ما تصفه لها، ولا تتحقق من صحة المعمارية نفسها.
- ملفات المهارة كما نشرها صاحبها.
الترخيص
المهارة من OLDyade بترخيص MIT، والخطوط بترخيص OFL-1.1، وrough.js بترخيص MIT، ونصوص التراخيص داخل الحزمة.
