बस यही एक Claude Code Plugin आपको चाहिए (Superpowers)

BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00यह है Superpowers, एक एजेंटिक स्किल्स फ्रेमवर्क जिसे GitHub पर 50,000 से अधिक स्टार्स मिले हैं
00:00:05जो आपके कोडिंग एजेंट को जल्दबाजी करने और गलतियाँ करने से रोकता है, उसे एक स्ट्रक्चर्ड
00:00:10वर्कफ्लो के माध्यम से काम करने पर मजबूर करके, जिसमें ब्रेनस्टॉर्मिंग, इम्प्लीमेंटेशन, रेड-ग्रीन टेस्ट-ड्रिवन डेवलपमेंट शामिल है,
00:00:15और यहाँ तक कि कार्यों को पूरा करने और पैरेलल में कोड रिव्यु करने के लिए सब-एजेंट्स का उपयोग भी शामिल है।
00:00:19लेकिन यह सिर्फ प्लान मोड या स्पेक-ड्रिवन डेवलपमेंट जैसी चीज़ों से कैसे अलग है?
00:00:24सब्सक्राइब बटन दबाएं और चलिए इसके बारे में विस्तार से जानते हैं।
00:00:27तो यह XDL नाम का एक प्रोजेक्ट है, जो ट्विटर से वीडियो डाउनलोड करने के लिए इस्तेमाल किया जाने वाला एक CLI टूल है।
00:00:32मैं इस टूल के लिए एक वेब UI बनाना चाहता हूँ जो न केवल URL से यूजर के ब्राउज़र में वीडियो डाउनलोड करे,
00:00:38बल्कि इसका उपयोग एक आर्टिकल बनाने के लिए भी करे। इसलिए मैंने क्लॉड कोड में प्लान मोड के साथ Opus 4.6 का उपयोग किया
00:00:46ताकि वह UI बनाया जा सके। और इसने जो बनाया वो यहाँ है।
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यह ऑडियो पर काम कर रहा है। और अब जब यह हो गया है, हमें पूरी तरह से फॉर्मेटेड मार्कडाउन में आर्टिकल मिल गया है,
00:01:29जो वास्तव में प्रभावशाली है। और अगर हम इसी काम को Opus 4.6 के साथ देखें,
00:01:35लेकिन Superpowers का उपयोग करके, तो हम पहले ही देख सकते हैं कि इसका डिज़ाइन बहुत बेहतर है और इसमें
00:01:39डाउनलोड करने और आर्टिकल जनरेट करने का विकल्प है। हम वही ट्विटर URL पेस्ट करेंगे, डाउनलोड पर क्लिक करेंगे, और फिर से,
00:01:45यह वीडियो एक्सट्रैक्ट करता है, लेकिन इस बार यह मेरे ब्राउज़र में डाउनलोड होता है और मैं वीडियो देखने के लिए इस पर क्लिक कर सकता हूँ।
00:01:51अब, अगर आप यहाँ आर्टिकल जनरेट करने के लिए उसी ट्वीट का उपयोग करें, तो हम देख सकते हैं कि
00:01:56इसने कौन से स्टेप्स लिए हैं। और अब जब इसने सभी स्टेप्स पूरे कर लिए हैं, तो यह आर्टिकल को मेरे ब्राउज़र में स्ट्रीम कर रहा है।
00:02:01और मेरे पास इसे कॉपी करके कहीं भी पेस्ट करने का विकल्प है। अब आप पहले ही देख सकते हैं कि
00:02:06Superpowers वाला वर्शन बिना Superpowers वाले वर्शन से बेहतर है। हम कोड को
00:02:10वीडियो में थोड़ा बाद में देखेंगे, लेकिन पहले आइए देखते हैं कि मैंने यह कैसे किया। तो Superpowers
00:02:15प्लगइन इंस्टॉल करने के बाद, अब हमारे पास कुछ नए स्लैश कमांड्स होने चाहिए जैसे brainstorm,
00:02:20execute plan, और write the plan, जो ब्रेनस्टॉर्म से प्लान लिखेगा। अब हमें वास्तव में केवल
00:02:25इस कमांड की ज़रूरत है क्योंकि Superpowers हमें पिछले स्टेज के अंत में अगले स्टेज पर ले जाएगा।
00:02:31तो चलिए इसे चलाते हैं और हम एक प्रॉम्प्ट पेस्ट करेंगे। हम एंटर दबाएंगे। और अब यह
00:02:35ब्रेनस्टॉर्मिंग स्किल को लोड करता है और मौजूदा प्रोजेक्ट को समझना शुरू करता है। और यहाँ यह मुझसे
00:02:39प्लान को और बेहतर बनाने के लिए कुछ सवाल पूछेगा। तो मैं कहूँगा React plus Vite, और फिर मैं कहूँगा
00:02:44आर्टिकल जनरेशन के लिए स्टेप-बाय-स्टेप। और अब इसने मुझसे आर्किटेक्चर के स्ट्रक्चर की पुष्टि करने को कहा है,
00:02:49जो मुझे लगता है कि ठीक है। यह लेआउट के बारे में भी पूछता है और फिर एंडपॉइंट और सर्वर लॉजिक के बारे में पूछता है।
00:02:54तो मेरे सभी सवालों के जवाब देने के बाद, यह एक प्लान बनाने के लिए आगे बढ़ता है, जिसे इसने
00:02:58अब इस डायरेक्टरी के अंदर रख दिया है। और अगर हम प्लान पर नज़र डालें, तो हम देख सकते हैं कि यह बहुत विस्तृत है,
00:03:03जिसमें ओवरव्यू, स्टैक, स्ट्रक्चर, साथ ही डिज़ाइन, लेआउट, API एंडपॉइंट्स और बहुत कुछ दिया गया है।
00:03:09वास्तव में, यह काफी हद तक वैसा ही है जैसा क्लॉड कोड हमें देता अगर वह अपना खुद का प्लान लिख रहा होता।
00:03:15लेकिन अगला स्टेप वह है जहाँ चीज़ें दिलचस्प हो जाती हैं। तो प्लान की पुष्टि करने और यह कहने के बाद कि मैं
00:03:19इम्प्लीमेंटेशन के लिए तैयार हूँ, यह आगे बढ़ता है और एक दूसरा इम्प्लीमेंटेशन प्लान लिखता है। यह पहले
00:03:25हमारे द्वारा बनाए गए ओरिजिनल डिज़ाइन प्लान को देखकर ऐसा करता है। और यह इसे छोटे, अधिक
00:03:31प्रबंधनीय कामों (tasks) में तोड़ देता है जिन्हें पैरेलल सब-एजेंट्स द्वारा पूरा किया जा सकता है। तो अब इसने एक और
00:03:36प्लान लिख दिया है और इसे फिर से plans डायरेक्टरी में सेव कर दिया है। और अगर हम उसे देखें, तो हम
00:03:41देख सकते हैं कि प्रोजेक्ट और आर्किटेक्चर का विस्तृत ओवरव्यू देने के बजाय, यह चीज़ों को टास्क में विभाजित करता है।
00:03:46तो हमारे पास प्रोजेक्ट को स्कैफोल्ड करने का एक टास्क यहाँ है और उन टास्क के अंदर कुछ स्टेप्स हैं।
00:03:52हमारे पास Vite और React क्लाइंट स्केलेटन बनाने का एक और टास्क है। और फिर से, इसमें कुछ स्टेप्स हैं और
00:03:57यह प्रोजेक्ट को पूरा करने के लिए ज़रूरी हर टास्क के साथ जारी रहता है। यहाँ से, Superpowers
00:04:03मुझसे एक एप्रोच चुनने के लिए कहता है। क्या मैं सब-एजेंट ड्रिवन एप्रोच चाहता हूँ या पैरेलल सेशन
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कोड को देखें, तो यह सर्वर और सोर्स में विभाजित है। मेरा मानना है कि सोर्स फ्रंट एंड या
00:05:16क्लाइंट है। हमारे पास यहाँ कुछ कंपोनेंट्स हैं। जैसे आर्टिकल टैब, डाउनलोड टैब, इत्यादि। अगर हम
00:05:21पाइपलाइन प्रोग्रेस को देखें, तो हमारे पास एक ऑब्जेक्ट, एक टाइपस्क्रिप्ट इंटरफ़ेस में स्टेजेस हैं। अब ऐसा लग रहा है कि यह
00:05:27स्टाइलिंग के लिए किसी प्रकार के CSS-in-JS का उपयोग कर रहा है। बाद में मुझे लगा कि मुझे Tailwind इस्तेमाल करने के लिए कहना चाहिए था,
00:05:32लेकिन यह भी ठीक है। और इसे देखिए। यह कुछ ऐसा है जो Opus प्लान मोड डिफ़ॉल्ट रूप से नहीं करेगा।
00:05:37आप देख सकते हैं कि हर कदम पर, Superpower ने प्रोजेक्ट को स्कैफोल्ड करने से लेकर
00:05:43CLI रैपर जोड़ने और Hono और इनके बीच की हर चीज़ जोड़ने तक के लिए एक Git कमिट किया है। तो अगर मैं
00:05:48Git स्टेटस चेक करूँ, तो मेरे पास कमिट करने के लिए कुछ नहीं है क्योंकि ब्रांच साफ़ है, जिससे मेरा काम बहुत कम हो गया है।
00:05:53अब आप इसे देख रहे होंगे और सोच रहे होंगे कि टेस्ट फाइलें कहाँ हैं? मैं इसके बारे में
00:05:57बाद में बात करूँगा। तो अगर मैं ईमानदारी से कहूँ, तो मुझे लगता है कि Superpowers एक प्रभावशाली प्रोजेक्ट है। मुझे यह बात पसंद है कि यह
00:06:02स्किल्स पर ध्यान केंद्रित करता है। मुझे लगता है कि इसमें 14 स्किल्स हैं, जो ब्रेनस्टॉर्मिंग से लेकर
00:06:08प्लानिंग, इम्प्लीमेंटिंग और बाद में कोड रिव्यु करने तक बहुत सारी अलग-अलग चीज़ें करती हैं। मुझे TDD पर इसका फोकस पसंद है,
00:06:12खासकर रेड-ग्रीन TDD, जहाँ यह पहले टेस्ट लिखता है। ताकि वे फेल हों, जिससे वे रेड हो जाते हैं और
00:06:18फिर उन्हें पास करने के लिए न्यूनतम कोड लिखता है। लेकिन कभी-कभी यह हमेशा काम नहीं करता क्योंकि एजेंट
00:06:24ऐसा न करने का विकल्प चुनता है। इसे देखिए। तो यहाँ हम देख सकते हैं कि राइटिंग प्लान स्किल ने स्पष्ट रूप से TDD कहा था।
00:06:31और किसी कारण से, क्लॉड ने ऐसा न करने का फैसला किया। मैंने उससे इसकी पुष्टि करने को कहा और उसने कहा, हाँ, यह मेरी गलती है।
00:06:36स्किल TDD कहती है और फिर भी मैंने इसे नहीं किया। और मैंने उससे पूछा, तुमने ऐसा क्यों नहीं किया? और फिर उसने कहा कि
00:06:42उसने प्रोसेस को फॉलो करने के बजाय जल्दी शिप करने पर ध्यान केंद्रित किया। मुझे ठीक से नहीं पता कि स्टेट-ऑफ-द-आर्ट मॉडल के साथ ऐसा क्यों हुआ,
00:06:47लेकिन यह सिर्फ यह दिखाता है कि आपको मॉडल जो कुछ भी करता है उसे आँख बंद करके स्वीकार नहीं करना चाहिए।
00:06:53प्लान को पढ़ना और यह सुनिश्चित करना महत्वपूर्ण है कि वह वैसा ही करे जैसा आप उससे उम्मीद करते हैं।
00:06:57यही एक कारण है कि मुझे नहीं लगता कि मैं अपने हर एक
00:07:03प्रोजेक्ट या फीचर रिक्वायरमेंट के लिए Superpowers का उपयोग करूँगा क्योंकि वे काफी छोटे होते हैं। और अगर मेरे पास कोई छोटा फीचर है
00:07:08जिसे मैं जोड़ना चाहता हूँ, तो मुझे इसकी प्लानिंग करने, प्लान डॉक्यूमेंट लिखने और फिर
00:07:13उस प्लान को एक्सीक्यूट करने के लिए कॉन्टेक्स्ट वाइप करने के लिए क्लॉड के साथ आगे-पीछे बात करने में खुशी होगी। लेकिन अगर मैं खुद को
00:07:19ऐसी स्थिति में पाता हूँ जहाँ मैं कई फीचर्स इम्प्लीमेंट कर रहा हूँ, जो समय-समय पर होता रहता है, तो Superpowers इस्तेमाल करने के लिए एक
00:07:24बेहतरीन टूल है क्योंकि यह जटिल रिक्वायरमेंट्स को ऐसे टुकड़ों में तोड़ने में बहुत अच्छा है
00:07:31जिन्हें सब-एजेंट्स द्वारा पूरा किया जा सकता है। और हाँ, क्लॉड कोड का टास्क फीचर भी ऐसा कर सकता है,
00:07:37लेकिन मुझे यह तथ्य पसंद है कि Superpowers कोड इम्प्लीमेंट करने के बजाय इसके लिए एक प्लान बनाता है।
00:07:43अब, Superpowers की तुलना Beads या SpecKit या पूरे
00:07:48स्पेक-ड्रिवन डेवलपमेंट आर्किटेक्चर से कैसे की जा सकती है? मेरे लिए, यह एक्सीक्यूट करने से पहले प्लानिंग करने का
00:07:53एक अधिक सरल वर्शन लगता है। ज़ाहिर है, राल्फ जितना सरल नहीं, लेकिन शायद राल्फ
00:07:58और बीड्स के बीच का कुछ। लेकिन मुझे ऐसा लगता है कि ऐसे और भी बहुत सारे टूल्स आ रहे हैं
00:08:02जो लोगों को उनके AI एजेंट के साथ बेहतर कोड लिखने में मदद कर रहे हैं। अब, यह एक अच्छी चीज़ है,
00:08:06लेकिन हर कोई अलग है। और मुझे लगता है कि थोड़ा यहाँ से और थोड़ा वहाँ से लेना अच्छा है,
00:08:10और अंत में अपना खुद का एक ऐसा वर्कफ्लो बनाना जो आपके लिए एकदम सही हो। तो शायद मैं भविष्य में
00:08:16ऐसा ही कुछ करूँ। और अगर आप भाग्यशाली रहे, तो मैं आपको यह दिखाने के लिए एक वीडियो बनाऊँगा कि मैंने इसे कैसे किया।

Key Takeaway

Superpowers प्लगइन Claude Code को एक व्यवस्थित वर्कफ्लो और सब-एजेंट्स की शक्ति प्रदान करता है, जिससे जटिल सॉफ्टवेयर विकास अधिक कुशल और त्रुटि-मुक्त हो जाता है।

Highlights

Superpowers एक एजेंटिक स्किल्स फ्रेमवर्क है जिसमें कोडिंग की गलतियों को कम करने के लिए 14 विशिष्ट स्किल्स शामिल हैं।

यह फ्रेमवर्क रेड-ग्रीन टेस्ट-ड्रिवन डेवलपमेंट (TDD) और पैरेलल सब-एजेंट्स का उपयोग करके जटिल कोडिंग कार्यों को सरल बनाता है।

वीडियो में Claude Code और Opus 4.6 के साथ Superpowers प्लगइन का उपयोग करके एक ट्विटर वीडियो डाउनलोडर और आर्टिकल जनरेटर बनाया गया है।

यह टूल ऑटोमैटिक रूप से Git कमिट करता है, जिससे डेवलपर का मैन्युअल काम काफी कम हो जाता है।

लेखक ने चेतावनी दी है कि AI मॉडल कभी-कभी TDD जैसे निर्देशों को अनदेखा कर सकते हैं, इसलिए मानवीय निगरानी आवश्यक है।

Timeline

Superpowers फ्रेमवर्क का परिचय

इस शुरुआती खंड में GitHub पर 50,000 से अधिक स्टार्स पाने वाले Superpowers फ्रेमवर्क का परिचय दिया गया है। यह एक एजेंटिक स्किल्स फ्रेमवर्क है जो कोडिंग एजेंटों को जल्दबाजी में गलतियाँ करने से रोकने के लिए डिज़ाइन किया गया है। यह ब्रेनस्टॉर्मिंग, इम्प्लीमेंटेशन और रेड-ग्रीन टेस्ट-ड्रिवन डेवलपमेंट जैसे चरणों का उपयोग करता है। वक्ता बताते हैं कि यह साधारण प्लान मोड से अलग है क्योंकि यह कार्यों को पैरेलल में पूरा करने के लिए सब-एजेंट्स का उपयोग करता है। यह टूल डेवलपर्स को एक स्ट्रक्चर्ड वर्कफ्लो के माध्यम से काम करने के लिए मजबूर करता है।

प्रोजेक्ट का प्रदर्शन: ट्विटर वीडियो डाउनलोडर

वक्ता XDL प्रोजेक्ट का उपयोग करके एक व्यावहारिक उदाहरण दिखाते हैं, जो ट्विटर वीडियो डाउनलोड करने का एक CLI टूल है। उन्होंने Claude Code के साथ Superpowers का उपयोग करके एक वेब UI बनाया जो न केवल वीडियो डाउनलोड करता है बल्कि आर्टिकल भी जनरेट करता है। तुलना करने पर पाया गया कि Superpowers वाला वर्शन डिज़ाइन और कार्यक्षमता में बिना प्लगइन वाले वर्शन से काफी बेहतर था। इसमें वीडियो को सीधे ब्राउज़र में डाउनलोड करने और मार्कडाउन फॉर्मेट में आर्टिकल स्ट्रीम करने की सुविधा है। यह सेक्शन दिखाता है कि कैसे प्लगइन के साथ आउटपुट की गुणवत्ता में काफी सुधार आता है।

प्लानिंग और ब्रेनस्टॉर्मिंग प्रक्रिया

यहाँ Superpowers के विभिन्न स्लैश कमांड्स जैसे brainstorm और execute plan के उपयोग को समझाया गया है। ब्रेनस्टॉर्मिंग के दौरान AI यूजर से आर्किटेक्चर, स्टैक और लेआउट के बारे में विशिष्ट प्रश्न पूछता है ताकि योजना सटीक बने। इसके बाद एक बहुत ही विस्तृत डिज़ाइन प्लान तैयार किया जाता है जिसमें API एंडपॉइंट्स और प्रोजेक्ट स्ट्रक्चर शामिल होता है। फिर इस मुख्य प्लान को छोटे और प्रबंधनीय टास्क में तोड़ दिया जाता है ताकि सब-एजेंट्स उन पर काम कर सकें। यह खंड कोडिंग शुरू करने से पहले एक ठोस आधार तैयार करने के महत्व पर जोर देता है।

इम्प्लीमेंटेशन और सब-एजेंट वर्कफ्लो

इस भाग में वक्ता सब-एजेंट ड्रिवन एप्रोच और पैरेलल सेशन के बीच चुनाव करने की प्रक्रिया का वर्णन करते हैं। चुने गए सब-एजेंट पहले फेल होने वाला टेस्ट (Red) लिखते हैं और फिर उसे पास करने के लिए न्यूनतम कोड (Green) लिखते हैं। पूरी प्रक्रिया के दौरान, Superpowers प्रत्येक छोटे बदलाव के लिए ऑटोमैटिक Git कमिट करता है ताकि प्रोजेक्ट की हिस्ट्री बनी रहे। अंत में, कोड को सर्वर और क्लाइंट कंपोनेंट्स में विभाजित किया जाता है और गुणवत्ता की जाँच की जाती है। यह सेक्शन दिखाता है कि कैसे स्वचालन विकास की गति को बढ़ा सकता है और डेवलपर का बोझ कम कर सकता है।

चुनौतियाँ, सीमाएँ और निष्कर्ष

अंतिम भाग में वक्ता उन समस्याओं पर चर्चा करते हैं जहाँ AI मॉडल निर्देशों का पालन नहीं करता है, जैसे TDD को छोड़ देना। वह बताते हैं कि AI के आउटपुट को आँख बंद करके स्वीकार नहीं करना चाहिए और प्लान को पढ़ना अनिवार्य है। Superpowers को बड़े और जटिल प्रोजेक्ट्स के लिए अधिक उपयोगी बताया गया है, जबकि छोटे फीचर्स के लिए यह थोड़ा भारी हो सकता है। अंत में, इसकी तुलना Beads और SpecKit जैसे अन्य टूल्स से की गई है। वक्ता सुझाव देते हैं कि प्रत्येक डेवलपर को अपनी ज़रूरत के हिसाब से अपना खुद का हाइब्रिड वर्कफ्लो बनाना चाहिए।

Community Posts

View all posts