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.
| Input |
Descripción |
Obligatorio |
| Fuente |
PDF o texto pegado con el contenido |
✅ Sí |
| Tipo de app |
Guía, catálogo, checklist, itinerario, FAQ, etc. |
✅ Sí |
| Prioridad |
"Más visual" o "más práctica" |
✅ Sí |
| Idioma y estilo |
Ej: español, claro, sin jerga |
Opcional |
Tipos de app soportados
| Tipo |
Estructura esperada |
Funcionalidades clave |
| Guía |
Secciones + pasos |
Navegación, expandir/contraer |
| Catálogo |
Items con categorías |
Filtros, búsqueda, cards |
| Checklist |
Lista de tareas |
Marcar como hecho, progreso |
| Itinerario |
Eventos por tiempo |
Timeline, filtros por día |
| FAQ |
Preguntas y respuestas |
Búsqueda, acordeón |
| Referencia |
Datos estructurados |
Búsqueda, filtros, copiar |
Reglas obligatorias
| Regla |
Razón |
| No devolver solo texto |
El output es una app funcional |
| No sobrescribir nada |
Cada ejecución crea carpeta nueva |
| Mobile first |
Debe funcionar bien en móvil |
| Sin frameworks externos |
Solo HTML, CSS, JS vanilla |
| Datos en JSON separado |
Facilita edición y mantenimiento |
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
| # |
Funcionalidad |
Obligatoria |
Notas |
| 1 |
Buscador |
✅ Sí |
Filtrar por texto en tiempo real |
| 2 |
Filtros |
⚠️ Si aplica |
Por categorías, etiquetas o tipo |
| 3 |
Navegación |
✅ Sí |
Índice arriba o sidebar |
| 4 |
Responsive |
✅ Sí |
Mobile first, legible en cualquier pantalla |
| 5 |
Botón copiar |
⚠️ Si aplica |
Para items que se copian frecuentemente |
| 6 |
Marcar hecho |
⚠️ Si aplica |
Para checklists, con localStorage |
| 7 |
Expandir/contraer |
⚠️ Si aplica |
Para contenido largo o FAQs |
Workflow (orden fijo)
Paso 1: Analizar documento
- Leer el documento completo
- Identificar estructura: secciones, listas, tablas, puntos clave
- Determinar tipo de app más adecuado
- Definir categorías/etiquetas si aplica
Paso 2: Estructurar datos
- Convertir contenido a
data.json con formato estandarizado
- Validar que no hay información perdida
- Agregar metadatos (título, descripción, fecha)
Paso 3: Generar app
- Crear carpeta con nombre según convención
- Generar
index.html con:
- CSS inline (diseño limpio, responsive)
- JS inline (buscador, filtros, interacciones)
- Carga de datos desde
data.json o embebido
- Crear
README.txt con instrucciones
Paso 4: Validar
- Verificar que se ve bien en preview
- Probar buscador y filtros
- Verificar responsive (simular móvil)
- Confirmar que no hay contenido roto
Paso 5: Entregar
- Informar carpeta creada
- Indicar archivo a abrir
- 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
| Aspecto |
Especificación |
| Fuente |
Inter o system-ui como fallback |
| Tema |
Dark mode por defecto (moderno, legible) |
| Contraste |
Mínimo 4.5:1 en textos |
| Espaciado |
Consistente, mínimo 16px en mobile |
| Animaciones |
Sutiles (transiciones de 200ms) |
| Touch targets |
Mínimo 44x44px en botones/links |
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]
1---2name: doc-to-app3description: Convierte un documento (PDF/texto) en una mini-app web interactiva lista para abrir en preview. Úsalo cuando quieras pasar de "contenido" a "producto usable".4---5
6# Doc-to-App (Documento a Mini-App)
7
8Skill 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.
9
10## Cuándo usar este skill
11
12- Cuando tengas información en un PDF, texto o notas y quieras transformarla en una mini web navegable
13- Cuando necesites crear una guía, catálogo, checklist o itinerario interactivo
14- Cuando el usuario diga "convertí este documento en algo usable"
15- Cuando quieras pasar de "contenido estático" a "producto compartible"
16- Antes de compartir información compleja de forma más accesible
17
18## Inputs necesarios
19
20> **Regla**: Si falta alguno de estos inputs, PREGUNTAR antes de generar.
21
22| Input | Descripción | Obligatorio |
23| ------------------- | ------------------------------------------------ | ----------- |
24| **Fuente** | PDF o texto pegado con el contenido | ✅ Sí |
25| **Tipo de app** | Guía, catálogo, checklist, itinerario, FAQ, etc. | ✅ Sí |
26| **Prioridad** | "Más visual" o "más práctica" | ✅ Sí |
27| **Idioma y estilo** | Ej: español, claro, sin jerga | Opcional |
28
29### Tipos de app soportados
30
31| Tipo | Estructura esperada | Funcionalidades clave |
32| -------------- | ---------------------- | ----------------------------- |
33| **Guía** | Secciones + pasos | Navegación, expandir/contraer |
34| **Catálogo** | Items con categorías | Filtros, búsqueda, cards |
35| **Checklist** | Lista de tareas | Marcar como hecho, progreso |
36| **Itinerario** | Eventos por tiempo | Timeline, filtros por día |
37| **FAQ** | Preguntas y respuestas | Búsqueda, acordeón |
38| **Referencia** | Datos estructurados | Búsqueda, filtros, copiar |
39
40## Reglas obligatorias
41
42| Regla | Razón |
43| ----------------------- | --------------------------------- |
44| No devolver solo texto | El output es una app funcional |
45| No sobrescribir nada | Cada ejecución crea carpeta nueva |
46| Mobile first | Debe funcionar bien en móvil |
47| Sin frameworks externos | Solo HTML, CSS, JS vanilla |
48| Datos en JSON separado | Facilita edición y mantenimiento |
49
50## Estructura de salida (crear siempre)
51
52```
53miniapp_<tema>_<YYYYMMDD_HHMM>/
54├── index.html # La app completa (HTML + CSS + JS inline)
55├── data.json # Datos estructurados del documento
56└── README.txt # Instrucciones de uso
57```
58
59### Convención de nombres
60
61- **Tema**: slug del contenido (ej: `guia_viaje_paris`, `catalogo_productos`)
62- **Fecha**: formato `YYYYMMDD_HHMM` (ej: `20260129_1626`)
63- **Ejemplo completo**: `miniapp_guia_viaje_paris_20260129_1626/`
64
65## Funcionalidades mínimas de la app
66
67| # | Funcionalidad | Obligatoria | Notas |
68| --- | --------------------- | ------------ | ------------------------------------------- |
69| 1 | **Buscador** | ✅ Sí | Filtrar por texto en tiempo real |
70| 2 | **Filtros** | ⚠️ Si aplica | Por categorías, etiquetas o tipo |
71| 3 | **Navegación** | ✅ Sí | Índice arriba o sidebar |
72| 4 | **Responsive** | ✅ Sí | Mobile first, legible en cualquier pantalla |
73| 5 | **Botón copiar** | ⚠️ Si aplica | Para items que se copian frecuentemente |
74| 6 | **Marcar hecho** | ⚠️ Si aplica | Para checklists, con localStorage |
75| 7 | **Expandir/contraer** | ⚠️ Si aplica | Para contenido largo o FAQs |
76
77## Workflow (orden fijo)
78
79### Paso 1: Analizar documento
80
811. Leer el documento completo
822. Identificar estructura: secciones, listas, tablas, puntos clave
833. Determinar tipo de app más adecuado
844. Definir categorías/etiquetas si aplica
85
86### Paso 2: Estructurar datos
87
885. Convertir contenido a `data.json` con formato estandarizado
896. Validar que no hay información perdida
907. Agregar metadatos (título, descripción, fecha)
91
92### Paso 3: Generar app
93
948. Crear carpeta con nombre según convención
959. Generar `index.html` con:
96 - CSS inline (diseño limpio, responsive)
97 - JS inline (buscador, filtros, interacciones)
98 - Carga de datos desde `data.json` o embebido
9910. Crear `README.txt` con instrucciones
100
101### Paso 4: Validar
102
10311. Verificar que se ve bien en preview
10412. Probar buscador y filtros
10513. Verificar responsive (simular móvil)
10614. Confirmar que no hay contenido roto
107
108### Paso 5: Entregar
109
11015. Informar carpeta creada
11116. Indicar archivo a abrir
11217. Dar resumen de contenido y funcionalidades
113
114## Instrucciones técnicas
115
116### Estructura de data.json
117
118```json
119{
120 "meta": {
121 "title": "Título de la app",
122 "description": "Descripción breve",
123 "type": "guia|catalogo|checklist|itinerario|faq|referencia",
124 "generated": "2026-01-29T16:26:00-03:00",
125 "source": "Nombre del documento original"
126 },
127 "categories": [{ "id": "cat1", "name": "Categoría 1", "color": "#hexcolor" }],
128 "items": [
129 {
130 "id": "item_001",
131 "title": "Título del item",
132 "content": "Contenido o descripción",
133 "category": "cat1",
134 "tags": ["tag1", "tag2"],
135 "metadata": {}
136 }
137 ]
138}
139```
140
141### Template base de index.html
142
143```html
144<!DOCTYPE html>
145<html lang="es">
146 <head>
147 <meta charset="UTF-8" />
148 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
149 <title>[Título]</title>
150 <style>
151 /* Reset + variables + diseño mobile first */
152 * {
153 box-sizing: border-box;
154 margin: 0;
155 padding: 0;
156 }
157 :root {
158 --primary: #3b82f6;
159 --bg: #0f172a;
160 --surface: #1e293b;
161 --text: #f1f5f9;
162 --text-muted: #94a3b8;
163 }
164 body {
165 font-family: "Inter", system-ui, sans-serif;
166 background: var(--bg);
167 color: var(--text);
168 }
169 /* ... más estilos según tipo de app ... */
170 </style>
171 </head>
172 <body>
173 <header><!-- Título + buscador --></header>
174 <nav><!-- Navegación/filtros --></nav>
175 <main><!-- Contenido dinámico --></main>
176 <script>
177 // Cargar datos y renderizar
178 // Implementar búsqueda y filtros
179 // Guardar estado en localStorage si aplica
180 </script>
181 </body>
182</html>
183```
184
185### Requisitos de diseño
186
187| Aspecto | Especificación |
188| ----------------- | ---------------------------------------- |
189| **Fuente** | Inter o system-ui como fallback |
190| **Tema** | Dark mode por defecto (moderno, legible) |
191| **Contraste** | Mínimo 4.5:1 en textos |
192| **Espaciado** | Consistente, mínimo 16px en mobile |
193| **Animaciones** | Sutiles (transiciones de 200ms) |
194| **Touch targets** | Mínimo 44x44px en botones/links |
195
196### Manejo de errores
197
198- Si el documento es muy largo (>50 secciones) → dividir en páginas o usar lazy loading
199- Si no hay estructura clara → preguntar al usuario cómo organizarlo
200- Si hay imágenes referenciadas → avisar que no se incluyen, sugerir URLs
201
202## Output (formato exacto)
203
204```markdown
205## ✅ Mini-App Creada
206
207### 📁 Carpeta
208
209`miniapp_<tema>_<YYYYMMDD_HHMM>/`
210
211### 🚀 Cómo abrir
212
213Abrí el archivo: `miniapp_<tema>_<YYYYMMDD_HHMM>/index.html`
214
215### 📊 Contenido incluido
216
217| Métrica | Valor |
218| ----------------- | ------------------------------ |
219| **Tipo de app** | [guía/catálogo/checklist/etc.] |
220| **Secciones** | X |
221| **Items totales** | X |
222| **Categorías** | X |
223
224### ⚡ Funcionalidades
225
226- ✅ Buscador por texto
227- ✅ Filtros por [categorías/tags]
228- ✅ Navegación por secciones
229- ✅ Diseño responsive
230- ✅ [Otras funcionalidades específicas]
231
232### 📝 Archivos creados
233
234| Archivo | Descripción |
235| ------------ | -------------------------------- |
236| `index.html` | App completa, abrir en navegador |
237| `data.json` | Datos estructurados (editable) |
238| `README.txt` | Instrucciones de uso |
239
240### 💡 Notas
241
242[Observaciones sobre el contenido, limitaciones o sugerencias de mejora]
243```
majiayu000