بناء واجهات تصحيح الأخطاء التفاعلية التي تكشف عن سلوك النظام الداخلي. استخدم عندما يُطلب منك "مساعدتي في فهم كيفية عمل هذا"، أو "إظهار ما يحدث"، أو "تصور الحالة"، أو "إنشاء عرض تصحيح"، أو "لا أستطيع رؤية ما يحدث"، أو أي طلب لجعل سلوك النظام غير الشفاف مرئيًا. ينطبق على أجهزة الحالة، أو تدفق البيانات، أو أنظمة الأحداث، أو الخوارزميات، أو دورات العرض، أو الرسوم المتحركة، أو حسابات CSS، أو أي آلية ذات عناصر داخلية مخفية.
ثبّت مهارة الذكاء الاصطناعي explanatory-playground بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: petekp/claude-code-setup.
Build dev-only visualizations that make invisible system behavior visible.
| State machines | Node-edge graph | react-flow | | Data flow | Directed graph / Sankey | react-flow | | Events | Timeline | custom or recharts | | Algorithms | Step animation | custom | | Render cycles | Component tree + diffs | custom | | Animations | Timeline scrubber | custom | | CSS/Layout | Box model overlay | custom |
See references/patterns.md for layouts, code, and implementation details.
بناء واجهات تصحيح الأخطاء التفاعلية التي تكشف عن سلوك النظام الداخلي. استخدم عندما يُطلب منك "مساعدتي في فهم كيفية عمل هذا"، أو "إظهار ما يحدث"، أو "تصور الحالة"، أو "إنشاء عرض تصحيح"، أو "لا أستطيع رؤية ما يحدث"، أو أي طلب لجعل سلوك النظام غير الشفاف مرئيًا. ينطبق على أجهزة الحالة، أو تدفق البيانات، أو أنظمة الأحداث، أو الخوارزميات، أو دورات العرض، أو الرسوم المتحركة، أو حسابات CSS، أو أي آلية ذات عناصر داخلية مخفية. المصدر: petekp/claude-code-setup.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/petekp/claude-code-setup --skill explanatory-playgroundبناء واجهات تصحيح الأخطاء التفاعلية التي تكشف عن سلوك النظام الداخلي. استخدم عندما يُطلب منك "مساعدتي في فهم كيفية عمل هذا"، أو "إظهار ما يحدث"، أو "تصور الحالة"، أو "إنشاء عرض تصحيح"، أو "لا أستطيع رؤية ما يحدث"، أو أي طلب لجعل سلوك النظام غير الشفاف مرئيًا. ينطبق على أجهزة الحالة، أو تدفق البيانات، أو أنظمة الأحداث، أو الخوارزميات، أو دورات العرض، أو الرسوم المتحركة، أو حسابات CSS، أو أي آلية ذات عناصر داخلية مخفية. المصدر: petekp/claude-code-setup.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/petekp/claude-code-setup --skill explanatory-playground بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/petekp/claude-code-setup