artifacts-builder
إنشاء تفاعليات React قوية لـ Claude
こちらからも入手できます: ArtemisAI,ComposioHQ,DYAI2025,Cam10001110101
إنشاء تفاعليات معقدة وتفاعلية لـ Claude.ai يتطلب أدوات frontend حديثة. هذه المهارة تُعد بيئة تطوير React كاملة مع مكونات shadcn/ui وتجمع كل شيء في ملف HTML واحد جاهز للمشاركة في المحادثات.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「artifacts-builder」を使用しています。 إنشاء تفاعلية حاسبة مع عمليات حسابية أساسية
期待される結果:
- تم تهيئة مشروع React + Vite مع Tailwind CSS
- تم إنشاء مكون الحاسبة مع أزرار الأرقام والشاشة
- تم إضافة إدارة الحالة للحساب الحالي
- تم تصميم الأزرار باستخدام مكون زر shadcn/ui
- تم الحزم إلى bundle.html (12KB)
- جاهز للمشاركة كتفاعلية في محادثة Claude
「artifacts-builder」を使用しています。 بناء لوحة إدارة المهام مع أعمدة وسحب وإفلات
期待される結果:
- تم إعداد مشروع React مع TypeScript
- تم تثبيت مكونات لوحة كانبان
- تم إضافة وظيفة السحب والإفلات مع embla-carousel
- تم إنشاء بطاقات المهام باستخدام shadcn/card و shadcn/badge
- تم الحزم إلى ملف HTML واحد
- التفاعلية جاهزة لمحادثة Claude
「artifacts-builder」を使用しています。 إنشاء ودجة طقس تعرض التوقعات
期待される結果:
- تم تهيئة المشروع مع أيقونات ومكونات الطقس
- تم بناء تخطيط كرت متجاوب مع الظروف الحالية
- تم إضافة شبكة التوقعات لـ 7 أيام
- تم تضمين تصميم الوضع الداكن
- تم حزم جميع الأصول في HTML مستقل
セキュリティ監査
低リスクLegitimate frontend build tool for creating Claude.ai artifacts. Scripts initialize React projects, install npm packages via standard package managers, and bundle code into self-contained HTML. All static findings are false positives: license URLs are legitimate, shell commands are standard build tooling, and cryptographic alerts are triggered by version numbers and legal text, not actual crypto usage.
リスク要因
🌐 ネットワークアクセス (5)
⚡ スクリプトを含む (1)
📁 ファイルシステムへのアクセス (1)
品質スコア
作れるもの
لوحات معلومات تفاعلية
بناء لوحات معلومات لتصور البيانات مع الرسوم البيانية والجداول وإدارة الحالة في الوقت الفعلي
عروض مكونات واجهة المستخدم
إنشاء مكتبات مكونات مصقولة وأنظمة تصميم تفاعلية مع مكونات shadcn/ui
تطبيقات نماذج أولية
بناء نماذج أولية وظيفية مع التوجيه والنماذج وتدفقات المستخدم المعقدة
これらのプロンプトを試す
استخدم مهارة artifacts-builder لإنشاء [وصف فكرة التفاعلية]. قم بتهيئة المشروع، وتطوير واجهة المستخدم مع مكونات shadcn المناسبة، وحزمتها في ملف HTML واحد يمكنني مشاركته كتفاعلية.
إنشاء لوحة معلومات تفاعلية باستخدام artifacts-builder. قم بتضمين [قسم مصادر البيانات أو المقاييس]. استخدم الرسوم البيانية والجداول ومرشحات التحكم المناسبة. اجعلها جذابة بصريًا مع دعم الوضع الداكن.
استخدم artifacts-builder لإنشاء [وصف التطبيق] مع مشاهد متعددة والتنقل. قم بتضمين [قائمة المكونات المطلوبة]. حزم كل شيء في تفاعلية واحدة تشبه تطبيقًا كاملًا.
بناء واجهة نموذج شاملة مع التحقق باستخدام artifacts-builder. قم بتضمين حقول لـ [قسم البيانات المراد جمعها]. استخدم react-hook-form مع التحقق من zod واعرض الأخطاء بوضوح. صمم باستخدام مكونات shadcn/ui.
ベストプラクティス
- استخدم مكونات shadcn/ui بشكل متسق للحصول على مظهر متماسك عبر التفاعليات
- اختبر التفاعليات في المتصفح قبل المشاركة لاكتشاف مشاكل العرض
- احتفظ بالتفاعليات مركزة على هدف واحد بدلاً من محاولة فعل الكثير
回避
- لا تستخدم هذا لمقتطفات HTML البسيطة التي يمكن كتابتها مباشرة
- تجنب الرسوم المتحركة أو التأثيرات البصرية المفرطة التي تبطئ التفاعلية
- لا تتضمن روابط CDN خارجية - حزم كل شيء محليًا