--- name: shoogp-graphics description: مسار الرسومات التفصيلية التفاعلية في منصّة شوجب — توليد صورة مسطّحة خارجياً بلون صريح لكل منطقة، ثمّ تتبّعها محلياً بـvtracer إلى SVG، وتسمية مناطقها وتحييد ألوانها للاستخدام التفاعلي. استخدمها حين يحتاج السؤال رسماً تفصيلياً بمناطق تفاعلية يشقّ بناؤه SVG من الصفر. --- # مسار الرسومات التفصيلية التفاعلية (توليد ← تتبّع ← تسمية) مسارٌ معتمد لإنتاج **رسم تفصيليّ فيه مناطق تفاعلية** دون بناء SVG يدوياً من الصفر: تُولَّد صورة مسطّحة خارجياً (ChatGPT/DALL·E) بلون صريح لكل منطقة، ثمّ تُتبَّع محلياً بـ`vtracer` إلى SVG نظيف، فتُسمّى مناطقها وتُحيَّد ألوانها. هذه المهارة **موطن قواعد هذا المسار** — لا تُكرَّر في `CLAUDE.md` (الذي يشير إليها بسطر واحد). القواعد العامّة (بلا ملامح وجه، مرساة الأسلوب، مسارات الأصول، حقوق النشر) موطنها `CLAUDE.md`، وهذه المهارة تشير إليها دون تكرار. > المسار **بديلٌ** للرسم اليدوي لا ناسخٌ له: الرسوم البسيطة أو ذات المنطق الهندسيّ الصرف تبقى > SVG مبنيّاً مباشرة مع السؤال. هذا المسار للرسوم **التفصيلية** التي يشقّ رسمها يدوياً. --- ## ١) البوّابة — متى يصلح هذا المسار يصلح لأيّ **نوع سؤال** يستفيد من رسم تفصيليّ فيه مناطق تفاعلية (تلوين، تحديد أجزاء، سحب على صورة…)، بشروط أربعة **مجتمعة**: 1. **عدد المناطق التفاعلية ≤ ٤.** 2. **لكلّ منطقة حدود واضحة** (خطّ خارجيّ مغلق يفصلها). 3. **لا تداخل بين المناطق.** 4. **لكلّ منطقة لون مسطّح مختلف تماماً** — **اللون هو مفتاح العزل** في التتبّع، فلا يتكرّر لونٌ بين منطقتين (وإلا اندمجتا في مسار واحد يتعذّر فصله). **عند اختلال أيّ شرط:** لا يُغيَّر **الهدف التعليميّ**، بل يُختار **نوع سؤال آخر** يحقّق الهدف نفسه. **المحتوى يقود الأداة، لا العكس.** --- ## ٢) قالب برومبت التوليد (ثابت) يُطلب من مولّد الصور رسمٌ: - **مسطّح** بلا تدرّج (gradient) ولا ظلّ (shadow) ولا ملمس (texture). - **حدود خارجية واضحة** لكلّ منطقة. - **لون مسطّح صريح مختلف لكلّ منطقة تفاعلية** (لا يتكرّر لونٌ بين منطقتين). - **خلفية بيضاء نقية** (`#FFFFFF`). - **بلا أيّ نصوص أو تسميات.** - **بلا ملامح وجه** — قاعدة المشروع (موطنها `CLAUDE.md`). - يُختم البرومبت بـ**مرساة الأسلوب المعتمدة** (نصّها العربي/الإنجليزي في `CLAUDE.md`، ضمن قاعدة إنشاء بطاقات الكتب) و**«صورة واحدة مستقلّة فقط.»** المناطق التي **لا تُلوّن ولا يُختبر لونها** (خلفية تشريحية: عظام، جلد…) تُترك بألوانها الطبيعية؛ المهمّ أن تتميّز المناطق **التفاعلية** بألوان صريحة فريدة. --- ## ٣) التتبّع بـ `vtracer` — الإعداد الناجح (أرقام لا وصف) الأداة: ثنائيّ `vtracer` محليّ (نسخة رسمية جاهزة). الإعداد **المسجَّل الذي نجح فعلاً**: ``` vtracer --input <صورة.png> --output <رسم.svg> \ --colormode color \ --color_precision 4 \ --filter_speckle 16 \ --gradient_step 32 \ --mode spline ``` - `color_precision 4` هو مفتاح **تقليل عدد الألوان** حتى تخرج كلّ منطقة تفاعلية **مساراً واحداً نظيفاً بلا تفتّت**. - ناتج نموذج العضلات بهذا الإعداد: **١٤ لوناً / ١٤ مساراً**، الأحمر مسارٌ واحد والأزرق مسارٌ واحد. - إن خرجت منطقةٌ **مفتّتة** إلى عدّة مسارات، فذلك مؤشّر إخلالٍ بالشرط ٤ (تقارب/تكرار لون) — يُعالَج بإعادة التوليد لا بحِيَل التتبّع. **إزالة الخلفية البيضاء:** يُنتج `vtracer` مساراً يملأ كامل اللوحة بالأبيض (أوّل مسار، مثل `#FDFDFD`)؛ **يُحذف** كاملاً فتصبح الخلفية شفّافة. --- ## ٤) ما بعد التتبّع 1. **تسمية المسارات** بمعرّفات إنجليزية دلالية (`id`) لأنها تدخل الكود (تُطابق منطق التفاعل: `cpart`/`data-name` والتحقّق). مثال: `id="muscle-front"`، `id="muscle-back"`. 2. **تحييد التعبئة الكاشفة:** أيّ منطقة **يكشف لونها الإجابة** (كالأحمر/الأزرق في سؤال تلوين) **تُحيَّد تعبئتها إلى `#E8E4DC`** (بيج محايد) لتظهر «غير ملوّنة» ابتداءً. المناطق غير الكاشفة تبقى بلونها. 3. **حذف مستطيل/مسار الخلفية** الأبيض — إن لم يُحذف في خطوة التتبّع. 4. **بلا `