منشئ القطع الفنية الويب

# منشئ قطع الويب

لبناء قطع (artifacts) قوية على claude.ai الخاصة بالواجهات الأمامية، اتبع الخطوات التالية: 1. هيئ مستودع الواجهة الأمامية باستخدام `scripts/init-artifact.sh` 2. طور قطعتك بتحرير الكود المنشأ 3. اجمع كل الكود في ملف HTML واحد باستخدام `scripts/bundle-artifact.sh` 4. اعرض القطعة للمستخدم 5. (اختياري) اختبر القطعة

**المكدس التقني**: React 18 + TypeScript + Vite + Parcel (التجميع) + Tailwind CSS + shadcn/ui

## إرشادات التصميم والأسلوب

مهم جدا: لتجنب ما يشار إليه غالبا بـ "AI slop"، تجنب استخدام تخطيطات مركزية مفرطة، تدرجات لونية بنفسجية، زوايا مستديرة موحدة، وخط Inter.

## البدء السريع

### الخطوة 1: تهيئة المشروع

شغل سكريبت التهيئة لإنشاء مشروع React جديد: ```bash bash scripts/init-artifact.sh <project-name> cd <project-name> ```

ينشئ هذا مشروعا معدا بالكامل يتضمن: - ✅ React + TypeScript (عبر Vite) - ✅ Tailwind CSS 3.4.1 مع نظام theming الخاص بـ shadcn/ui - ✅ اختصارات المسارات (`@/`) المعدة - ✅ أكثر من 40 مكون shadcn/ui مثبتة مسبقا - ✅ جميع تبعيات Radix UI المضمنة - ✅ Parcel معد للتجميع (عبر .parcelrc) - ✅ التوافق مع Node 18+ (يكتشف تلقائيا ويثبت إصدار Vite المناسب)

### الخطوة 2: تطوير قطعتك

لبناء القطعة، حرر الملفات المنشأة. راجع **مهام التطوير الشائعة** أدناه للحصول على التوجيهات.

### الخطوة 3: تجميع إلى ملف HTML واحد

لتجميع تطبيق React إلى قطعة HTML واحدة: ```bash bash scripts/bundle-artifact.sh ```

ينشئ هذا `bundle.html` — قطعة مستقلة بذاتها تتضمن جميع JavaScript و CSS والتبعيات مدرجة. يمكن مشاركة هذا الملف مباشرة في محادثات Claude كقطعة.

**المتطلبات**: يجب أن يحتوي مشروعك على `index.html` في الدليل الجذر.

**ما يقوم به السكريبت**: - يثبت تبعيات التجميع (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline) - ينشئ config `.parcelrc` مع دعم اختصارات المسارات - يبني باستخدام Parcel (بدون خرائط المصدر) - يدرج جميع الأصول في HTML واحد باستخدام html-inline

### الخطوة 4: شارك القطعة مع المستخدم

أخيرا، شارك ملف HTML المجمع في المحادثة مع المستخدم حتى يتمكن من عرضه كقطعة.

### الخطوة 5: الاختبار/التصور (اختياري)

ملاحظة: هذه خطوة اختيارية تماما. نفذها فقط إذا لزم الأمر أو إذا طلب ذلك.

لاختبار أو تصور القطعة، استخدم الأدوات المتاحة (بما فيها المهارات الأخرى أو الأدوات المدمجة مثل Playwright أو Puppeteer). بشكل عام، تجنب اختبار القطعة مقدما لأن ذلك يزيد من زمن الانتظار بين الطلب والوقت الذي يتم فيه عرض القطعة النهائية. اختبر لاحقا، بعد عرض القطعة، إذا طلب ذلك أو إذا ظهرت مشاكل.

## المراجع

- **مكونات shadcn/ui**: https://ui.shadcn.com/docs/components