design-implementation

| "implement feature", "build the X" | workflows/implement-feature.md | | "verify", "check", "screenshot" | workflows/verify-visual.md | | "fix errors", "fix the issues" | workflows/fix-errors.md | | "start server", "stop server" | workflows/manage-server.md | | "test interactions", "click test" | workflows/test-interactions.md |

| tools/playwright-runner.ts | Browser automation (screenshot, console, network) | | tools/server-manager.ts | Dev server lifecycle (start, stop, detect port) |

| frontend-design | Initial implementation | | engineer agent | Escalate complex bugs | | design-iterator agent | Multiple visual refinements |

سير عمل مبسط لتطوير واجهة المستخدم مع تنفيذ ميزة الأمر الفردي. الأتمتة: خادم التطوير، المتصفح، التحقق، إصلاح الأخطاء، حلقة التكرار. **الأمر الأساسي:** "تنفيذ الميزة التالية" أو "تنفيذ [وصف الميزة]" **ماذا يفعل:** 1. يبدأ خادم التطوير (يكتشف المنفذ تلقائيًا من package.json) 2. تشغيل المتصفح (مرئي افتراضيًا، --متاح بدون رأس) 3. ينفذ الميزة عبر مهارة تصميم الواجهة الأمامية 4. التحقق من: أخطاء وحدة التحكم، وأخطاء TS، وفشل الشبكة، والمطابقة المرئية 5. يتم الإصلاح بشكل متكرر (بحد أقصى 5 تكرارات) 6. تقارير الإكتمال أو التصعيد مع تقرير مفصل **المشغلات:** - "تنفيذ الميزة التالية"، "تنفيذ قسم البطل" - "التحقق من هذا التنفيذ"، "التحقق من واجهة المستخدم" - "أصلح الأخطاء"، "كرر هذا" - "بدء خادم التطوير"، "إدارة الخادم" المصدر: multicam/qara.