मॉडर्न वेब गाइडेंस की मदद से बनाना

मॉडर्न वेब गाइडेंस, हमेशा काम आने वाली और विशेषज्ञों की ओर से जांच की गई स्किल्स का एक सेट है. यह कोडिंग करने वाले आपके एआई एजेंट को, इस्तेमाल के कई सामान्य उदाहरणों के बारे में बताता है. इससे मॉडर्न वेब अनुभव तैयार किए जा सकते हैं. ये अनुभव, ऐक्सेस किए जा सकते हैं, बेहतर परफ़ॉर्म करते हैं, और सुरक्षित होते हैं.

modern-web-guidance सीएलआई की मदद से इंस्टॉल करें (सुझाया गया):

npx modern-web-guidance@latest install
शुरू करना GitHub पर देखें

आपके पसंदीदा एआई कोडिंग एजेंट के साथ काम करता है

मॉडर्न वेब गाइडेंस को अपने पसंदीदा एआई कोडिंग एजेंट के साथ इस्तेमाल किया जा सकता है. इससे यह पक्का किया जा सकता है कि आपको अपने पसंदीदा वर्कफ़्लो में, मॉडर्न वेब के सबसे सही तरीकों के बारे में दिशा-निर्देशों का ऐक्सेस मिले.
इंस्टॉल करने के सभी विकल्प देखना

Vercel की एजेंट स्किल का इस्तेमाल करके, अपने प्रोजेक्ट में Modern Web Guidance इंस्टॉल करें:

npx skills add GoogleChrome/modern-web-guidance

Claude Code के लिए, Modern Web Guidance की सुविधाएं इंस्टॉल करें:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome
# 3. Reload plugins
/reload-plugins

Copilot CLI के लिए, मॉडर्न वेब गाइडेंस स्किल इंस्टॉल करें:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Antigravity सीएलआई में, मॉडर्न वेब गाइडेंस की Skills इंस्टॉल करना:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

बेहतर उपयोगकर्ता अनुभव के लिए प्रॉम्प्ट

एआई की मदद से कोडिंग करने के वर्कफ़्लो में, वेब से जुड़ी आधुनिक गाइडेंस पाने के लिए, यहाँ दिए गए कुछ सैंपल प्रॉम्प्ट आज़माएँ. इससे नई सुविधाएँ बनाने, लेगसी कोड को मॉडर्न बनाने, और अपने ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलेगी. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.

लेगसी कोड को अप-टू-डेट बनाना 

Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
 
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.

सुरक्षा को बेहतर बनाना 

Implement a passkey-based login flow using the latest WebAuthn features.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
वेब डेवलपमेंट के वर्कफ़्लो को बेहतर बनाने के लिए, एजेंट के लिए Chrome DevTools को मॉडर्न वेब गाइडेंस की सुविधाओं के साथ इस्तेमाल करें. रीयल-टाइम परफ़ॉर्मेंस ऑडिट चलाएं, ऐक्सेसिबिलिटी ट्री की जांच करें, और कंसोल लॉग कैप्चर करें. इसके बाद, वेब कोड से जुड़ी आधुनिक समस्याओं को ठीक करने के लिए, सटीक तरीके से अपने-आप लागू होने वाले सुधारों का इस्तेमाल करें.
ज़्यादा जानें

योगदान करने का तरीका जानें

क्या आपके पास मॉडर्न वेब गाइडेंस को बेहतर बनाने के लिए कोई सुझाव है? योगदान देने का तरीका जानें!
ज़्यादा जानें