Compétences artifacts-builder
📦

artifacts-builder

Risque faible 🌐 Accès réseau⚙️ Commandes externes⚡ Contient des scripts📁 Accès au système de fichiers

إنشاء تفاعليات React قوية لـ Claude

Également disponible depuis: DYAI2025,Cam10001110101,ComposioHQ,ArtemisAI

إنشاء تفاعليات معقدة وتفاعلية لـ Claude.ai يتطلب أدوات frontend حديثة. هذه المهارة تُعد بيئة تطوير React كاملة مع مكونات shadcn/ui وتجمع كل شيء في ملف HTML واحد جاهز للمشاركة في المحادثات.

Prend en charge: Claude Code(CC)
📊 69 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "artifacts-builder". إنشاء تفاعلية حاسبة مع عمليات حسابية أساسية

Résultat attendu:

  • تم تهيئة مشروع React + Vite مع Tailwind CSS
  • تم إنشاء مكون الحاسبة مع أزرار الأرقام والشاشة
  • تم إضافة إدارة الحالة للحساب الحالي
  • تم تصميم الأزرار باستخدام مكون زر shadcn/ui
  • تم الحزم إلى bundle.html (12KB)
  • جاهز للمشاركة كتفاعلية في محادثة Claude

Utilisation de "artifacts-builder". بناء لوحة إدارة المهام مع أعمدة وسحب وإفلات

Résultat attendu:

  • تم إعداد مشروع React مع TypeScript
  • تم تثبيت مكونات لوحة كانبان
  • تم إضافة وظيفة السحب والإفلات مع embla-carousel
  • تم إنشاء بطاقات المهام باستخدام shadcn/card و shadcn/badge
  • تم الحزم إلى ملف HTML واحد
  • التفاعلية جاهزة لمحادثة Claude

Utilisation de "artifacts-builder". إنشاء ودجة طقس تعرض التوقعات

Résultat attendu:

  • تم تهيئة المشروع مع أيقونات ومكونات الطقس
  • تم بناء تخطيط كرت متجاوب مع الظروف الحالية
  • تم إضافة شبكة التوقعات لـ 7 أيام
  • تم تضمين تصميم الوضع الداكن
  • تم حزم جميع الأصول في HTML مستقل

Audit de sécurité

Risque faible
v5 • 1/17/2026

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
Fichiers analysés
969
Lignes analysées
4
résultats
5
Total des audits

Facteurs de risque

🌐 Accès réseau (5)
LICENSE.txt:4 LICENSE.txt:196 scripts/init-artifact.sh:283 skill-report.json:6 SKILL.md:74
⚙️ Commandes externes (3)
scripts/bundle-artifact.sh:1-47 scripts/init-artifact.sh:1-277 SKILL.md:10-54
⚡ Contient des scripts (1)
scripts/init-artifact.sh:93
📁 Accès au système de fichiers (1)
scripts/init-artifact.sh:230-250
Audité par: claude Voir l’historique des audits →

Score de qualité

45
Architecture
100
Maintenabilité
87
Contenu
20
Communauté
90
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

لوحات معلومات تفاعلية

بناء لوحات معلومات لتصور البيانات مع الرسوم البيانية والجداول وإدارة الحالة في الوقت الفعلي

عروض مكونات واجهة المستخدم

إنشاء مكتبات مكونات مصقولة وأنظمة تصميم تفاعلية مع مكونات shadcn/ui

تطبيقات نماذج أولية

بناء نماذج أولية وظيفية مع التوجيه والنماذج وتدفقات المستخدم المعقدة

Essayez ces prompts

تفاعلية أساسية 
استخدم مهارة artifacts-builder لإنشاء [وصف فكرة التفاعلية]. قم بتهيئة المشروع، وتطوير واجهة المستخدم مع مكونات shadcn المناسبة، وحزمتها في ملف HTML واحد يمكنني مشاركته كتفاعلية.
لوحة معلومات مع بيانات 
إنشاء لوحة معلومات تفاعلية باستخدام artifacts-builder. قم بتضمين [قسم مصادر البيانات أو المقاييس]. استخدم الرسوم البيانية والجداول ومرشحات التحكم المناسبة. اجعلها جذابة بصريًا مع دعم الوضع الداكن.
تطبيق متعدد المشاهد 
استخدم artifacts-builder لإنشاء [وصف التطبيق] مع مشاهد متعددة والتنقل. قم بتضمين [قائمة المكونات المطلوبة]. حزم كل شيء في تفاعلية واحدة تشبه تطبيقًا كاملًا.
واجهة نموذج كثيفة 
بناء واجهة نموذج شاملة مع التحقق باستخدام artifacts-builder. قم بتضمين حقول لـ [قسم البيانات المراد جمعها]. استخدم react-hook-form مع التحقق من zod واعرض الأخطاء بوضوح. صمم باستخدام مكونات shadcn/ui.

Bonnes pratiques

  • استخدم مكونات shadcn/ui بشكل متسق للحصول على مظهر متماسك عبر التفاعليات
  • اختبر التفاعليات في المتصفح قبل المشاركة لاكتشاف مشاكل العرض
  • احتفظ بالتفاعليات مركزة على هدف واحد بدلاً من محاولة فعل الكثير

Éviter

  • لا تستخدم هذا لمقتطفات HTML البسيطة التي يمكن كتابتها مباشرة
  • تجنب الرسوم المتحركة أو التأثيرات البصرية المفرطة التي تبطئ التفاعلية
  • لا تتضمن روابط CDN خارجية - حزم كل شيء محليًا

Foire aux questions

هل هذا يعمل مع Claude Free؟
نعم. ملفات HTML المجمعة تعمل في أي خطة Claude. فقط Claude Code يستخدم المهارة نفسها.
ما الحجم الأقصى للتفاعلية؟
التفاعليات ليس لها حد صارم لكن الملفات الأصغر تحميلًا أسرع. احتفظ بأقل من 500KB لأفضل أداء.
هل يمكنني استخدام APIs خارجية في التفاعليات؟
نعم، لكن تأكد من تمكين CORS على الـ API. تعمل استدعاءات من جانب العميل إذا كان الخادم يسمح بطلبات أصلية متعددة.
هل بياناتي آمنة عند بناء التفاعليات؟
نعم. كل المعالجة تحدث محليًا على جهازك. لا يتم إرسال بيانات إلى خوادم خارجية أثناء البناء.
لماذا لا يتم عرض التفاعلية بشكل صحيح؟
تحقق من وحدة تحكم المتصفح للأخطاء. تأكد من حزم جميع التجنبيات. تجنب ميزات من جانب الخادم مثل وحدات Node.js.
كيف يختلف هذا عن كتابة التفاعليات مباشرة؟
هذا يتيح حالة معقدة وتوجيه وأكثر من 40 مكونًا جاهزًا. الأفضل للتطبيقات متعددة المشاهد، وليس المحتوى الثابت البسيط.

Détails du développeur

Auteur

davila7

Licence

Complete terms in LICENSE.txt

Dépôt

https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/development/artifacts-builder

Réf

main

Structure de fichiers

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 LICENSE.txt

📄 SKILL.md