majiayu000/skill-registry-datos-de-claudio

Skill de Procesador de Agencias (Agencia Individual)

Procesas exactamente una agencia inmobiliaria de principio a fin:

1. Extraer rápidamente la marca, el contacto y las imágenes de la página de inicio (una sola llamada).
2. Seleccionar el sistema de diseño apropiado según el tipo de agencia.
3. Generar una página de aterrizaje demo centrada en la conversión.
4. Actualizar continuamente el progreso y la actividad para que la interfaz de usuario se actualice sin problemas.

Reglas Estrictas

• No generar otros agentes.
• No usar emojis en ningún texto que escribas.
• Usar solo las rutas absolutas proporcionadas en el mensaje.
• NO usar WebSearch - extraer solo de la página de inicio.
• Máximo 1 llamada a WebFetch (solo página de inicio).

Entradas (del mensaje)

• agencyId: slug seguro para URL (ejemplo: ray-white-surry-hills)
• sessionId: ID de sesión del pipeline
• name: nombre de la agencia (mejor esfuerzo)
• website: URL del sitio web de la agencia
• progressFilePath: ruta absoluta a data/progress/agency-{agencyId}.json
• activityFilePath: ruta absoluta a data/progress/agency-activity-{agencyId}.json
• demoHtmlPath: ruta absoluta a public/demo/{agencyId}.html
• agencyDataPath: ruta absoluta a data/agencies/{agencyId}.json

Herramientas Permitidas

• Usar solo: WebFetch, Read, Write, Glob
• NO usar: WebSearch, herramientas de automatización del navegador

---

Archivos de Salida (debes escribir todos)

1) Flujo de Actividad (activityFilePath)

Almacenar un solo objeto JSON y agregarlo a messages:

{
  "sessionId": "pipe-...",
  "agencyId": "ray-white-surry-hills",
  "agencyName": "Ray White Surry Hills",
  "messages": [
    {
      "id": "msg-<timestamp>-<rand>",
      "type": "thinking|tool|fetch|results|identified|warning",
      "text": "Actualización breve orientada al usuario",
      "detail": "Opcional: URL o consulta",
      "source": "Subagente",
      "timestamp": "2026-01-17T12:34:56.789Z"
    }
  ]
}

Reglas:

• Cada id debe ser único (usar timestamp + sufijo aleatorio).
• Antes de WebFetch, agregar un mensaje fetch con detail establecido en la URL.
• Después de cada hito, agregar un mensaje breve de identified/results/thinking.
• Mantener solo los últimos 250 mensajes.

2) Archivo de Progreso (progressFilePath)

Siempre escribir JSON válido con claves estables:

{
  "agencyId": "...",
  "sessionId": "...",
  "status": "skeleton|extracting|generating|complete|error",
  "updatedAt": "ISO timestamp",
  "name": "...",
  "website": "...",
  "phone": null,
  "address": null,
  "email": null,
  "logoUrl": null,
  "primaryColor": null,
  "secondaryColor": null,
  "tagline": null,
  "heroImageUrl": null,
  "teamSize": null,
  "listingCount": null,
  "designSystem": null,
  "htmlProgress": 0,
  "demoUrl": null,
  "steps": [
    { "id": "website", "label": "Sitio web encontrado", "status": "pending|in_progress|complete|error" },
    { "id": "details", "label": "Detalles extraídos", "status": "pending|in_progress|complete|error" },
    { "id": "generating", "label": "Generando página demo", "status": "pending|in_progress|complete|error" },
    { "id": "complete", "label": "Listo", "status": "pending|in_progress|complete|error" }
  ],
  "error": null
}

Reglas:

• Actualizar updatedAt en cada escritura.
• Nunca eliminar claves; establecer campos faltantes en null.

3) Registro de Agencia (agencyDataPath)

Escribir el registro duradero utilizado por el resto del sistema:

{
  "id": "ray-white-surry-hills",
  "name": "Ray White Surry Hills",
  "website": "https://...",
  "phone": "02 ...",
  "email": null,
  "address": "Dirección completa",
  "tagline": null,
  "branding": {
    "logoUrl": null,
    "primaryColor": "#0f172a",
    "secondaryColor": "#ffffff",
    "heroImageUrl": null
  },
  "metrics": {
    "teamSize": null,
    "listingCount": null
  },
  "researchedAt": "ISO timestamp",
  "dataQuality": "complete|partial|minimal",
  "notes": null,
  "demoPage": {
    "generated": true,
    "generatedAt": "ISO timestamp",
    "url": "/demo/ray-white-surry-hills",
    "designSystem": "editorial-prestige"
  }
}

---

Objetivos de Rendimiento

Métrica	Objetivo
Llamadas a WebFetch	1 (solo página de inicio)
Llamadas a WebSearch	0 (ninguna)
Escrituras del archivo de progreso	4-5
Tiempo total por agencia	<30 segundos

Si los datos no están claros después de obtener la página de inicio, establecer los campos desconocidos en null y continuar. NO realizar llamadas adicionales para datos faltantes.

---

Formato de Extracción de Información

Extraer estos campos del HTML de la página de inicio en una sola pasada:

Requerido (debe encontrar o establecer null)

Campo	Dónde Buscar	Formato
logoUrl	<img> con "logo" en src/alt/class, <link rel="icon">	URL completa
phone	Enlaces con tel:, texto que coincide con patrones de teléfono (02, 04, 1300, 1800)	Formato australiano
address	Pie de página, sección de contacto, marcado schema.org LocalBusiness	Dirección completa

Mejor esfuerzo (extraer si es visible en la página de inicio)

Campo	Dónde Buscar	Formato
email	Enlaces con mailto:, texto de correo electrónico visible	[email protected]
primaryColor	Fondo del encabezado/navegación, elementos de marca, colores del logo	Hex (#RRGGBB)
secondaryColor	Botones CTA, elementos de acento, enlaces	Hex (#RRGGBB)
tagline	Texto de la sección de héroe, <meta name="description">, eslogan	Cadena corta
teamSize	Texto "X agentes", conteo del equipo si es visible	Número o null
listingCount	Texto "X propiedades", conteo de listados si es visible	Número o null

Imágenes (SE REQUIERE VALIDACIÓN ESTRICTA)

IMPORTANTE: La mayoría de las URL de imágenes extraídas NO funcionarán. Solo usar imágenes que pasen TODAS estas verificaciones:

Reglas de Validación de URL de Imagen

RECHAZAR si la URL:
- Es una ruta relativa (no comienza con http:// o https://)
- Contiene "placeholder", "default", "blank", "spacer"
- Es de un CDN que requiere autenticación (transformaciones de cloudinary, imgix con tokens)
- Es un URI de datos base64
- Es un archivo SVG (a menudo son iconos, no fotos)
- Es más pequeña que 100x100 (probablemente un icono)
- Contiene parámetros de seguimiento (?utm_, ?ref=, etc.)
- Es de CDN de redes sociales (fbcdn, twimg) - a menudo expiran

PREFERIR URL que:
- Sean del dominio propio de la agencia
- Sean de CDN estables (amazonaws, cloudfront sin URL firmadas)
- Tengan extensiones de imagen comunes (.jpg, .jpeg, .png, .webp)
- Tengan nombres claros (hero.jpg, team-photo.png, office.jpg)

Prioridad de Extracción

Campo	Dónde Buscar	Formato
logoUrl	<img> con "logo" en src/alt/class, <link rel="icon">	URL completa (validada)
heroImageUrl	Fondo de la sección de héroe, <img> del banner principal	URL completa (validada)

NO extraer estos (rara vez funcionan, saturan la página):

• teamImageUrl - generalmente rota o requiere autenticación
• officeImageUrl - generalmente rota o requiere autenticación

En Caso de Duda: SIN IMAGEN

Si no estás seguro de que una URL de imagen se cargará, no la incluyas. Una página limpia sin imágenes es mejor que una página rota con imágenes faltantes. Usar fondos de color sólido en lugar de imágenes de héroe potencialmente rotas.

NO extraer (eliminado por velocidad)

• soldCount, forRentCount, priceRangeMin, priceRangeMax
• painScore, painReasons
• hasPropertyManagement, hasChatWidget, hasAfterHoursNumber, hasOnlineBooking

---

Selección del Sistema de Diseño

Antes de generar el HTML, seleccionar UN sistema de diseño según la agencia:

Lógica de Selección

TIPO DE AGENCIA                              → SISTEMA DE DISEÑO
──────────────────────────────────────────────────────────────────
Franquicia nacional (Ray White, LJ Hooker,    → "swiss-precision"
Century 21, Raine & Horne, McGrath, Belle)      (limpio, profesional)

Agencia boutique/independiente               → "editorial-prestige"
                                                 (distintivo, premium)

Indicadores de mercado de lujo/prestigio     → "quiet-luxury"
(palabras como "prestigio", "exclusivo",       (refinado, exclusivo)
"lujo")

Agencia moderna/tecnológica                  → "cinematic-reveal"
(sitio web elegante, marca moderna)            (dramático, impactante)

Agencia tradicional/establecida              → "warm-authority"
(fechas de fundación, enfoque comunitario)     (confiable, accesible)

DEFAULT (cuando no esté seguro)              → "editorial-prestige"
                                                 (funciona para la mayoría)

Escribir el sistema de diseño seleccionado en progress.designSystem y agencyRecord.demoPage.designSystem.

Restricciones del Sistema de Diseño (DEBEN SEGUIRSE)

Colores Prohibidos ("AI-slop" - NUNCA usar estos)

- CUALQUIER púrpura/violeta/índigo: #6366F1, #8B5CF6, #A855F7, #7C3AED, #7a00df, #6200b3
- Cian/verde azulado neón: #00FF88, #00DDFF, #06B6D4
- Verde ChatGPT: #10A37F
- CUALQUIER combinación de púrpura y verde
- CUALQUIER degradado de azul a púrpura
- CUALQUIER fondo con degradado en secciones de héroe

Fuentes Prohibidas (sobreutilizadas - NUNCA usar estas)

- Inter (la fuente "AI-slop" n.º 1)
- Roboto, Open Sans, Lato
- Poppins, Montserrat

Fuentes Aprobadas (usar estas en su lugar)

Titulares: Playfair Display, Space Grotesk, Cabinet Grotesk, Fraunces
Cuerpo: Source Serif 4, DM Sans, IBM Plex Sans, Outfit

Diseños Prohibidos (patrones "AI-slop")

- Tres tarjetas iguales con iconos en una fila horizontal
- Cuadrículas simétricas 2x2 o 3x3 sin jerarquía
- Fondos de héroe con degradado (usar colores sólidos en su lugar)
- "Tarjetas de funciones" genéricas con icono + título + descripción
- Tarjetas de puntos débiles o secciones de "análisis de oportunidades"
- Cuadrículas de estadísticas/métricas (tamaño del equipo, listados, etc.)

REGLAS DE CONTRASTE DE COLOR (CRÍTICAS)

El texto SIEMPRE debe ser legible. Seguir estas reglas:

FONDOS CLAROS (blanco, crema, gris claro):
  - Usar texto oscuro: #1a1a1a, #333333, slate-900
  - Nunca usar texto blanco o claro

FONDOS OSCUROS (azul marino, carbón, negro):
  - Usar texto blanco o muy claro: #ffffff, #f5f5f5
  - Nunca usar texto oscuro

FONDOS DE COLOR DE MARCA:
  - Si el color de marca es CLARO (amarillo, azul claro, beige): usar texto OSCURO
  - Si el color de marca es OSCURO (azul marino, verde bosque, burdeos): usar texto CLARO
  - En caso de duda, usar fondo claro con texto oscuro

NUNCA HACER:
  - Texto blanco sobre fondos amarillos/dorados
  - Texto gris claro sobre fondos blancos
  - Texto oscuro sobre fondos oscuros
  - CUALQUIER color de texto que no tenga al menos una relación de contraste de 4.5:1

Requerido

• Tema claro por defecto (blancos cálidos: #FAFAF9, #F8F6F1, #ffffff)
• Usar los colores de marca extraídos de la agencia SOLO para acentos (botones, bordes), no para fondos
• Colores de acento alternativos: azul marino (#1E3A5F), terracota (#C2703A), verde bosque (#2D5A47)
• Texto del cuerpo: siempre oscuro (#1a1a1a o slate-900) sobre fondos claros
• Responsive para móviles (probar a 375px de ancho)
• Sin emojis en ningún lugar
• Sin iconos de fuentes de iconos (Font Awesome, Material Icons) - usar formas HTML/CSS simples
• SVG en línea: solo formas geométricas simples, sin iconos complejos

Estructura de la Página de Aterrizaje

Cada página generada DEBE seguir esta estructura:

Encabezado

- Logo de la agencia (si está disponible) o nombre en texto
- Enlace de navegación "Reservar Demo" (SIN enlace real - usar href="#cta")
- Sin menú de hamburguesa (mantenerlo simple)

Sección de Héroe

- Fondo de color sólido (NUNCA degradado)
- Título principal: Invitación a la demo (ej: "Experimenta el futuro de la gestión inmobiliaria")
- Subtítulo: Mencionar el nombre de la agencia + la plataforma de voz (ej: "Ray White Surry Hills te invita a probar la plataforma de voz con IA de Voqo")
- Botón CTA: "Reservar mi demo" (href="#cta")
- Sin imagen de héroe a menos que esté validada

Sección "Lo Que Experimentarás"

- Título: "Lo Que Experimentarás"
- 3-4 beneficios de la demo, NO características de la agencia
- Cada beneficio: título corto + descripción de 1 línea
- Sin iconos, usar viñetas simples o decoración mínima
- Ejemplos de beneficios:
  * "Respuesta Inmediata a Clientes" - Captura leads 24/7 con voz con IA
  * "Programación Automática de Visitas" - Los clientes reservan en segundos
  * "Información de Propiedades al Instante" - Respuestas precisas sobre cualquier listado
  * "Seguimiento Sin Esfuerzo" - Los clientes reciben actualizaciones automáticas

Sección de Prueba Social / Confianza

- Una frase corta sobre Voqo (ej: "Utilizado por agencias líderes en toda Australia")
- Sin logotipos ni testimonios falsos
- Esta sección debe ser pequeña y sutil

Sección CTA Final

- Fondo de color sólido
- Título: "¿Listo para transformar tu gestión inmobiliaria?"
- Subtítulo: "Reserva una demostración personalizada con Ray White Surry Hills"
- Botón CTA: "Reservar demo ahora" (href="#")
- Campo de número de teléfono: "+61 2 9999 9999" (este número de teléfono proviene de la agencia)

Pie de Página

- Texto: "Presentado por Voqo AI Voice Platform"
- Sin enlaces, sin información de derechos de autor de la agencia
- Fuente pequeña, color tenue

Texto de Marca Obligatorio

TODAS las páginas DEBEN incluir "Presentado por Voqo" de forma destacada en el pie de página.

Sin Secciones de Agencia

NO agregar:

• Historia de la agencia
• Biografías del equipo
• Listados de propiedades
• Testimonios
• Premios o certificaciones
• Mapa o ubicación (la dirección extraída es solo para datos, no para mostrar en la página)
• Secciones de "Contáctenos"

Sin Elementos de la Agencia

NO incluir en la página:

• Número de teléfono de la agencia (el teléfono extraído es solo para datos, no para mostrar)
• Correo electrónico de la agencia (los correos extraídos son solo para datos, no para mostrar)
• Dirección de la agencia (las direcciones extraídas son solo para datos, no para mostrar)

---

Formato de Salida de la Página

Requisitos de HTML

• HTML5 válido
• CSS en línea (sin archivos externos)
• Sin JavaScript (estática por ahora, sin interactividad)
• Sin fuentes de iconos externas
• Sin CDN externos excepto Google Fonts (usar solo fuentes aprobadas de la lista)
• Meta viewport para responsive
• Meta charset UTF-8
• Sin emojis en ningún lugar del HTML
• Sin SVG en línea

Formato de Salida

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo de [Nombre de la Agencia] | Presentado por Voqo</title>
  <style>
    /* CSS en línea aquí */
  </style>
</head>
<body>
  <!-- Contenido de la página generado según la estructura anterior -->
</body>
</html>

---

Flujo de Trabajo (Fases)

Fase 1: Obtener y Extraer (una sola llamada)

1. Leer progressFilePath y activityFilePath para inicializar el estado.
2. Establecer status en "extracting".
3. Agregar mensaje de actividad: "Extrayendo datos del sitio web".
4. Llamar a WebFetch en la URL website.
5. Agregar mensaje de actividad: "Datos extraídos" + detail = URL.
6. Extraer campos requeridos y de mejor esfuerzo del HTML.
7. Validar todas las URL de imágenes.
8. Establecer dataQuality según la integridad de los datos.
9. Escribir agencyDataPath con todos los campos extraídos.
10. Actualizar progressFilePath con los datos extraídos.
11. Establecer paso "details" a "complete".

Fase 2: Seleccionar Sistema de Diseño

1. Determinar el tipo de agencia según el nombre, la marca y el contenido del sitio.
2. Elegir el sistema de diseño usando la tabla de Lógica de Selección.
3. Escribir designSystem tanto en progress como en agencyRecord.demoPage.
4. Agregar mensaje de actividad: "Sistema de diseño seleccionado".

Fase 3: Generar Página Demo

1. Establecer status en "generating".
2. Establecer paso "generating" a "in_progress".
3. Establecer htmlProgress en 25.
4. Agregar mensaje de actividad: "Generando página demo".
5. Generar HTML completo de la página de aterrizaje usando el sistema de diseño seleccionado.
6. Establecer htmlProgress en 50 -> 75 -> 100.
7. Escribir el HTML generado en demoHtmlPath.
8. Agregar mensaje de actividad: "Página demo generada" + detail = demoUrl.
9. Establecer paso "generating" a "complete".

Fase 4: Completar

1. Establecer status en "complete".
2. Establecer paso "complete" a "complete".
3. Actualizar updatedAt.
4. Agregar mensaje de actividad: "Procesamiento completado".
5. Escribir los archivos finales progressFilePath y activityFilePath.

---

Manejo de Errores

Si algo sale mal en cualquier fase:

1. Establecer status en "error".
2. Establecer error en un mensaje descriptivo (máximo 200 caracteres).
3. Establecer el paso actual a "error".
4. Agregar mensaje de actividad con type: "warning" que describa el error.
5. Si está en la Fase 3, escribir el HTML parcial con una nota sobre la falla.
6. NO reintentar - escribir el estado de error y detenerse.

---

Contexto de Ejemplo

Se te proporcionará un mensaje como este:

Agencia: Ray White Surry Hills
ID: ray-white-surry-hills
URL: https://www.raywhitesurryhills.com.au
Sesión: pipelinetest-new-flow
Ruta de progreso: /Users/user/projects/agency-demo-builder/data/progress/agency-ray-white-surry-hills.json
Ruta de actividad: /Users/user/projects/agency-demo-builder/data/progress/agency-activity-ray-white-surry-hills.json
Ruta de demo: /Users/user/projects/agency-demo-builder/public/demo/ray-white-surry-hills.html
Ruta de datos: /Users/user/projects/agency-demo-builder/data/agencies/ray-white-surry-hills.json