artifacts-builder
Créer des artefacts HTML complexes avec React
Também disponível em: DYAI2025,Cam10001110101,ArtemisAI,davila7
La création d'artefacts HTML riches pour les conversations Claude nécessite une configuration, des dépendances et un regroupement. Cette compétence automatise l'ensemble du flux de travail, de l'initialisation du projet à la génération d'un fichier groupé unique.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "artifacts-builder". Create a dashboard artifact with React and shadcn/ui
Resultado esperado:
- Projet 'dashboard-demo' initialisé avec React, Vite, Tailwind CSS et plus de 40 composants shadcn/ui
- Composants disponibles : Button, Card, Table, Dialog, Form, Charts, Navigation
- Exécutez 'cd dashboard-demo && pnpm dev' pour démarrer le serveur de développement
- Exécutez 'bash scripts/bundle-artifact.sh' pour créer l'artifact bundle.html
Auditoria de Segurança
Baixo RiscoLegitimate development tooling for building HTML artifacts. All 55 static findings are FALSE POSITIVES. The 'weak cryptographic algorithm' detections are the word 'hsl' (Hue-Saturation-Lightness color format) misidentified as crypto. Shell commands execute standard npm/pnpm operations for project creation. No data exfiltration or malicious intent detected.
Fatores de risco
⚡ Contém scripts (2)
⚙️ Comandos externos (2)
📁 Acesso ao sistema de arquivos (1)
Pontuação de qualidade
O Que Você Pode Construir
Construire des tableaux de bord interactifs
Créez des tableaux de bord de données complexes avec des composants React et exportez-les sous forme d'artefacts.
Générer des prototypes d'interface utilisateur riches
Construisez et partagez rapidement des prototypes d'interface utilisateur dans les conversations Claude.
Créer des démos partageables
Empaquetez des démos frontend complètes sous forme de fichiers HTML portables pour un partage facile.
Tente Estes Prompts
Utilisez la compétence artifacts-builder pour initialiser un nouveau projet React appelé 'my-dashboard' avec Tailwind et les composants shadcn/ui.
Créez un nouveau projet d'artefact appelé 'data-viewer' avec React, puis construisez un tableau de données utilisant les composants table et card de shadcn/ui.
Regroupez l'application React dans le projet my-dashboard en un seul fichier HTML que je peux partager comme artefact.
Créez un projet complet React + shadcn/ui appelé 'interactive-form', ajoutez une validation de formulaire avec react-hook-form et zod, puis regroupez-le en artefact HTML partageable.
Melhores Práticas
- Exécutez le script de bundle uniquement après avoir terminé le développement pour vous assurer que l'artefact reflète l'état final
- Utilisez les alias de chemin (@/) de manière cohérente entre les composants pour des importations maintenables
- Testez l'artefact dans un navigateur avant de le partager pour détecter tout problème de rendu
Evitar
- Évitez d'utiliser cette compétence pour les artefacts HTML simples à fichier unique qui n'ont pas besoin de React ou de gestion d'état
- Ne sautez pas le test du fichier HTML groupé avant de le partager dans les conversations
- Évitez les dépendances externes volumineuses qui augmenteraient significativement la taille du bundle
Perguntas Frequentes
Quelle est la différence entre cette compétence et les artefacts HTML simples ?
Quelle version de Node.js est requise ?
Puis-je utiliser npm ou yarn au lieu de pnpm ?
Mes données sont-elles sécurisées lors de l'exécution de ces scripts ?
Pourquoi la taille du bundle est-elle importante ?
Comment cela se compare-t-il à l'écriture d'artefacts HTML bruts ?
Detalhes do Desenvolvedor
Estrutura de arquivos