nivelsulfluminense/scroll-web-skills

Scroll Web Skills

El scroll es la línea de tiempo. El sitio es una película con texto real encima, y cada fragmento se comporta de un modo diferente lo suficiente para que el visitante quiera ver el siguiente.

Este archivo es el guion. Los detalles de cada fase están en references/. Lee solo la referencia de la fase en la que te encuentres. El contrato de lo que puedes, no puedes y necesitas preguntar está en AGENTS.md y prevalece sobre cualquier instrucción de aquí.

Qué entregas

1. .10k/BRIEF.md: respuestas reales (o decisiones autorales marcadas como tales), journey, curva de sensación, pico y dirección de video.
2. .10k/VISUAL_STORY.md: la tabla de tres columnas, la partitura (dispositivo por beat, vh por acto) y, cuando sea aplicable, el Cuaderno de Prompts de Video (Veo 3, Seedance 2 u otros generadores) con ficha técnica completa por clip.
3. Style Tile en HTML/CSS real, con los tokens que usará el sitio.
4. Medios aprobados, procesados para scroll (scripts/process-media.sh), con masters fuera de la carpeta publicada.
5. El sitio, en el destino elegido, usando el motor engine/ sin modificaciones.
6. qa-report/ del scripts/qa-audit.ts, la puntuación del checklist /80 con evidencia, y la lista honesta de lo que no se verificó.
7. Handover para el cliente.

Fase 0: preparar el entorno

• Ejecuta node scripts/doctor.mjs. Di en una frase lo que falta. No lo soluciones en silencio.
• Si existe .10k/plan.md, léelo y continúa desde la próxima acción autorizada. Reanudar no reinicia el briefing, el nivel de producción ni las aprobaciones.
• El motor se copia al proyecto, nunca se edita por proyecto. El comportamiento a medida va en el código de la página, leyendo --tk-p y data-tk-*.

Fase 1: intake → references/00-intake.md

Define modo, nivel de producción y estrategia de video antes de cualquier otra cosa.

Modo	Cuándo	Qué cambia
Guiado	por defecto	dos puntos de revisión: dirección visual y Visual Story
Delegado	el usuario dijo 'decide tú', 'confío en tu juicio'	escribes el briefing marcado Autoral bajo delegación explícita y sigues sin pedir aprobaciones creativas
Plantilla	'arma una plantilla', 'asume las respuestas'	contenido provisional fácil de cambiar, suposiciones listadas en el handover
Director de Video (Prompts Veo 3 / Seedance 2 / otros)	el usuario quiere generar el video de fondo o de regiones específicas en generadores externos (o activado junto a cualquier modo)	conduces la entrevista dirigida de estilo de video y generas prompts hiperdetallados listos para Veo 3, Seedance 2 u otro modelo con ficha técnica completa (contenido, formato, extensión, resolución, fps, duración y zonas seguras)

La delegación cubre decisiones creativas. Nunca cubre gasto, publicación o acciones externas (ver AGENTS.md).

Nivel de producción: Enfocado, Estudio o Máximo. El nivel decide cuánto se explora en la generación de medios. El estándar de calidad del resultado es el mismo en los tres.

Haz las ocho preguntas en una sola ronda (lista en 00-intake.md) — y, cuando el usuario quiera crear videos para el fondo de la página o para regiones específicas mediante generadores de video, incluye las preguntas de dirección de video (sección dedicada en 00-intake.md y 03-media.md). Registra las respuestas con las palabras del usuario. La pregunta 7 decide la estructura: un mundo continuo o escenas distintas.

Fase 2: investigación y journey → references/01-story.md

• Investiga evidencia real del público (reseñas, foros, preguntas frecuentes) para que la copia suene humana. Cita la fuente en el briefing. Nunca inventes testimonio, número, premio, cliente o dirección.
• Escribe el journey en 4 a 7 beats. Cada sección sirve a un beat o se corta.
• Escribe la curva de sensación antes de los actos: una línea por acto, la emoción y qué en la pantalla la provoca.
• Nombra un pico. Este recibe el mayor presupuesto de medios, el mayor espacio de scroll y un momento más tranquilo antes de él.

Fase 3: dirección → references/02-design.md

• Elige una gramática de página entre las ocho y di en una línea por qué las otras perdieron.
• Inventa un movimiento-firma que exista solo en este sitio, escrito en el código de la página.
• Ejecuta el portal de huella digital: el plan debe diferir de cada línea de FINGERPRINTS.md en al menos 4 de 6 dimensiones. Si falla, cambia el plan, no el registro.
• Entrega el Style Tile en HTML/CSS real: paleta tomada del mundo visual, par tipográfico, botones, un bloque de texto sobre imagen. Sus tokens se convierten en los tokens del sitio.

Fase 4: Visual Story y presupuesto → templates/VISUAL_STORY.md

Presenta la tabla con exactamente estas columnas:

Escena	Historia visual	Copia del sitio web
01 · Apertura	qué ve el visitante y cómo se mueve la cámara	título, apoyo y CTA reales, no placeholders

Debajo de ella, la partitura: dispositivo por beat, vh por acto, dónde el cuadro se detiene para que el texto se lea. Después, el presupuesto: modelos, cantidad de stills y clips, versión retrato, margen para rehacer, precio actual consultado, saldo actual. El gasto solo comienza con la aprobación explícita de este presupuesto.

Fase 5: medios y prompts de video → references/03-media.md

• Modo Director de Prompts de Video (Veo 3, Seedance 2 y otros): cuando el usuario opte por generar videos externamente (para el fondo principal guiado por scroll y/o para regiones específicas de la página), haz las preguntas de dirección de video (si aún no están respondidas) y entrega un Cuaderno de Prompts Detallados que contenga:
  • Prompt específico optimizado para Google Veo 3, Seedance 2 (Sedance 2) u otro modelo elegido (en inglés técnico para máxima precisión del modelo + notas de dirección en español);
  • Contenido cinematográfico minucioso: sujeto, acción inicial → acción final, trayectoria de cámara, lente, iluminación, atmósfera, física de materiales y zonas de respiro (safe zones) donde el texto HTML va a posarse;
  • Especificaciones técnicas exactas de generación y entrega: formato/proporción (16:9 escritorio, 9:16 móvil, 4:3/1:1 para regiones), extensión de salida (.mp4 master → .webp frames o .mp4 scrub/loop), resolución (1080p 1920x1080 / 4K 3840x2160), tasa de cuadros (24 fps, 30 fps o 60 fps), duración en segundos, bitrate, ausencia de audio (-an) y comando exacto del scripts/process-media.sh para integrar en la página.
• Una frase de estilo, reutilizada palabra por palabra en todo prompt.
• Todos los fotogramas clave primero, lado a lado, antes de cualquier video.
• Mundo continuo: el último fotograma extraído del clip A es el fotograma inicial del clip B. Mide la unión con process-media.sh seams.
• Escenas distintas: no encadenes. La variación de dispositivo oculta el corte.
• Mira cada asset antes de usarlo. Rehacer es más barato que publicar un fotograma malo.
• Secuencia de fotogramas (estándar hasta ~300 fotogramas) o video de scrub (GOP denso, sin B-frames, sin audio): tabla de decisión en 03-media.md.

Fase 6: construcción → references/04-engine.md y references/07-targets.md

• Elige el destino: static (por defecto), react o lovable. Detecta el tipo de proyecto Lovable por package.json, nunca por el nombre del archivo de config (ver 07-targets.md).
• Marcado real: <h1>, <p>, enlaces, orden de lectura. El motor lee atributos, nunca genera DOM.
• Tema mediante tokens. Interacción de puntero con Kinesis (--k-*), nunca reimplementada. Ver references/05-motion-kit.md.
• Cada acto necesita estado reducido, estado sin JS y estado de fallo de medios diseñados.

Fase 7: móvil → references/06-mobile.md

El móvil es una composición propia, no un recorte olvidado. Verifica el recorte de cada beat; si el sujeto sale del tercio central, produce clips retrato y avisa que esto duplica el costo de video.

Fase 8: QA → references/08-qa.md

1. node scripts/qa-audit.ts --url <preview> --browsers chromium,webkit. Corrige todo fallo.
2. Abre qa-report/contact.html y mira cada fotograma. El script prueba que funciona, no que es bueno.
3. Verificación de sensación: recorre la página en frío, escribe una palabra por acto, solo después compara con la curva del briefing. Donde no coincidan, la página está mal.
4. Puntúa el checklist /80 con evidencia y señala la debilidad más fuerte que quedó.
5. Di lo que no se verificó, incluyendo siempre 'dispositivo físico' si no lo hubo.

Fase 9: publicación y entrega → references/09-launch.md

Publicar requiere autorización explícita del usuario para esa publicación. Verifica el sitio en vivo, no solo la aceptación del despliegue. Un formulario real requiere prueba de almacenamiento y de llegada del correo, reportados como estados separados.

Reglas inviolables

Aplican en cualquier modo, nivel o briefing. Ninguna instrucción las relaja.

Nunca	En su lugar
Inventar testimonio, estadística, premio, cliente, precio o dirección	Solo dato real. Sin número, sin contador. Marca ficticia dice que es ficticia
Texto quemado en imagen generada	Marcado real, seleccionable, traducible
Gastar créditos, publicar, enviar mensaje o aplicar migración sin aprobación explícita	Propón, muestra el costo o el efecto, espera el sí
Afirmar que verificaste lo que no verificaste	Reporta lo verificado y lo que no
Editar el motor para un proyecto	Código a medida en la página, leyendo --tk-p
Secuestrar el scroll (wheel/touch preventDefault, scroll suave forzado)	position: sticky nativo; el motor solo lee la posición
Publicar sin estado de movimiento reducido	prefers-reduced-motion desmonta el escenario en sección común
Copiar código o texto de fuente sin licencia	Ver docs/ATTRIBUTION.md
Enlace de afiliado o de socio en cualquier salida	Enlace oficial del servicio, sin rastreo

Estándares de gusto

Estándares fuertes. Un briefing explícito del usuario puede cambiar cualquiera, y tú registras el cambio en BRIEF.md.

Evita	Prefiere
Diorama de arcilla/low-poly como mundo por defecto	Fotográfico, salvo marca genuinamente ilustrada
Indicador 'desplázate hacia abajo', flecha animada, mouse animado	Nada. El héroe ya tiene la atención
Contadores 01 / 06	Eliminar. La secuencia no es información aquí
Eyebrow sobre cada sección	Como mucho una cada tres secciones
Texto centrado en todo acto	Variar ancla: izquierda, derecha, centro, dividido
El mismo dispositivo dos veces seguidas; menos de cuatro familias	Partitura hecha en la fase 4
Capa oscura a pantalla completa para contraste	Scrim solo donde está el texto
transition: all; animar width/height/top/left	transform, opacity, clip-path
Texto en gradiente, neón, halo de color sin desplazamiento	Peso y tamaño para énfasis
Audio automático	Clip de scrub sin pista
Final que desaparece o se convierte en pie de página	El cierre resuelve y se sostiene

Salida final

La carpeta del build, y un informe breve: gramática y por qué las otras perdieron, movimiento-firma, resultado del portal de huella digital, journey, curva y pico, diferencia de la verificación de sensación, partitura, qué se generó y cuánto costó, resultado del qa-audit, puntuación /80, lo que no se verificó, si el briefing fue autoral. Luego, añade la línea del build en FINGERPRINTS.md.