स्थानीयकृत पठन मार्गदर्शिका
web-artifacts-builderउद्देश्य, उपयोग और स्रोत
आधुनिक फ्रंटएंड वेब तकनीकों (रिएक्ट, टेलविंड सीएसएस) का उपयोग करके विस्तृत, बहु-घटक क्लाउड.एआई एचटीएमएल आर्टिफैक्ट बनाने के लिए टूल का सूट।shadcn/uiइसका उपयोग उन जटिल कलाकृतियों के लिए किया जाता है जिनमें स्थिति प्रबंधन, रूटिंग याshadcn/uiघटक - सरल एकल-फ़ाइल के लिए नहींHTML/JSXकलाकृतियाँ।
स्रोत प्राप्त किया गया:
- स्रोत रिपॉज़िटरी
- anthropics/skills
- SKILL.md
skills/web-artifacts-builder/SKILL.md- रिपॉज़िटरी Star
- 185,373
- रिपॉज़िटरी का अंतिम अपडेट
- 2026-10-29
- क्षमता वर्गीकरण
- विकास
- अंतिम संग्रह समय
लाइसेंस: लाइसेंस दस्तावेजों का सत्यापन लंबित है
वर्कफ़्लो के अंश केवल पढ़ने में सहायता के लिए हैं, कोडेज़ से निष्पादन योग्य निर्देश नहीं हैं। इस पृष्ठ को बनाने के लिए किसी तृतीय-पक्ष स्किल का उपयोग नहीं किया गया है।
नीचे दिए गए उद्देश्य और कार्यप्रणाली संबंधी अंश प्रारंभिक सामग्री हैं, जिन्हें पढ़ने के लिए व्यवस्थित और अनुवादित किया गया है। ये अलग से लेबल किए गए कोडेज़ संपादकीय विश्लेषण से भिन्न हैं।
यह कौशल क्या करता है
आधुनिक फ्रंटएंड वेब तकनीकों (रिएक्ट, टेलविंड सीएसएस) का उपयोग करके विस्तृत, बहु-घटक क्लाउड.एआई एचटीएमएल आर्टिफैक्ट बनाने के लिए टूल का सूट।shadcn/uiइसका उपयोग उन जटिल कलाकृतियों के लिए किया जाता है जिनमें स्थिति प्रबंधन, रूटिंग याshadcn/uiघटक - सरल एकल-फ़ाइल के लिए नहींHTML/JSXकलाकृतियाँ।
अपस्ट्रीम वर्कफ़्लो कैसे काम करता है
कदम1प्रोजेक्ट प्रारंभ करें
नया React प्रोजेक्ट बनाने के लिए इनिशियलाइज़ेशन स्क्रिप्ट चलाएँ: इससे एक पूरी तरह से कॉन्फ़िगर किया गया प्रोजेक्ट तैयार हो जाएगा जिसमें ये शामिल होंगे: ✅ React + TypeScript (Vite के माध्यम से) ✅ Tailwind CSS3.4.1साथshadcn/uiथीमिंग सिस्टम
ऊपर की ओर मार्ग · L24 ↗कदम2अपनी कलाकृति विकसित करें
आर्टिफैक्ट बनाने के लिए, जेनरेट की गई फ़ाइलों को संपादित करें। मार्गदर्शन के लिए नीचे दिए गए सामान्य विकास कार्यों को देखें।
ऊपर की ओर मार्ग · L41 ↗कदम3: बंडल को एक ही HTML फ़ाइल में बदलें
React ऐप को एक ही HTML आर्टिफैक्ट में बंडल करने के लिए: इससे यह बनता हैbundle.html- एक स्व-निहित आर्टिफैक्ट जिसमें सभी जावास्क्रिप्ट, सीएसएस और निर्भरताएँ शामिल हैं। इस फ़ाइल को क्लाउड वार्तालापों में सीधे एक आर्टिफैक्ट के रूप में साझा किया जा सकता है। आवश्यकताएँ: आपके प्रोजेक्ट में एक होना चाहिएindex.htmlरूट डायरेक्टरी में। स्क्रिप्ट क्या करती है:
bash scripts/init-artifact.sh <project-name>
cd <project-name>आवश्यकताएँ और सेटअप
इस फ़ाइल से कोई संक्षिप्त आवश्यकताएँ नहीं चुनी गईं। इसका मतलब यह नहीं है कि स्किल की कोई निर्भरता नहीं है। रिपॉजिटरी सेटअप निर्देशों और संदर्भित फ़ाइलों की जाँच करें।
सीमाएं और गुणवत्ता जांच
इस फ़ाइल से कोई अलग सीमा अंश नहीं चुना गया है। इसका मतलब यह नहीं है कि यह स्किल हर इनपुट या वातावरण के लिए सुरक्षित है। संपूर्ण स्रोत की समीक्षा करें और अपने परिणाम की पुष्टि करें।
सुरक्षित परीक्षण से शुरुआत करें
- समर्थित होस्ट और रिपॉजिटरी इंस्टॉलेशन निर्देशों की जाँच करें। स्किल डायरेक्टरी और उससे संबंधित स्क्रिप्ट, एसेट्स और डॉक्यूमेंटेशन को एक साथ रखें;SKILL.mdअकेले होने पर निर्भरताओं को छोड़ा जा सकता है।
- एजेंट को अपना वास्तविक इनपुट, अपेक्षित आउटपुट और स्वीकृति मानदंड प्रदान करें। इनवोकेशन सिंटैक्स और उपलब्ध उपकरण होस्ट पर निर्भर करते हैं; यह साइट किसी सार्वभौमिक इंस्टॉलेशन कमांड को नहीं मानती है।
- डिस्पोजेबल प्रोजेक्ट या उसकी कॉपी पर मूल वर्कफ़्लो को आज़माएँ। फ़ाइलों, रिमोट सेवाओं या बिल योग्य संसाधनों में परिवर्तन करने वाले कार्यों की अनुमति देने से पहले उनकी समीक्षा करें।
- स्रोत गुणवत्ता जांच और अपनी आवश्यकताओं के आधार पर आउटपुट को सत्यापित करें। सफल ट्रिगर या उच्च रिपॉजिटरी स्टार संख्या सही परिणाम की गारंटी नहीं देते।
मूल लेख में आगे पढ़ें
सम्बंधित योग्यता
अनुवाद और दायरा
यह पठन मार्गदर्शिका ऊपर पिन किए गए अंशों में से चयनित अंशों को प्रस्तुत करती है।SKILL.mdयह अनुवाद सहायता से किया गया है। यह कोई संपूर्ण नियमावली या परीक्षित संगतता का दावा नहीं है। उपयोग करने से पहले मूल दस्तावेज़ और उससे संबंधित फ़ाइलों को पढ़ें।
यह परिचय नीचे पिन किए गए संस्करण को संदर्भित करता है; वर्तमान रिपॉजिटरी गतिविधि और संग्रह समय अलग से दिखाए गए हैं।
- पिन किया गया स्रोत
- मूल लेख पढ़ें ↗
- स्रोत प्राप्त किया गया
- स्रोत कमिट
ca45fc496a3436251f191354091d557da31c15b5- स्रोत SHA-256
81c5002c6643b0de7b8710b00e7a9038daa6fb9b68d59870ee6adb12da8d10f8