Install
scripts/init-artifact.shلمن يناسب
استخدم web-artifacts-builder عندما تصنع artifact HTML لـ claude.ai معقّدًا ومتعدد المكوّنات وتحتاج إدارة حالة أو توجيهًا أو مكوّنات shadcn/ui. المكدس هو React و Tailwind CSS و shadcn/ui. لا تستخدمه لـ artifact HTML/JSX بسيط من ملف واحد.
الفرضية الأنسب: أن تقبل React 18 + TypeScript + Vite + Parcel (الحزم) + Tailwind CSS + shadcn/ui. يذكر الملخص أيضًا التوافق مع Node 18+. لا تقدم المادة قائمة بمنتجات وكلاء. صفحة الدليل الرسمية هي
https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
أكمل أول محاولة في 3 دقائق
الأمر الأول الموصى به هو سكربت التهيئة؛ لا تخترع مسار تحميل آخر:
scripts/init-artifact.sh
يولّد هذا الأمر مستودع واجهة أمامية، فهو يكتب إلى القرص. أكّد أن الدليل الحالي يجوز تهيئته ثم نفّذ. إشارة النجاح: وُلِّد رمز واجهة قابل للتحرير. لا تهيئ دون تأكيد الدليل.
بعد التهيئة لا تحزم بعد. بعد ذلك حرّر الرمز المولَّد ليصبح واجهتك متعددة المكوّنات. في الأسلوب تجنّب «AI slop» الذي تسمّيه المادة: لا تخطيط مفرط التوسيط، ولا تدرجات بنفسجية، ولا زوايا مستديرة موحّدة، ولا خط Inter. هذا قيد تصميم قابل للعكس؛ قبل تغيير الأنماط انظر الملفات المولَّدة وتأكد أنك لن تستبدل البنية التي كتبتها للتو.
إن أردت فقط التحقق من مطابقة المكدس يمكنك التوقف عند هذا الفحص: تابع فقط إن احتجت حالة أو توجيهًا أو shadcn/ui؛ إن كان الهدف HTML بملف واحد توقف هنا ولا تنفّذ init.
حالات الاستخدام
الحالة الأولى: التهيئة وتعديل واجهة ذات حالة. أولاً scripts/init-artifact.sh ثم حرّر الرمز المولَّد. معيار الإكمال: أُنشئ المستودع وغيّرت ملفات مولَّدة، لا أنك بدأت سقالة غير مسمّاة. الخطوة الرابعة هي العرض على المستخدم، لكن المقتطف لا يكتب أمر عرض فلا تخترع معاينًا. قبل العرض افتح الصفحة المولَّدة محليًا وأكّد.
الحالة الثانية: حزم المشروع في ملف واحد قابل للمشاركة. الأمر هو scripts/bundle-artifact.sh. يولّد bundle.html ويدمج JavaScript و CSS والتبعيات، جاهزًا للمشاركة كـ artifact في محادثة Claude. الشرط: يجب أن يحتوي جذر المشروع على index.html. هذه كتابة إلى القرص: أكّد مسار bundle.html الذي سيُستبدل ثم احزم. معيار الإكمال: يظهر bundle.html مكتفٍ ذاتيًا في الجذر. إن نقص index.html لا تفترض أن السكربت سينشئه نيابة عنك.
حدود الاستخدام
فقط للـ artifacts المعقّدة متعددة المكوّنات التي تحتاج حالة/توجيه/shadcn/ui، لا لـ HTML/JSX البسيط بملف واحد. المكدس ثابت: React 18 و TypeScript و Vite و Parcel و Tailwind و shadcn/ui. ناتج الحزم هو bundle.html ويجب أن يحتوي الجذر على index.html. تجنّب التوسيط المفرط والتدرجات البنفسجية والزوايا الموحّدة و Inter.
لا تخترع مسار تثبيت خارج init و bundle. لا تعطي المادة قائمة عملاء ولا أي أمر يجب أن ينتقل إليه الملف البسيط. قبل استبدال bundle.html أو التهيئة في دليل غير فارغ أكّد الآثار الجانبية. ما يتجاوز هذه الخطوات الأربع ومحظورات الأسلوب المكتوبة هنا خارج تغطية هذا الدليل.