شنو كيدير iso-figure
iso-figure هي مهارة لـ Claude كتنشئ أشكال تفاعلية إيزومترية انطلاقاً من وصف باللغة الطبيعية. كتسمي شي حاجة، والمهارة كتنشئ ملف HTML واحد فيه رسم إيزومتري بخط رقيق فوق لوحة مرقمة.
الأجزاء ديال الشي المرسوم تقدر تجاوب ملي كتضغط عليها. على حساب الشي، التفاعل يقدر يخرج نص مكتوب، رقم، ولا نوتة موسيقية. إلا ماكانش فشي حاجة جزء عندو معنى باش يتضغط، المهارة كتختار موضوع مختلف.
باش تشوف أمثلة، جرّب سينث مكتبي ولا آلة حاسبة جيبية. وتقدر حتى تحل الملفات اللي كاينين فمجلد examples ديال المستودع.
كيفاش كخدمو الأشكال اللي كتتولد
الخروج كيستعمل SVG عادي وماكيحتاج حتى مكتبة خارجية. تقريباً 15 سطر ديال كود الإسقاط كيحوّلو كل وجه من صندوق إلى matrix() فـ SVG. بهاد الطريقة، المستطيلات والنصوص والمسارات العادية المرسومة بشكل مسطح كتبان فوق المستوى الإيزومتري الصحيح.
الإسقاط كيدعم حتى النص والزوايا المدورة. ترتيب الرسم كيتحكم فالعمق، وبهذا العناصر كتبان قدّام ولا مور بعضياتها كيفما خاص.
التفاعل كيتحرك بواسطة كائن حالة واحد ودالة render(). CSS كيتكلف بالحركة، وكيخلي الملف اللي كتولد مكتفي بذاتو، مع بقاء إمكانية تحريك الأجزاء ولا تجاوبها مع الإدخال.
ثبّت المهارة
التثبيت باستعمال Claude Code
أسهل إعداد لـ Claude Code هو تزيد المستودع كسوق وتثبّت الإضافة:
/plugin marketplace add MrBongoC/ai-iso-skill
/plugin install iso-figure@ai-iso-skill
التثبيت اليدوي
إلا بغيتي تنسخ مجلد المهارة لمجلد مهارات Claude المحلي ديالك، دير clone للمستودع ونسخ مجلد iso-figure:
git clone https://github.com/MrBongoC/ai-iso-skill.git
cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/استعملها فـ Claude.ai
بالنسبة لـ Claude.ai، حمّل iso-figure.skill من آخر إصدار ورفعو فإعدادات المهارات ديالك.
صايب أول شكل ديالك
من بعد التثبيت، طلب من Claude شي حاجة فيها أجزاء تقدر تضغط عليها. ضمّن الموضوع ووصف التفاعل اللي بغيتي تشوف.
iso figure of a kitchen timer with minute buttons and a display that counts downهاد الطلب كيعرف شي حاجة مادية، وكيعطيها أزرار تفاعلية، وكيحدد كيفاش خاص الشاشة تخدم. Claude يقدر يستعمل هاد التفاصيل ملي كيقرر حالة الشكل ومنطق الرسم ديالو.
وتقدر حتى تطلب تفاعل بحال ديال المفتاح:
fig 6, a wall light switch that turns a lamp on and offالعبارة fig 6 كتعطي عرض اللوحة المرقمة، ووصف المفتاح كيعرف جزء واضح قابل للضغط والنتيجة ديالو.
نصائح لكتابة الطلبات
- سَمّي شي حاجة ملموسة. المؤقتات والآلات الحاسبة والسينثات ومفاتيح الضو كيعطيو أجزاء معروفة تقدر ترسمها وتضغط عليها.
- وصف أدوات التحكم. ذكر الأزرار والمفاتيح والقواطع ولا أي أجزاء أخرى خاصها تجاوب مع الإدخال.
- وصف النتيجة. قول واش الضغط على شي جزء خاصو يخرج نص، رقم، نوتة، ولا سلوك آخر كيدعمو هاد المفهوم.
- ضمّن شاشة ولا مخرج ملي يكون مفيد. العد التنازلي ولا الحساب ولا الموجة اللي كتبدل كيعطيو للتفاعل نتيجة باينة.
- استعمل شي موضوع آخر إلا ماكان والو باش يتضغط. المهارة مصممة حول الأشكال التفاعلية، وهادشي علاش المواضيع الثابتة بوحدها ماشي الاختيار المناسب.
إرشادات متقدمة
عاين تعليمات المهارة
المستودع فيه المسطرة كاملة فـ SKILL.md. قراها ملي تحتاج تفهم نواة الرسم، وطريقة التوليد، ولا القواعد اللي كتحكم فالأسلوب البصري.
فكّر فالمستويات وترتيب الرسم
حيت الشكل مبني من مستويات SVG، كل سطح باين خاصو يتحط فالوجه الإيزومتري المناسب. كود الإسقاط كيطبق matrix() المطلوبة فـ SVG، وترتيب الرسم كيحدد شنو من سطح كيغطّي الآخر. هادشي مهم بزاف فالتحكمات والقطع المركبة فوق قاعدة.
خلّي حالة التفاعل واضحة
التصميم اللي كتولد كيستعمل كائن حالة واحد ودالة render() وحدة. ملي كتراجع النتيجة، وصف التغيير فالحالة بوضوح، بحال تبدل قيمة من بعد الضغط على زر ولا تحرك مفتاح بين حالتي التشغيل والإيقاف.
حل النتيجة كملف مستقل
الخروج هو ملف HTML واحد، وهادشي كيسهّل تحلو محلياً فالمتصفح ولا تشاركو كمثال مكتفي بذاتو. حيت الرسم كيستعمل SVG وCSS عاديين بلا مكتبات، المشروع ماكيصف حتى تثبيت إضافي للتبعيات.
الخلاصة
iso-figure كيحوّل prompt قصير ديال Claude لرسمة إيزومترية تفاعلية ومضغوطة. نصّبو عبر Claude Code، ولا كوپي المهارة يدويًا، ولا طلّع ملف الإصدار لـ Claude.ai. باش تحصل على أحسن نتيجة، اختار واحد الأوبجيكت اللي فيه أجزاء واضحة قابلة للضغط، وشرح شنو خاص يوقع مع كل تفاعل.
المشروع منشور بموجب رخصة MIT.