스크립트
00:00:00ShadCN ने हाल ही में Tailwind की सबसे बड़ी समस्या को हल करने के लिए एक लिंटर जारी किया है,
00:00:04और वह है डिज़ाइन सिस्टम। AI एजेंट्स के आने के बाद से, Tailwind के पास इसे लागू करने का कोई बेहतरीन तरीका नहीं था,
00:00:09इसलिए आपने ध्यान दिया होगा कि AI कभी-कभी अपनी खुद की स्टाइल जोड़ देता है जहाँ आप नहीं चाहते थे।
00:00:13यही एक बड़ा कारण है कि लोग StarLex जैसे विकल्पों की ओर बढ़े हैं,
00:00:17लेकिन अब ShadCN के पास इसका समाधान है। यह Tailwind डिज़ाइन सिस्टम
00:00:21के लिए बना एक एजेंट-फर्स्ट लिंटर है, तो चलिए सीधे देखते हैं कि यह क्या करता है।
00:00:29चलिए सबसे पहले बात करते हैं कि यह लिंटर वास्तव में करता क्या है। Tailwind में, एक क्लास नेम एक स्ट्रिंग हो सकता है,
00:00:34TypeScript इसके आगे कुछ भी लागू नहीं करता है, और इसका मतलब है कि आप किसी बटन पर
00:00:38पैडिंग ओवरराइड लगा सकते हैं जो खुद की पैडिंग को कंट्रोल करता है। आप कोई रैंडम रंग भी जोड़ सकते हैं जैसे background
00:00:43pink 500 ऐसे कंपोनेंट में जो पहले से ही किसी थीम वाले रंग का उपयोग कर रहा है, या बस पैडिंग की मनमानी मात्रा इस्तेमाल कर सकते हैं
00:00:48जैसे 13 पिक्सल, जबकि आपके डिज़ाइन सिस्टम में पहले से ही 12 से 16 तक जाने वाला स्पेसिंग स्केल मौजूद है।
00:00:53फिलहाल, इनमें से कोई भी आपके कोडबेस में कोई एरर पैदा नहीं करेगा, और वे केवल तभी पकड़े जाएँगे
00:00:58आपके खुद कोड की समीक्षा करने पर, या किसी मार्कडाउन फ़ाइल में ढेर सारे नियम जोड़ने पर जिन्हें कोई दूसरा
00:01:02कोई दूसरा एजेंट आपके लिए कर सके। लेकिन मार्कडाउन चीज़ों को लागू करने में उतना अच्छा नहीं है। यह लिंटर की तरह
00:01:07उतना सख्त नहीं है। ShadCN ने असल में इस पर डेटा जुटाया। उन्होंने 8 ऐसे टास्क सेट किए जो एजेंट को
00:01:12सिस्टम से बाहर जाने के लिए उकसाते हैं
00:01:16पिल कॉर्नर के साथ, इस मॉक से बिल्कुल मेल खाता हुआ एक स्टैट्स कार्ड बनाएं, 13 पिक्सल पैडिंग, 10 पिक्सल बॉर्डर
00:01:22रेडियस, या प्राइसिंग कार्ड को वाकई पॉप बनाएं ताकि यह अलग दिखे।” आप यहाँ देख सकते हैं कि हर एक
00:01:27मॉडल ने इन टास्क को चलाते समय डिज़ाइन सिस्टम के बहुत सारे उल्लंघन किए, लेकिन जब उन्होंने
00:01:31लिंटर का उपयोग किया, तो यह घटकर शून्य हो गया। तो अब जब हम जानते हैं कि लिंटर वास्तव में काम करता है, तो हम इसका उपयोग कैसे करें?
00:01:36खैर, यह Oxlint या ESLint के लिए एक प्लगइन है, और यह किसी भी Tailwind V4 प्रोजेक्ट पर काम करेगा। आपको
00:01:41ShadCN UI का उपयोग करने की आवश्यकता नहीं है। हम “no restyle, but allowing layout” नाम के एक नियम से शुरुआत कर सकते हैं। और इसका
00:01:47अनिवार्य रूप से मतलब है कि पेजों को मार्जिन, विड्थ, फ्लेक्स,
00:01:51और हिडन जैसी चीजों के साथ एक कंपोनेंट रखने की अनुमति है, लेकिन वे उन्हें फिर से स्टाइल नहीं कर सकते। इसलिए वे पैडिंग, रंग, टाइपोग्राफी,
00:01:56शेप, इफेक्ट्स या मोशन नहीं जोड़ सकते। यदि वे ऐसा करते हैं, तो यह इस तरह का एक एरर देगा। “बटन पर P4 की अनुमति नहीं है,
00:02:02बटन अपनी स्पेसिंग का खुद मालिक है, यहाँ साइज़ डिफ़ॉल्ट या मार्जिन का उपयोग करें, या इसके आसपास स्पेस के लिए पैरेंट पर गैप का उपयोग करें।”
00:02:07कंपोनेंट में केवल तभी साइज़ जोड़ें जब डिज़ाइन सिस्टम स्पष्ट रूप से इसके लिए कहे।
00:02:11इन एरर मैसेज के बारे में अच्छी बात यह है कि साइज़ लिस्ट जैसी चीज़ वास्तव में
00:02:15लिंटर द्वारा परिभाषित नहीं की गई है। यह वास्तव में बटन कंपोनेंट में ही मेरे CVA सेटअप को पढ़ रहा है।
00:02:19इसलिए यदि मैंने एक अतिरिक्त साइज़ जोड़ा होता, तो एरर उसे एक विकल्प के रूप में पकड़ लेती। यही बात मूल रूप से
00:02:24किसी भी Tailwind फीचर पर लागू होती है जो रीस्टाइल कर सकती है। इसलिए यदि हम यहाँ कोई रंग जोड़ने की कोशिश करते हैं, तो यह हमें बताएगा कि हम केवल
00:02:29उसी का उपयोग कर सकते हैं जो कंपोनेंट में परिभाषित है। और ज़ाहिर है इसका लाभ यह है कि आपको बहुत अच्छे
00:02:33एरर मैसेज मिलते हैं, और एक एजेंट उन्हें पढ़ सकता है और समझ सकता है कि उन्हें कैसे ठीक किया जाए। यह वास्तव में आपको
00:02:37टोकन उपयोग पर भी बचा सकता है, क्योंकि इसे यह समझने के लिए आपकी पूरी डिज़ाइन मार्कडाउन फ़ाइल लोड नहीं करनी पड़ती
00:02:41कि क्या सही है। लिंटर बस इसे एक बहुत ही विशिष्ट सुराग दे सकता है।
00:02:45अब यह हमारे सबसे पहले नियम, no restyle का बुनियादी उपयोग है, लेकिन इसे आपके डिज़ाइन सिस्टम
00:02:50के अनुकूल बनाने के लिए बहुत सारे कस्टमाइज़ेशन विकल्प हैं, लेकिन हम एक मिनट में उस पर वापस आएंगे। पहले आइए
00:02:54अन्य पांच नियमों पर एक नज़र डालते हैं, क्योंकि वास्तव में कुल छह नियम हैं। “No raw colors” एक ऐसा नियम है
00:02:58जो आपको background pink 500 जैसी चीज़ें टाइप करने से रोकता है, या ऐसे रंग का उपयोग करने से जो मौजूद नहीं है या जिसकी
00:03:03स्पेलिंग गलत है। यह वही होना चाहिए जो किसी थीम में डिज़ाइन किया गया था, और फिर से यह एजेंट की मदद करेगा
00:03:08उन्हें सीधे बताकर कि क्या अनुमति है। यह SVGs पर भी काम करता है, इसलिए यदि आप पाथ पर हार्डकोडेड फिल का उपयोग करने का प्रयास करते हैं,
00:03:13तो आपको एरर मिलती है कि टेक्स्ट कलर क्लास के साथ current color का उपयोग करें। अगला हमारे पास “no
00:03:18arbitrary values” है, यह वही करता है जो यह कहता है। स्क्वायर ब्रैकेट में 13 पिक्सल विड्थ की पैडिंग जैसी चीज़,
00:03:24हार्डकोड हो जाती है और टोकन मान से बाहर हो जाती है, इसके बजाय p3.25 का उपयोग करें, यह स्केल पर समान मान है।
00:03:30या उन स्क्वायर ब्रैकेट में rounded 10px जैसी चीज़ की जगह rounded-lg का उपयोग किया जाता है,
00:03:35क्योंकि यह वास्तव में मेरे रेडियस टोकन को पढ़ सकता है और जान सकता है कि यही मान 10 पिक्सल के बराबर है।
00:03:40आपके डिज़ाइन सिस्टम को वास्तव में समझने वाले इस नियम के सबसे बेहतरीन उदाहरणों में से एक यह है कि यदि आप
00:03:44कोई रैंडम बैकग्राउंड रंग सेट करने का प्रयास करते हैं, तो एरर वास्तव में आपको बताती है कि निकटतम थीम टोकन क्या है,
00:03:49जो आपके एजेंट के पास होने के लिए बहुत अच्छा कॉन्टेक्स्ट है। बाकी नियम काफी स्व-स्पष्ट हैं।
00:03:54इनलाइन स्टाइल को रोकने के लिए एक नियम है, अज्ञात क्लासेस का उपयोग रोकने के लिए एक और,
00:03:57और स्टैटिक क्लासेस को लागू करने के लिए एक नियम। यह दिलचस्प है क्योंकि लिंटर वास्तव में देख नहीं सकता
00:04:02कि यह क्लास क्या होने वाली है, क्योंकि यह उस टेम्प्लेट लिटरल में एक डायनेमिक है,
00:04:06इसलिए यह नियम आपको इन्हें संभालने के तरीके को बदलने के लिए प्रोत्साहित करता है,
00:04:09ताकि लिंटर अभी भी अपना काम प्रभावी ढंग से कर सके। हालाँकि ये हमारे छह लिंटर नियम हैं,
00:04:13लेकिन जैसा कि पहले उल्लेख किया गया है, इसे वास्तव में आपके डिज़ाइन सिस्टम के अनुकूल बनाने के लिए
00:04:16बहुत सारी कस्टमाइज़ेशन क्षमता है। यहीं पर आप कॉन्ट्रैक्ट्स का उपयोग करेंगे। ये प्रति कंपोनेंट नियम हैं
00:04:21जो कंपोनेंट के नाम पर एक regex द्वारा मेल खाते हैं, इसलिए इस उदाहरण में मैंने कहा है कि हम एक कार्ड
00:04:25टाइटिल की टाइपोग्राफी बदल सकते हैं, लेकिन इसकी फ़ॉन्ट फ़ैमिली या वेट नहीं, और कार्ड कंटेंट स्पेसिंग बदल सकता है,
00:04:30लेकिन टाइपोग्राफी नहीं। तो अब इस टाइटल पर text-large बिना किसी एरर के पास हो जाता है, और कंटेंट पर
00:04:36padding-6 पास हो जाता है, लेकिन टाइटल का वेट बदलने की कोशिश करने पर भी हमें उम्मीद के मुताबिक एरर मिलती है।
00:04:41इन सेटिंग्स में एक और बढ़िया विकल्प कस्टम मैसेज हैं। प्रत्येक नियम और नियम का प्रकार प्लेसहोल्डर्स के साथ एक
00:04:45मैसेज लेता है जो आपके वास्तविक कोड से भरे जाते हैं, इसलिए यहाँ मेरे बटन कॉन्ट्रैक्ट पर,
00:04:50मैंने मैसेज सेट किया है कि लेआउट के लिए पैरेंट कंटेनर पर विड्थ सेट करें, बटन पर नहीं, और यह भी
00:04:55कि बटन अपनी पैडिंग का मालिक है, साइज़ के लिए टेम्पलेट के साथ बटन साइज़ का उपयोग करें। वे मेरे लिए
00:04:59मेरे अपने डिज़ाइन सिस्टम से भर दिए जाएंगे। आप एक ग्लोबल नोट भी सेट कर सकते हैं, ताकि हर एरर में अंत में यह
00:05:04मैसेज अटैच रहे। एजेंट को कुछ अतिरिक्त हिंट या कॉन्टेक्स्ट देने के लिए यह उपयोगी है,
00:05:08शायद उसे यह बताना कि आपके डॉक्यूमेंटेशन या गाइडलाइंस कहाँ हैं। यदि आपके पास पहले से ही एक डिज़ाइन
00:05:12सिस्टम मौजूद है, तो इस लिंटर का उपयोग शुरू करने में थोड़ा सा अतिरिक्त काम
00:05:16लग सकता है, क्योंकि आपको इसे अपने डिज़ाइन सिस्टम के लिए कॉन्फ़िगर करना होगा, लेकिन यह इतना फ्लेक्सिबल लगता है कि यह
00:05:20अधिकांश डिज़ाइन सिस्टम्स को संभाल सकता है, और मुझे यकीन है कि एक AI एजेंट आपको शुरुआत करने में मदद कर सकता है। अंतिम चीज़ जिसके बारे में
00:05:25मैं बात करना चाहता हूँ वह यह है कि यह लिंटर क्या नहीं कर सकता। यह प्लेन CSS को नहीं देख सकता, इसलिए यदि आपके पास आपकी
00:05:30ग्लोबल CSS फ़ाइल में एक रॉ कलर या एक apply है, तो यह इसके आसपास नियमों को लागू नहीं कर सकता। यह पैरेंट सेलेक्टर को
00:05:36चाइल्ड तक ट्रैक भी नहीं कर सकता, केवल एक फ़ाइल के भीतर एक हॉप के लिए क्लास वैल्यूज़ का पालन करता है, और परिभाषा के अनुसार एक बिल्कुल नया थीम टोकन
00:05:40सिस्टम पर है, इसलिए एक एजेंट जो वास्तव में नियम से बचने के लिए आपके डिज़ाइन सिस्टम में कलर हॉपर जोड़ता है,
00:05:46वह अभी भी पास हो जाएगा। इसका मतलब यह है कि आपको अभी भी टोकन और उन
00:05:50वेरिएंट्स की समीक्षा करने की आवश्यकता है जो एजेंट जोड़ रहा है। लिंटर केवल नियमों की जांच कर सकता है, यह तय नहीं कर सकता कि एक
00:05:54नया ऑरेंज रंग वास्तव में आपके डिज़ाइन सिस्टम से संबंधित है या नहीं। जांच करना अभी भी आप पर निर्भर है, लेकिन उम्मीद है कि इस
00:05:59लिंटर को उस अतिरिक्त काम में से कुछ को कम करना चाहिए। यदि आप इसका उपयोग करने पर विचार कर रहे हैं
00:06:03तो सोचने वाली एक और बात यह है कि क्या आपका कंपोनेंट API वास्तव में इसके खिलाफ लागू करने के लिए पर्याप्त सख्त है? यदि आपका बटन
00:06:08बस कोई भी क्लास नेम लेता है और उसका कोई वेरिएंट नहीं है, तो इस लिंटर के सुझाव देने के लिए कुछ भी नहीं है।
00:06:13इसलिए शर्त यह है कि आपके पास वास्तव में एक डिज़ाइन सिस्टम हो और आप वास्तविक वेरिएंट का उपयोग करें,
00:06:18जो सच कहें तो, यदि आप ShadCN UI का उपयोग कर रहे हैं, तो आपके पास पहले से ही है, इसलिए अधिकांश लोग शायद
00:06:22ठीक रहेंगे। अंतिम नुकसान यह है कि अभी के लिए यह केवल Oxlint और ESLint में उपलब्ध है, इसके लिए
00:06:27अभी तक कोई Biome प्लगइन नहीं है, लेकिन यह GitHub पर एक खुला इश्यू है, इसलिए उम्मीद है कि हम इसे जल्द ही देखेंगे।
00:06:31तो यह है नया ShadCN Linter, यह छह नियम हैं जो आपको अपने डिज़ाइन सिस्टम को लागू करने में मदद करते हैं,
00:06:36जो ऐसे युग में वास्तव में मददगार है जहाँ AI अधिकांश कोड लिख रहा है। मुझे यह जानने की उत्सुकता है कि क्या यह उन समस्याओं में से किसी को हल करता है
00:06:41जिनका आपने सामना किया है, या यदि आप अभी भी StarLX जैसी किसी चीज़ पर स्विच करने पर विचार कर रहे हैं,
00:06:45मुझे नीचे कमेंट्स में बताएं, या फिर सब्सक्राइब करें, और हमेशा की तरह, अगले वीडियो में मिलते हैं।
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기