web-artifacts-builder
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.
When to use
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".
Inputs and tools
The skill takes the request of the user in natural language: its frontmatter declares no argument. It declares no allowed-tools: the tools available are those of the agent that loads it, under the tool policy of the project.
Reference
| Field | Value |
|---|---|
| Name | web-artifacts-builder |
| Category | Development |
| Version | Not declared |
| Licence | Not declared |
| Allowed tools | Not declared |
| Plugins | example-skills |
| Source | catalog/navin/skills/web-artifacts-builder/SKILL.md |
| Digest | sha256:e18598957b3209afed65a4fae901ed649779ed21dcbfc5808667b6ca97e24aa9 |
skill_md_digest | sha256:c4d60322ff9f16700bce6400215f786868709ace6bbab93b0746596c32a0f59a |
| Emoji | 🧱 |
Bundled files
| Path | Count |
|---|---|
catalog/navin/skills/web-artifacts-builder/scripts | 2 |
Frontmatter
Every field of the SKILL.md frontmatter, with the value of the source:
| Field | Value |
|---|---|
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 |