---
name: artifact-creator
description: >-
Genera artefactos interactivos autocontenidos (estilo Claude Artifacts) como archivos HTML
que se abren automáticamente en el navegador local. Soporta aplicaciones web interactivas,
dashboards, juegos, visualizaciones de datos, documentos con formato, diagramas SVG y más.
Úsala cuando el usuario pida "crear un artefacto", "hazme una app rápida", "crea una
visualización", "genera un diagrama", "hazme un dashboard", "crea un juego", "genera un
documento visual", "abre esto en el navegador", "crea algo interactivo", o cualquier
petición que implique generar contenido visual/interactivo autocontenido para previsualizar.
version: 1.0.0
license: CC-BY-4.0
updated: 2026-08-23
---
# Artifact Creator Skill
Genera **artefactos autocontenidos** inspirados en los [Artifacts de Claude](https://claude.ai).
Cada artefacto es un **archivo HTML único** con todo inlineado (CSS, JS, datos, fuentes) que
se abre automáticamente en el navegador del usuario para previsualización inmediata.
---
## Concepto
Un **artefacto** es un archivo `.html` autocontenido que:
- Incluye TODO el código inline (no dependencias externas salvo CDNs públicas permitidas)
- Se puede abrir directamente en el navegador sin servidor
- Es interactivo, visual y con diseño premium
- Se guarda en el directorio de artefactos de la conversación para persistencia
---
## Tipos de Artefacto Soportados
### 1. 🎮 Aplicaciones Web Interactivas
- Juegos (Snake, Tetris, Quiz, Memoria, etc.)
- Herramientas (calculadoras, conversores, timers, generadores)
- Dashboards con widgets interactivos
- Mini-apps de productividad (to-do, pomodoro, kanban)
### 2. 📊 Visualizaciones de Datos
- Gráficos (barras, líneas, pie, radar, scatter)
- Tablas dinámicas con ordenación y filtros
- Mapas de calor, treemaps
- Infografías interactivas
- **CDN permitida:** Chart.js (`https://cdn.jsdelivr.net/npm/chart.js`)
- **CDN permitida:** D3.js (`https://cdn.jsdelivr.net/npm/d3@7`)
### 3. 📄 Documentos con Formato
- Informes con tipografía profesional
- Presentaciones tipo slideshow
- Resúmenes ejecutivos con secciones colapsables
- Documentos printables (con `@media print`)
### 4. 🎨 Diagramas y SVG
- Diagramas de flujo (flowcharts)
- Diagramas de arquitectura
- Organigramas
- Mapas mentales
- **CDN permitida:** Mermaid.js (`https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js`)
---
## Flujo de Trabajo
### Paso 1: Analizar la Petición del Usuario
1. Identificar el **tipo de artefacto** que mejor se ajusta a la petición.
2. Determinar los **datos** necesarios (si el usuario proporciona datos, usarlos; si no, generar datos de ejemplo coherentes).
3. Decidir la **complejidad**: simple (un componente) vs. complejo (múltiples secciones/widgets).
### Paso 2: Generar el Archivo HTML
Crear un archivo HTML autocontenido siguiendo estas reglas estrictas:
#### Estructura Base Obligatoria
```html
[Título descriptivo del artefacto]
```
#### Reglas de Diseño Obligatorias
1. **Tema oscuro por defecto** — Usar paleta dark con acentos vibrantes (violeta, verde menta, ámbar).
2. **Glassmorphism** — Usar `backdrop-filter: blur()` y bordes semitransparentes en cards/paneles.
3. **Micro-animaciones** — Transiciones suaves en hover (`transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`).
4. **Gradientes sutiles** — En backgrounds, textos destacados y bordes.
5. **Responsive** — El artefacto DEBE funcionar correctamente en todos los tamaños de pantalla.
6. **Accesibilidad** — Contraste suficiente, roles ARIA básicos, `tabindex` en elementos interactivos.
7. **Sin placeholders** — Todo dato debe ser realista y coherente. No usar Lorem Ipsum.
#### CDNs Permitidas (SOLO estas)
| Librería | URL | Uso |
|---|---|---|
| Chart.js | `https://cdn.jsdelivr.net/npm/chart.js` | Gráficos |
| D3.js | `https://cdn.jsdelivr.net/npm/d3@7` | Visualizaciones avanzadas |
| Mermaid.js | `https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js` | Diagramas |
| Three.js | `https://cdn.jsdelivr.net/npm/three@0.160/build/three.module.js` | 3D (solo si necesario) |
| Google Fonts | `https://fonts.googleapis.com/css2?family=Inter` | Tipografía |
| Lucide Icons | `https://unpkg.com/lucide@latest` | Iconos SVG |
**NO usar** frameworks pesados (React, Vue, Angular), ni Tailwind, ni Bootstrap, ni jQuery.
Todo se construye con **vanilla HTML + CSS + JS**.
### Paso 3: Guardar y Abrir el Artefacto
1. **Guardar el archivo** en el directorio de artefactos de la conversación:
```
/brain//artifact_.html
```
- Usar `write_to_file` con `ArtifactMetadata`:
- `Summary`: Descripción detallada de lo que hace el artefacto
- `UserFacing`: `true`
- `RequestFeedback`: `true`
2. **Abrir automáticamente en el navegador** usando:
```powershell
Start-Process ""
```
Esto abrirá el archivo en el navegador predeterminado del usuario.
3. **Mostrar al usuario** un resumen con:
- 📦 Qué tipo de artefacto se creó
- 🔗 Link clickable al archivo
- ✨ Características principales
- 🔄 Instrucciones para solicitar cambios
---
## Ejemplos de Uso
### Ejemplo 1: "Crea un juego de Snake"
→ Genera `artifact_snake_game.html` con un juego Snake completo, controles por teclado/touch, puntuación, y diseño premium dark.
### Ejemplo 2: "Visualiza estos datos de ventas"
→ Genera `artifact_sales_dashboard.html` con Chart.js, gráficos interactivos, métricas KPI, y filtros por período.
### Ejemplo 3: "Haz un diagrama de la arquitectura de mi proyecto"
→ Lee el proyecto, genera `artifact_architecture_diagram.html` con Mermaid.js mostrando componentes, flujos y dependencias.
### Ejemplo 4: "Crea un informe profesional con estos datos"
→ Genera `artifact_report.html` con tipografía elegante, secciones colapsables, tablas estilizadas, y opción de imprimir.
### Ejemplo 5: "Hazme un pomodoro timer"
→ Genera `artifact_pomodoro.html` con timer circular animado, sonidos, estadísticas de sesiones, y notificaciones.
---
## Iteración y Mejora
Cuando el usuario pida modificaciones sobre un artefacto existente:
1. **Leer el archivo HTML existente** del artefacto.
2. **Aplicar los cambios solicitados** manteniendo el diseño coherente.
3. **Sobrescribir el archivo** con `Overwrite: true`.
4. **Reabrir en el navegador** para que el usuario vea los cambios.
---
## Checklist de Calidad
Antes de entregar un artefacto, verificar:
- [ ] El HTML es válido y autocontenido
- [ ] Funciona sin servidor (abrir archivo directamente en navegador)
- [ ] El diseño es premium (no genérico ni básico)
- [ ] Es responsive (funciona en desktop y móvil)
- [ ] Los datos son realistas (no placeholders)
- [ ] Las animaciones son suaves y no excesivas
- [ ] Los colores tienen contraste suficiente
- [ ] Los elementos interactivos responden al hover/click
- [ ] El título del `` es descriptivo
- [ ] El archivo se guardó como artefacto con metadata correcta