वेब डेवलपमेंट लाइफ़साइकल के मौजूदा चरण के हिसाब से, मॉडर्न वेब गाइडेंस में बताई गई स्किल चुनें. इसमें शुरुआती स्टाइलिंग से लेकर सुरक्षा लागू करने तक की जानकारी शामिल है.
वेब की अहम स्किल
ऑर्केस्ट्रेटर की मदद से, वेब की अहम स्किल के हिसाब से अपने काम को बेहतर बनाएं और उस पर फ़ोकस करें.
accessibility
/modern-web-guidance accessibility
यह आपकी मुख्य ऑडिट गाइड के तौर पर काम करती है. इसकी मदद से, अपने पूरे ऐप्लिकेशन में सुलभता के पैटर्न का आकलन किया जा सकता है. साथ ही, उन्हें ठीक किया जा सकता है और लागू किया जा सकता है.
GitHub पर accessibility स्किल देखें
performance
/modern-web-guidance performance
इसकी मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को ऑप्टिमाइज़ किया जा सकता है. साथ ही, पेज लोड होने में लगने वाले समय को कम किया जा सकता है और उपयोगकर्ता के इनपुट पर मिलने वाले रिस्पॉन्स को बेहतर बनाया जा सकता है.
GitHub पर performance स्किल देखें
user-experience
/modern-web-guidance user-experience
यह आपके यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर काम करती है. इसकी मदद से, रिस्पॉन्सिव कस्टम एलिमेंट, स्मूद ट्रांज़िशन, और मॉडर्न स्टाइलिंग पैटर्न को तेज़ी से लागू किया जा सकता है.
GitHub पर user-experience स्किल देखें
वेब टेक्नोलॉजी
ये अहम स्किल, किसी भी मॉडर्न ऐप्लिकेशन के लिए ज़रूरी बिल्डिंग ब्लॉक उपलब्ध कराती हैं. इससे यह पक्का होता है कि आपका प्रोजेक्ट, सिमेंटिक एचटीएमएल, स्पीड, और इंटरऑपरेबिलिटी को ध्यान में रखते हुए, मॉडर्न सबसे सही तरीकों के साथ शुरू हो.
html
/modern-web-guidance html
मॉडर्न एचटीएमएल आर्किटेक्चर, सिमेंटिक्स, नेटिव इंटरैक्टिव एपीआई (डायलॉग, पॉपओवर, डीटेल), फ़ोकस मैनेजमेंट, और संसाधन प्राथमिकता के लिए, कार्रवाई पर फ़ोकस करने वाले दिशा-निर्देश. वेब दस्तावेज़ों को स्ट्रक्चर करते समय, नेटिव ओवरले लागू करते समय या संसाधन लोड करने के क्रम को ऑप्टिमाइज़ करते समय, इस गाइड का इस्तेमाल करें.
css
/modern-web-guidance css
मॉडर्न सीएसएस आर्किटेक्चर, लेआउट, और परफ़ॉर्मेंस के लिए, कार्रवाई पर फ़ोकस करने वाले दिशा-निर्देश. स्टाइल लिखने, डिज़ाइन सिस्टम मैनेज करने या वेब रेंडरिंग को ऑप्टिमाइज़ करने के दौरान, इस गाइड का इस्तेमाल करें.
css-layout
/modern-web-guidance css-layout
मॉडर्न सीएसएस लेआउट, जैसे कि फ़्लेक्सबॉक्स, ग्रिड, सबग्रिड, कंटेनर क्वेरी, ऐंकर पोज़िशनिंग, और इंट्रिंसिक साइज़िंग. रिस्पॉन्सिव यूआई कॉम्पोनेंट या पेज लेआउट डिज़ाइन करते समय, इस स्किल का इस्तेमाल करें.
GitHub पर css-layout स्किल देखें
forms
/modern-web-guidance forms
ज़्यादा सुलभ, सुरक्षित, और उपयोगकर्ता के लिए आसान वेब फ़ॉर्म बनाने के सबसे सही तरीके. फ़ॉर्म, इनपुट, और सबमिशन फ़्लो बनाते या उनमें बदलाव करते समय, इस गाइड का इस्तेमाल करें.
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
WebAssembly का इस्तेमाल करके, मॉडर्न वेब के लिए C और C++ को कंपाइल करना. C++ कोड पोर्ट करने, Emscripten के साथ C++ लाइब्रेरी बनाने या ब्राउज़र में हाई-परफ़ॉर्मेंस C++ कॉम्पोनेंट सेट अप करने के लिए, इस स्किल का इस्तेमाल करें.
GitHub पर cpp-on-the-web स्किल देखें
ब्राउज़र की सुविधाएं (ऑप्ट-इन)
इन स्किल की मदद से, Chrome एक्सटेंशन डेवलप किए जा सकते हैं. ये एक्सटेंशन, Manifest V3 जैसे मॉडर्न स्टैंडर्ड के मुताबिक होते हैं. साथ ही, इनसे Chrome Web Store पर पब्लिश करने की प्रोसेस को आसान बनाया जा सकता है. इसके लिए, मेटाडेटा, निजता नीतियां, और अनुमतियों की वजहें तैयार करने में मदद मिलती है. ये स्किल ऑप्ट-इन हैं. इन्हें डिफ़ॉल्ट रूप से चालू नहीं किया जाता.
chrome-extensions
/modern-web-guidance chrome-extensions
Manifest V3 के तहत सुरक्षित और नियमों के मुताबिक Chrome एक्सटेंशन बनाएं. इनमें सर्विस वर्कर लाइफ़साइकल और सैंडबॉक्सिंग से जुड़ी आम समस्याएं नहीं होती हैं. ऑप्ट-इन करने के लिए, आपको chrome-extensions स्किल के बारे में बताना होगा:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
GitHub पर chrome-extensions स्किल देखें
सुरक्षा, भरोसा, और पहचान
इन स्किल की मदद से, क्लाइंट-साइड के एक्सप्लॉइट से ऐप्लिकेशन को सुरक्षित रखकर, लोगों का भरोसा जीता जा सकता है. जैसे, XSS से सुरक्षा के लिए, डिफ़ेंसिव एचटीटीपी हेडर और ऑरिजिन आइसोलेशन का इस्तेमाल किया जाता है. डेवलपर, पासकी की मदद से पुष्टि करने के फ़्लो भी डेवलप कर सकते हैं. साथ ही, तीसरे पक्ष की ट्रैकिंग को कम किया जा सकता है. इसके अलावा, C/C++ लाइब्रेरी को WebAssembly मॉड्यूल में पोर्ट करने के लिए, स्किल का इस्तेमाल किया जा सकता है.
security
/modern-web-guidance security
वेब डेवलपर के लिए, सुरक्षा से जुड़े दिशा-निर्देश (XSS, CSP, कुकी, क्रॉस-ऑरिजिन आइसोलेशन). सुरक्षा नीतियों का ऑडिट करने, उन्हें टेस्ट करने, और सुरक्षित तरीके से डिप्लॉय करने की प्रोसेस के लिए, इस स्किल का इस्तेमाल करें.
GitHub पर security स्किल देखें
passkeys
/modern-web-guidance passkeys
वेब ऐप्लिकेशन में WebAuthn और पासकी लागू करने के लिए, पूरी जानकारी और क्रॉस-कटिंग सिद्धांत. पासकी के रजिस्ट्रेशन, पुष्टि, मैनेजमेंट या फिर से पुष्टि करने के दौरान, इस गाइड का इस्तेमाल करें.
GitHub पर passkeys स्किल देखें
privacy
/modern-web-guidance privacy
वेब डेवलपर के लिए, कार्रवाई पर फ़ोकस करने वाले दिशा-निर्देश. इनकी मदद से, डिज़ाइन के हिसाब से निजता, डेटा मिनिमाइज़ेशन, तीसरे पक्ष के ऑडिट, और डेटा को सुरक्षित तरीके से मैनेज किया जा सकता है. ऐप्लिकेशन डिज़ाइन करने, तीसरे पक्ष की सेवाओं को इंटिग्रेट करने, उपयोगकर्ता डेटा मैनेज करने या सुरक्षा हेडर कॉन्फ़िगर करने के दौरान, इस स्किल का इस्तेमाल करें.
एजेंट की तरह काम करने वाले सिस्टम
इन स्किल की मदद से, WebMCP का इस्तेमाल करके, अपने वेब ऐप्लिकेशन और एआई वर्कफ़्लो के बीच के अंतर को कम किया जा सकता है. क्लाइंट-साइड के ब्राउज़र फ़ंक्शन को इंटरैक्टिव टूल के तौर पर दिखाने से, एआई एजेंट को ऐप्लिकेशन की सुविधाओं के साथ सीधे इंटरैक्ट करने के निर्देश दिए जा सकते हैं.
webmcp
/modern-web-guidance webmcp
WebMCP लागू करें, ताकि क्लाइंट-साइड के ब्राउज़र फ़ंक्शन को एआई एजेंट के लिए इंटरैक्टिव टूल के तौर पर दिखाया जा सके.
अगले चरण
अब आपको मॉडर्न वेब गाइडेंस के बारे में पता चल गया है, तो इसे आज़माएं! मॉडर्न वेब गाइडेंस में काम करने वाली सुविधाओं और इस्तेमाल के उदाहरणों के बारे में जानें. साथ ही, शुरू करने के लिए कुछ सैंपल प्रॉम्प्ट आज़माएं.