00:00:00هذا هو “سوبر باورز” (Superpowers)، إطار عمل المهارات الوكيلية الذي حصد أكثر من 50,000 نجمة على جيت هاب
00:00:05والذي يمنع وكيل البرمجة الخاص بك من التسرع وارتكاب الأخطاء عبر إلزامه بمسار
00:00:10عمل منظم يتضمن العصف الذهني، والتنفيذ، والتطوير القائم على الاختبار بنمط (red-green)،
00:00:15وحتى استخدام وكلاء فرعيين لتنفيذ المهام ومراجعة الكود بالتوازي.
00:00:19ولكن ما الذي يميز هذا عن مجرد استخدام وضع التخطيط (plan mode) أو التطوير القائم على المواصفات؟
00:00:24اشترك في القناة ولندخل في التفاصيل.
00:00:27هذا المشروع يسمى XDL، وهو أداة سطر أوامر (CLI) تُستخدم لتحميل الفيديوهات من تويتر.
00:00:32أريد إنشاء واجهة مستخدم ويب لهذه الأداة لا تكتفي بتحميل الفيديوهات لمتصفح المستخدم من
00:00:38رابط معين، بل تستخدمها أيضاً لإنشاء مقال. لذا استخدمت Opus 4.6 مع وضع التخطيط في Claude Code
00:00:46لمحاولة إنشاء تلك الواجهة. وهذا ما أنجزه.
00:00:50للأسف، عندما قمت بتشغيل الكود للمرة الأولى، ظهرت بعض المشاكل.
00:00:53لذا راجعت الكود لمحاولة إصلاح تلك المشاكل، وآمل أنها قد حُلت.
00:00:58الآن يبدو أن كل شيء يعمل بشكل صحيح.
00:01:00سأذهب إلى تويتر وأنسخ رابط هذه التغريدة.
00:01:03المعذرة يا كيفن، سأقوم بلصق الرابط هنا لنرى إن كان سيحمل الفيديو.
00:01:06إنه يقوم بالاستخراج الآن، وقد تمكن من تحميله بالفعل.
00:01:09إذا نقرت هنا، يفتح الفيديو في تبويب جديد؛ لم يكن هذا ما توقعته، لكنه يؤدي الغرض.
00:01:15وإذا حاولت إنشاء مقال من تلك التغريدة، سأقوم بلصق الرابط هنا وسيبدأ في التوليد،
00:01:20يمكننا رؤية الخطوات المختلفة التي يتخذها. فهو يبدأ أولاً باستخراج الفيديو ثم
00:01:24ينتقل للصوت. والآن بعد انتهائه، حصلنا على المقال بتنسيق Markdown مثالي،
00:01:29وهو أمر مبهر حقاً. وإذا ألقينا نظرة على نفس المهمة التي نُفذت بواسطة Opus 4.6،
00:01:35ولكن باستخدام Superpowers، يمكننا أن نرى بالفعل أن التصميم أفضل بكثير مع خيار
00:01:39للتحميل وتوليد المقال. سنلصق نفس رابط تويتر، ونضغط تحميل، ومرة أخرى،
00:01:45يستخرج الفيديو، لكن هذه المرة يحمله إلى متصفحي مباشرة ويمكنني النقر عليه لمشاهدته.
00:01:51الآن، إذا استخدمنا نفس التغريدة لتوليد المقال هنا، يمكننا رؤية الخطوات
00:01:56التي اتخذها. وبعد أن أنهى جميع الخطوات، يقوم ببث المقال إلى متصفحي مباشرة.
00:02:01ولدي الخيار لنسخ هذا ولصقه أينما أريد. يمكنكم ملاحظة أن نسخة
00:02:06Superpowers أفضل من النسخة التي لم تستخدمه. سنمر على
00:02:10الكود لاحقاً في الفيديو، ولكن أولاً لنشرح كيف فعلت ذلك. بعدما
00:02:15تقوم بتثبيت إضافة Superpowers، ستظهر لدينا أوامر جديدة تبدأ بـ (/) مثل brainstorm،
00:02:20و execute plan، و write the plan الذي يكتب الخطة بناءً على العصف الذهني. في الواقع نحتاج فقط
00:02:25لهذا الأمر لأن Superpowers سيوجهنا للمرحلة التالية تلقائياً عند نهاية المرحلة السابقة.
00:02:31فلنشغل هذا وسنقوم بلصق التعليمات (prompt). سنضغط إدخال. والآن يقوم
00:02:35بتحميل مهارة العصف الذهني ويبدأ في فهم المشروع الحالي. وهنا سيسألني بعض
00:02:39الأسئلة لتحسين الخطة بشكل أكبر. سأقول له استخدام React و Vite، وسأطلب منه
00:02:44توليد المقال خطوة بخطوة. والآن طلب مني تأكيد هيكلية البنية التحتية،
00:02:49والتي أراها جيدة. سأل أيضاً عن التخطيط (layout) ثم عن نقطة النهاية (endpoint) ومنطق السيرفر.
00:02:54بعد أن أجبت على جميع الأسئلة، بدأ في إنشاء الخطة،
00:02:58والتي وضعها الآن داخل هذا المجلد. وإذا ألقينا نظرة على الخطة، سنجدها مفصلة للغاية،
00:03:03حيث تعطي نظرة عامة، والتقنيات المستخدمة، والهيكل، بالإضافة إلى التصميم والواجهة ونقاط الـ API،
00:03:09وغير ذلك الكثير. في الواقع، هذا يشبه جداً ما يقدمه Claude Code عندما يكتب خطته الخاصة.
00:03:15لكن الخطوة التالية هي مكمن الإثارة. فبعدما أكدت الخطة وقلت إنني مستعد
00:03:19للتنفيذ، بدأ في كتابة خطة تنفيذ أخرى. يقوم بذلك عبر
00:03:25النظر أولاً في خطة التصميم الأصلية التي أنشأناها. ثم يقوم بتفكيكها إلى
00:03:31مهام أصغر وأكثر قابلية للإدارة يمكن إنجازها بواسطة وكلاء فرعيين يعملون بالتوازي.
00:03:36الآن كتب خطة أخرى وحفظها في مجلد الخطط مرة ثانية. وإذا نظرنا إليها،
00:03:41سنرى أنه بدلاً من إعطاء نظرة عامة مفصلة عن المشروع والبنية، قام بتقسيمها
00:03:46إلى مهام. لدينا مهمة هنا لتأسيس المشروع (scaffold) وبداخلها بعض الخطوات.
00:03:52وهناك مهمة أخرى لإنشاء هيكل Vite و React للعميل. ومرة أخرى، تحتوي على خطوات،
00:03:57وهكذا يستمر الأمر مع كل مهمة مطلوبة لإكمال المشروع. ومن هنا، يطلب مني
00:04:03Superpowers اختيار الأسلوب. هل أريد أسلوب الوكيل الفرعي أم أسلوب الجلسات
00:04:08المتوازية؟ هذا الأسلوب يستخدم وكيلاً فرعياً منفصلاً لكل مهمة دون الحاجة لتأكيد بشري.
00:04:14بينما الأسلوب الآخر ينشئ جلسة أخرى من جلسة التخطيط، ويكمل المهام في دفعات،
00:04:18ثم يتحقق معي كبشر إن كنت راضياً عن الدفعات المكتملة قبل أن يواصل العمل.
00:04:24من أجل السرعة، سأختار أسلوب الوكيل الفرعي. والآن بدأ
00:04:28في إنشاء المهام التي يجب إكمالها لهذا المشروع. لسوء الحظ،
00:04:32تبدو هذه المهام مختلفة عن السابقة لأنني نسيت تسجيل الشاشة في المرة
00:04:36الأولى. لذا بدأت من جديد، لكني استخدمت نفس التعليمات تماماً. ما يحدث الآن
00:04:41هو أن كل وكيل فرعي يبدأ بكتابة اختبار. يكتب اختباراً سيفشل في البداية.
00:04:47ثم يكتب أقل قدر من الكود لجعل هذا الاختبار ينجح. وعندما ينتهي من العمل على الميزة،
00:04:52يتحقق من أن الميزة تطابق المتطلبات المحددة في الخطة، ثم ينتقل
00:04:57لفحص جودة الكود، للتأكد من أنه نظيف، مبني جيداً وقابل للصيانة. الآن
00:05:02انتهى من معظم المهام. وسيقوم الآن باختبار كل ما أنجزه. وها نحن ذا، لقد
00:05:06أكمل جميع المهام بل واكتشف ثغرة برمجية أثناء العملية وتمكن من إصلاحها. وإذا
00:05:11نظرنا للكود، سنجده مقسماً بين السيرفر والمصدر (source). أفترض أن المصدر هو الواجهة الأمامية.
00:05:16لدينا بعض المكونات هنا؛ تبويب المقال، تبويب التحميل، وما إلى ذلك. وإذا نظرنا إلى
00:05:21تطور سير العمل، نجد مراحل في كائن (object)، وواجهة TypeScript. يبدو أنه يستخدم
00:05:27نوعاً من CSS-in-JS للتنسيق. ومع أنني كان يجب أن أحدد استخدام Tailwind،
00:05:32لكن هذا لا بأس به. وانظروا لهذا؛ هذا شيء لن يفعله وضع التخطيط في Opus تلقائياً.
00:05:37يمكنكم رؤية أنه في كل خطوة، قام Superpowers بعمل “git commit”؛ بدءاً من تأسيس
00:05:43المشروع وصولاً لإضافة غلاف CLI وإضافة Hono وكل ما بينهما. لذا إذا تحققت من
00:05:48حالة git، لن أجد شيئاً لأقوم بإرساله لأن الفرع (branch) نظيف، وهذا يوفر عليّ الكثير من العمل.
00:05:53قد تنظرون إلى هذا وتتساءلون: أين ملفات الاختبار؟ سأتحدث عن ذلك
00:05:57لاحقاً. بصراحة، أرى أن Superpowers مشروع مبهر. أحب حقيقة أنه
00:06:02يركز على المهارات. أعتقد أن لديه 14 مهارة تؤدي وظائف متنوعة من العصف الذهني
00:06:08إلى التخطيط والتنفيذ وحتى مراجعة الكود لاحقاً. وأحب التركيز على TDD،
00:06:12وتحديداً نمط (red-green) حيث يكتب الاختبارات أولاً لتفشل وتصبح باللون الأحمر،
00:06:18ثم يكتب الكود الأدنى لتمريرها. لكن أحياناً لا ينجح هذا دائماً لأن الوكيل
00:06:24يختار ألا يفعل ذلك. انظروا لهذا؛ هنا نرى مهارة كتابة الخطة حددت بوضوح استخدام TDD.
00:06:31ولسبب ما، اختار Claude ألا يفعل ذلك. سألته ليؤكد ذلك فقال: نعم، هذا خطئي.
00:06:36المهارة تقول TDD ومع ذلك لم أفعل. سألته: لماذا لم تفعل ذلك؟ فقال
00:06:42إنه ركز على سرعة الإنجاز بدلاً من اتباع العملية. لست متأكداً تماماً لمَ حدث هذا
00:06:47مع نموذج متطور كهذا، لكنه يثبت أنه لا ينبغي قبول ما يفعله النموذج
00:06:53بشكل أعمى. من المهم قراءة الخطة والتأكد من أنها تفعل ما تتوقعه منها.
00:06:57هذا أحد الأسباب التي تجعلني لا أظن أنني سأستخدم Superpowers في كل
00:07:03مشاريعي أو متطلبات الميزات، خاصة الصغيرة منها. فإذا كانت لدي ميزة صغيرة
00:07:08أريد إضافتها، يسعدني التواصل مع Claude ذهاباً وإياباً للتخطيط لها، وكتابة مستند خطة،
00:07:13ثم مسح السياق لتنفيذ تلك الخطة. ولكن إذا وجدت نفسي في موقف
00:07:19أقوم فيه بتنفيذ ميزات متعددة، وهو ما يحدث من وقت لآخر، فإن Superpowers
00:07:24أداة رائعة للاستخدام لأنها بارعة جداً في تقسيم المتطلبات المعقدة إلى أجزاء
00:07:31يمكن إكمالها بواسطة وكلاء فرعيين. نعم، ميزة المهام في Claude Code يمكنها فعل شيء مشابه،
00:07:37لكنني أحب حقيقة أن Superpowers ينشئ خطة لهذا بدلاً من الاندفاع لتنفيذ الكود.
00:07:43الآن، كيف يقارن Superpowers بأدوات مثل Beads أو SpecKit أو فلسفة
00:07:48التطوير القائم على المواصفات؟ بالنسبة لي، يبدو نسخة أبسط من التخطيط المسبق
00:07:53قبل التنفيذ. طبعاً، ليس ببساطة Ralph، بل ربما يقع في منطقة وسطى
00:07:58بين Ralph و Beads. لكن يبدو لي أن هناك المزيد والمزيد من هذه الأدوات
00:08:02التي تساعد الناس على كتابة كود أفضل مع وكيل الذكاء الاصطناعي الخاص بهم. هذا أمر جيد،
00:08:06ولكن لكل شخص أسلوبه. وأعتقد أنه من الجيد أخذ القليل من هنا وهناك،
00:08:10وفي النهاية بناء مسار العمل الخاص بك والمثالي لك تماماً. ربما هذا شيء قد أفعله
00:08:16في المستقبل. وإذا حالفكم الحظ، سأصنع فيديو عنه لأريكم كيف فعلت ذلك بالضبط.