Mapa de la ruta
Contenido detallado
🔍 Desglosando un generador de itinerarios
Lectura guiada de SKILL.md completo: qué hace la skill, el flujo de configuración conversacional, la verificación de integraciones y los principios que lo guían todo.
El párrafo inicial define el resultado en una frase: una página HTML interactiva y autónoma, con tema claro/oscuro, tarjetas de vuelo, agenda día a día y listas de verificación que guardan el estado.
La primera frase de una skill es un contrato. Le dice a Claude —y a ti— exactamente qué se entregará, evitando resultados genéricos.
Salida concreta · "página, no documento" · autocontenida · interactividad como diferencial.
Una secuencia de 4 pasos que Claude DEBE seguir antes de producir cualquier cosa: detalles básicos, integraciones, detalles profundos y confirmación.
Es el paso marcado como "CRITICAL". Recopilar datos reales es lo que transforma una plantilla genérica en un documento que parece hecho a medida.
Discovery · «preguntar antes de suponer» · 4 pasos · confirmar antes de generar.
El Paso 2 pide revisar el correo electrónico, el calendario, Drive, los mensajes y las URLs. Si el usuario autoriza, la skill usa herramientas MCP (Gmail, Calendar, Drive) para obtener datos reales.
Es el salto de "generador de texto" a "asistente". Las confirmaciones de vuelos, reservas y eventos se incorporan solas al documento.
MCP · "ask every time" · permiso · datos reales > placeholder.
La sección define el formato: un único HTML con CSS y JS inline, imágenes en base64 o emojis, sin dependencias externas aparte de la fuente. Se guarda con un nombre estandarizado.
Las restricciones explícitas de salida evitan que Claude invente dependencias, enlaces rotos o archivos dispersos.
Self-contained · CSS/JS inline · base64 · convención para nombrar el archivo.
Una lista numerada de 13 secciones sugeridas — hero, stats, mapa de ruta, vuelos, hotel, agenda, presupuesto, listas de verificación, pie de página — marcadas como "adaptar según el viaje".
Muestra cómo dar un "plano" sin limitar demasiado: Claude elige los bloques relevantes para ese viaje en vez de volcarlo todo.
Lista de bloques · adaptación según el caso · orden sugerido · opcional frente a obligatorio.
Seis principios breves que resumen el espíritu de la skill: primero los datos reales, preguntar antes de asumir, un archivo, sensación de app, interactivo > estático, codificar los colores.
Los principios resuelven los casos que el plano no previó. Son la regla práctica cuando Claude necesita decidir por su cuenta.
Principios > pasos · regla de decisión · tono de la skill · consistencia.
🎨 Flujo de configuración, sistema de diseño y resultado
Del prompt a la página HTML: la paleta, la tipografía, la biblioteca de componentes, los efectos visuales y los patrones de JavaScript que le dan a la salida el aspecto de una app premium.
La skill incorpora un bloque :root con variables CSS para fondo, superficies, bordes y cinco acentos semánticos (azul, naranja, verde, lavanda, dorado).
Definir los tokens en SKILL.md garantiza que toda salida tenga la misma identidad, sin que Claude invente colores en cada ejecución.
Design tokens · color semántico · consistencia · custom properties.
Inter para el texto, mono para horarios y códigos; hero responsivo con clamp(); etiquetas en mayúsculas con letter-spacing.
Una escala tipográfica explícita produce una jerarquía coherente; sin ella, cada salida queda con tamaños aleatorios.
Inter · mono para datos · clamp() · etiquetas en mayúsculas · pesos.
Doce componentes descritos uno por uno: hero, banner de evento, tarjetas de vuelo, selector de día, hotel, mapa de ruta, estadísticas, presupuesto, listas de verificación y tema.
Describir cada componente con su anatomía le da a Claude piezas listas para ensamblar, en vez de improvisar diseños desde cero.
Biblioteca de componentes · anatomía · reutilización · composición.
Una tabla asigna significado a cada color: azul = ida, verde = confirmado, naranja = vuelta, lavanda = conexión, dorado = evento. Las etiquetas son píldoras en mayúsculas.
Un color con significado fijo hace que la página sea fácil de escanear: lees el estado sin leer el texto. Es uno de los seis principios de la skill.
Color semántico · pastillas en mayúsculas · legibilidad · convención fija.
Orbs (desenfoques radiales fijos), glassmorphism con backdrop-filter, shimmer en los banners, hover-lift y estela animada del avión.
Son los detalles los que separan un «documento» de una «app premium». Cada efecto se describe con lo suficiente para que Claude pueda recrearlo.
Orbs · glassmorphism · shimmer · hover-lift · animación de la estela.
Patrones de JS: cambio de día por atributo data, acordeón de vuelos con max-height, listas de verificación que se guardan en localStorage, selector de tema y barras de progreso automáticas.
Persistir el estado (la casilla marcada sigue marcada) es el detalle que hace que el usuario vuelva a la página. Es el principio "interactivo > estático" en la práctica.
localStorage · acordeón · data-attribute · progreso automático.