The whole file

This is exactly what you download: no summaries, nothing trimmed.

Heads-up: the skill file itself is written in Spanish. Agents read it fine and answer in your language, but the prose below is not translated.

Artifact Creator Skill

Genera artefactos autocontenidos inspirados en los Artifacts de Claude. 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

Identificar el tipo de artefacto que mejor se ajusta a la petición.
Determinar los datos necesarios (si el usuario proporciona datos, usarlos; si no, generar datos de ejemplo coherentes).
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

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Título descriptivo del artefacto]</title>
    <style>
        /* === RESET & BASE === */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        
        /* === VARIABLES DE DISEÑO === */
        :root {
            --bg-primary: #0f0f1a;
            --bg-secondary: #1a1a2e;
            --bg-card: #16213e;
            --text-primary: #e8e8f0;
            --text-secondary: #a0a0b8;
            --accent: #7c6af7;
            --accent-glow: rgba(124, 106, 247, 0.3);
            --success: #7cdc8f;
            --warning: #d4a857;
            --danger: #f76c6c;
            --border: rgba(255, 255, 255, 0.08);
            --radius: 12px;
            --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
        }

        body {
            font-family: var(--font-sans);
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        /* === IMPORTAR FUENTES (Google Fonts CDN) === */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        /* ... Estilos específicos del artefacto ... */
    </style>
</head>
<body>
    <!-- Contenido del artefacto -->
    
    <script>
        // Lógica del artefacto
    </script>
</body>
</html>

Reglas de Diseño Obligatorias

Tema oscuro por defecto — Usar paleta dark con acentos vibrantes (violeta, verde menta, ámbar).
Glassmorphism — Usar backdrop-filter: blur() y bordes semitransparentes en cards/paneles.
Micro-animaciones — Transiciones suaves en hover (transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)).
Gradientes sutiles — En backgrounds, textos destacados y bordes.
Responsive — El artefacto DEBE funcionar correctamente en todos los tamaños de pantalla.
Accesibilidad — Contraste suficiente, roles ARIA básicos, tabindex en elementos interactivos.
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

Guardar el archivo en el directorio de artefactos de la conversación:
```
<appDataDir>/brain/<conversation-id>/artifact_<nombre-descriptivo>.html
```
- Usar write_to_file con ArtifactMetadata:
  - Summary: Descripción detallada de lo que hace el artefacto
  - UserFacing: true
  - RequestFeedback: true
Abrir automáticamente en el navegador usando:
```
Start-Process "<ruta-completa-al-archivo.html>"
```
Esto abrirá el archivo en el navegador predeterminado del usuario.
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:

Leer el archivo HTML existente del artefacto.
Aplicar los cambios solicitados manteniendo el diseño coherente.
Sobrescribir el archivo con Overwrite: true.
Reabrir en el navegador para que el usuario vea los cambios.

Checklist de Calidad

Antes de entregar un artefacto, verificar:

artifact-creator

How to install one