web-artifacts-builder
Construit des artefacts web multi-composants (React + TypeScript + Material UI + framer-motion, three.js en option) regroupés dans un seul fichier HTML autonome affiché à côté du chat : échafaudage, aperçu en direct, bundle vite-plugin-singlefile.
Quand l'utiliser
À utiliser quand l'utilisateur demande « crée une page web autonome en un seul fichier », « fais un tableau de bord interactif », « construis un prototype React », « crée un prototype à plusieurs écrans » ou « transforme ces données en explorateur interactif ».
Entrées et outils
Le skill reçoit la demande de l'utilisateur en langage naturel : son frontmatter ne déclare aucun argument. Il ne déclare pas d'allowed-tools : les outils disponibles sont ceux de l'agent qui le charge, selon la politique d'outils du projet.
Référence
| Champ | Valeur |
|---|---|
| Nom | web-artifacts-builder |
| Catégorie | Développement |
| Version | Aucune valeur |
| Licence | Aucune valeur |
| Outils autorisés | Aucune valeur |
| Plugins | example-skills |
| Source | catalog/navin/skills/web-artifacts-builder/SKILL.md |
| Digest | sha256:e18598957b3209afed65a4fae901ed649779ed21dcbfc5808667b6ca97e24aa9 |
skill_md_digest | sha256:c4d60322ff9f16700bce6400215f786868709ace6bbab93b0746596c32a0f59a |
| Emoji | 🧱 |
Fichiers fournis
| Chemin | Nombre |
|---|---|
catalog/navin/skills/web-artifacts-builder/scripts | 2 |
Frontmatter
Chaque champ du frontmatter de SKILL.md, avec la valeur de la source :
| Champ | Valeur |
|---|---|
name | web-artifacts-builder |
description | Builds multi-component web artifacts (React + TypeScript + Material UI + framer-motion, optional three.js) bundled into one self-contained HTML file shown beside the chat - scaffold, live preview, vite-plugin-singlefile bundle. Use when the user asks to "build an interactive dashboard artifact", "make a React app I can open as one HTML file", "create a multi-screen prototype" or "turn this data into an interactive explorer". In French "crée une page web autonome en un seul fichier", "fais un tableau de bord interactif" or "construis un prototype React". |
metadata.navin.emoji | 🧱 |
metadata.navin.category | development |