منشئ عناصر الويب

# باني القطع الأثرية للويب

لبناء قطع أثرية قوية لواجهة المستخدم الأمامية على 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 مع نظام ثيمات 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) - ينشئ ملف `.parcelrc` مع دعم الأسماء المستعارة للمسارات - يبني باستخدام Parcel (بدون خرائط المصدر) - يضمن جميع الأصول في ملف HTML واحد باستخدام html-inline

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

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

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

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

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

## المرجع

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