Doc-to-App (Documento a Mini-App)

Doc-to-App (Documento a Mini-App)

Skill especializado en transformar documentos (PDF, texto, notas) en mini-aplicaciones web interactivas con buscador, filtros y navegación por secciones. Genera archivos listos para preview sin dependencias externas.

Cuándo usar este skill

• Cuando tengas información en un PDF, texto o notas y quieras transformarla en una mini web navegable
• Cuando necesites crear una guía, catálogo, checklist o itinerario interactivo
• Cuando el usuario diga "convertí este documento en algo usable"
• Cuando quieras pasar de "contenido estático" a "producto compartible"
• Antes de compartir información compleja de forma más accesible

Inputs necesarios

Regla: Si falta alguno de estos inputs, PREGUNTAR antes de generar.

Tipos de app soportados

Reglas obligatorias

Estructura de salida (crear siempre)

miniapp_<tema>_<YYYYMMDD_HHMM>/
├── index.html      # La app completa (HTML + CSS + JS inline)
├── data.json       # Datos estructurados del documento
└── README.txt      # Instrucciones de uso

Convención de nombres

• Tema: slug del contenido (ej: guia_viaje_paris, catalogo_productos)
• Fecha: formato YYYYMMDD_HHMM (ej: 20260129_1626)
• Ejemplo completo: miniapp_guia_viaje_paris_20260129_1626/

Funcionalidades mínimas de la app

Workflow (orden fijo)

Paso 1: Analizar documento

1. Leer el documento completo
2. Identificar estructura: secciones, listas, tablas, puntos clave
3. Determinar tipo de app más adecuado
4. Definir categorías/​etiquetas si aplica

Paso 2: Estructurar datos

1. Convertir contenido a data.json con formato estandarizado
2. Validar que no hay información perdida
3. Agregar metadatos (título, descripción, fecha)

Paso 3: Generar app

1. Crear carpeta con nombre según convención
2. Generar index.html con:
   • CSS inline (diseño limpio, responsive)
   • JS inline (buscador, filtros, interacciones)
   • Carga de datos desde data.json o embebido
3. Crear README.txt con instrucciones

Paso 4: Validar

1. Verificar que se ve bien en preview
2. Probar buscador y filtros
3. Verificar responsive (simular móvil)
4. Confirmar que no hay contenido roto

Paso 5: Entregar

1. Informar carpeta creada
2. Indicar archivo a abrir
3. Dar resumen de contenido y funcionalidades

Instrucciones técnicas

Estructura de data.json

{
  "meta": {
    "title": "Título de la app",
    "description": "Descripción breve",
    "type": "guia|catalogo|checklist|itinerario|faq|referencia",
    "generated": "2026-01-29T16:26:00-03:00",
    "source": "Nombre del documento original"
  },
  "categories": [{ "id": "cat1", "name": "Categoría 1", "color": "#hexcolor" }],
  "items": [
    {
      "id": "item_001",
      "title": "Título del item",
      "content": "Contenido o descripción",
      "category": "cat1",
      "tags": ["tag1", "tag2"],
      "metadata": {}
    }
  ]
}

Template base de index.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>[Título]</​title>
    <style>
      /​* Reset + variables + diseño mobile first */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      :root {
        --primary: #3b82f6;
        --bg: #0f172a;
        --surface: #1e293b;
        --text: #f1f5f9;
        --text-muted: #94a3b8;
      }
      body {
        font-family: "Inter", system-ui, sans-serif;
        background: var(--bg);
        color: var(--text);
      }
      /​* ... más estilos según tipo de app ... */
    </​style>
  </​head>
  <body>
    <header><!-- Título + buscador --></​header>
    <nav><!-- Navegación/​filtros --></​nav>
    <main><!-- Contenido dinámico --></​main>
    <script>
      // Cargar datos y renderizar
      // Implementar búsqueda y filtros
      // Guardar estado en localStorage si aplica
    </​script>
  </​body>
</​html>

Requisitos de diseño

Manejo de errores

• Si el documento es muy largo (>50 secciones) → dividir en páginas o usar lazy loading
• Si no hay estructura clara → preguntar al usuario cómo organizarlo
• Si hay imágenes referenciadas → avisar que no se incluyen, sugerir URLs

Output (formato exacto)

## ✅ Mini-App Creada

### 📁 Carpeta

`miniapp_<tema>_<YYYYMMDD_HHMM>/`

### 🚀 Cómo abrir

Abrí el archivo: `miniapp_<tema>_<YYYYMMDD_HHMM>/​index.html`

### 📊 Contenido incluido

| Métrica           | Valor                          |
| ----------------- | ------------------------------ |
| **Tipo de app**   | [guía/​catálogo/​checklist/​etc.] |
| **Secciones**     | X                              |
| **Items totales** | X                              |
| **Categorías**    | X                              |

### ⚡ Funcionalidades

- ✅ Buscador por texto
- ✅ Filtros por [categorías/​tags]
- ✅ Navegación por secciones
- ✅ Diseño responsive
- ✅ [Otras funcionalidades específicas]

### 📝 Archivos creados

| Archivo      | Descripción                      |
| ------------ | -------------------------------- |
| `index.html` | App completa, abrir en navegador |
| `data.json`  | Datos estructurados (editable)   |
| `README.txt` | Instrucciones de uso             |

### 💡 Notas

[Observaciones sobre el contenido, limitaciones o sugerencias de mejora]