artifacts-builder
Créer des artefacts React avec shadcn/ui
متاح أيضًا من: ArtemisAI,ComposioHQ,davila7,Cam10001110101
Créer des artefacts complexes avec du HTML brut est lent et limité. Cette skill fournit un environnement de développement complet avec React, Tailwind CSS et plus de 40 composants shadcn/ui préconstruits. Initialisez un projet, développez avec des outils modernes et regroupez le tout dans un seul fichier HTML portable.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "artifacts-builder". Create a dashboard artifact with cards, buttons, and a dialog component
النتيجة المتوقعة:
- ✓ Project initialized: dashboard-artifact
- ✓ Dependencies installed
- ✓ Components available: button, card, dialog
- ✓ Ready to develop at dashboard-artifact/
- Run 'pnpm dev' to start development server
استخدام "artifacts-builder". Build an interactive form with validation
النتيجة المتوقعة:
- ✓ New project form-artifact created
- ✓ React Hook Form and Zod installed
- ✓ Form components ready: input, select, checkbox
- ✓ Run 'pnpm dev' to preview
استخدام "artifacts-builder". Create a data visualization panel
النتيجة المتوقعة:
- ✓ Project initialized: analytics-panel
- ✓ Chart components and data libraries installed
- ✓ Available: tables, cards, progress bars
- ✓ Bundle ready for Claude artifact sharing
التدقيق الأمني
مخاطر منخفضةThis skill consists of two shell scripts that initialize React+Vite projects and bundle them into single HTML files. The behavior exactly matches its stated purpose as a development tool for Claude artifacts. No credential theft, data exfiltration, or persistence mechanisms detected. All static findings are false positives: the 'weak cryptographic algorithm' warnings trigger on CSS color definitions (hsl() syntax) and license text; 'external_command' warnings are legitimate build tooling (pnpm, npm, tar) with hardcoded arguments and controlled paths.
مشكلات منخفضة المخاطر (2)
عوامل الخطر
⚡ يحتوي على سكربتات (2)
📁 الوصول إلى نظام الملفات (1)
⚙️ الأوامر الخارجية (3)
🌐 الوصول إلى الشبكة (1)
درجة الجودة
ماذا يمكنك بناءه
Créer des tableaux de bord interactifs
Créer des visualisations de données complexes et des tableaux de bord avec des composants React pour les conversations Claude
Prototyper des démos d’interface
Prototyper rapidement et partager des démos d’interface interactives sous forme d’artefacts dans des conversations IA
Concevoir des présentations riches
Créer de belles présentations et du contenu interactif à l’aide de bibliothèques de composants modernes
جرّب هذه الموجهات
Use the Artifacts Builder skill to create a new project called [project-name] for building an interactive [type-of-application] with React, Tailwind, and shadcn/ui components
Use Artifacts Builder to add [specific component] to my current project. The component should [describe functionality].
Bundle my current React project into a single HTML file using Artifacts Builder so I can share it as a Claude artifact.
Use Artifacts Builder to: 1) create a new project named [name], 2) develop a [description] with [specific components], 3) bundle into HTML for sharing as artifact
أفضل الممارسات
- Testez votre artefact localement avec 'pnpm dev' avant de le regrouper
- Vérifiez la taille du bundle - les artefacts complexes peuvent se charger lentement
- Utilisez les composants shadcn/ui de manière cohérente pour un design harmonieux
تجنب
- Ne pas utiliser pour un HTML statique simple - préférez le code inline à la place
- Ne pas sauter les tests avant le bundling - la prévisualisation détecte les erreurs
- Ne pas inclure de dépendances inutiles - cela augmente la taille du bundle