feitangyuan/motion-web

¿Qué hace motion-web?

Web creativa centrada en el movimiento. El skill maneja todas las fases: referencia → concepto → especificación → construcción → auditoría.

Este skill construye páginas web completas. El movimiento es lo que las hace buenas; no es todo el trabajo. Una solicitud sin ninguna mención de movimiento — "haz una landing page", "ayúdame a hacer este sitio web" — sigue siendo competencia de este skill, y el entregable es un sitio terminado: stack, tokens, secciones, contenido, componentes, estados, metadatos, despliegue.

Orden de prioridad — 1 y 2 son igual de importantes:

1. Concepto de movimiento y coreografía de interacción
2. Diseño de página — estructura, escala tipográfica, paleta, ritmo de espaciado, el aspecto que tiene antes de que nada se mueva
3. La página como artefacto construido — secciones y su contenido, el vocabulario de componentes, la capa de tokens, los estados fuera del camino feliz (page-blueprints.md, components.md, project-setup.md, production-polish.md)
4. 3D ligero o canvas solo cuando fortalezca la página
5. Rendimiento, accesibilidad, alternativas para movimiento reducido

Un gran mecanismo en una página con aspecto predeterminado es una página fallida. El movimiento es la ventaja, no la excusa. El fallo más común de este skill es entregar una interacción inteligente pegada a un diseño que nadie diseñó — si la página te daría vergüenza con el movimiento desactivado, no está terminada, y ningún ajuste de muelle lo arregla. El diseño no es el paso 2 en el tiempo; es una segunda cosa que también debe ser cierta al final. → references/page-design.md, references/design-slop.md

Este es un skill de diseño y construcción para una clase de sitio: web creativa y de marketing — páginas de aterrizaje, páginas de producto, portafolios, sitios de estudio, campañas, editorial, documentación ligera. Los construye de principio a fin. No es un skill para dashboards / administración / UI de aplicaciones con muchos datos, y no es un generador completo de escenas 3D (esos se redirigen a 3d-scene-studio). Una página creativa que contiene fragmentos en forma de aplicación — una tabla de precios, un inicio de sesión, una captura de pantalla de consola — está dentro del alcance; una interfaz de producto donde se ha iniciado sesión no lo está.

---

Detección de Intención del Agente (CRÍTICO — Léelo Primero)

El usuario a menudo dirá muy poco. Detecta su intención a partir de una entrada mínima y actúa de forma autónoma.

Mapa de Señal → Intención

Qué envía el usuario	Intención detectada	Qué hacer
"Haz una página web" / "Haz una landing page/sitio web/portafolio" con un tema, sin referencia	full-build	El sitio completo, no un mecanismo. page-blueprints.md → project-setup.md → page-design.md → construir → components.md → production-polish.md
"¿Qué poner en esta página?" / "¿Qué secciones debería tener?" / "Arquitectura de la información" / "¿Cómo escribir el texto?"	blueprint	page-blueprints.md — elige una columna vertebral, escribe texto real, marca cada hecho inventado
"Navegación" / "Botón" / "Formulario" / "Tarjeta" / "Pie de página" / "FAQ" / "Tabla de precios" / "Ventana emergente" / "Componente"	component	components.md — primero la tabla de dialectos, luego la matriz de estados. Un componente sin sus estados no está terminado
"¿Qué stack técnico usar?" / "¿Astro o Next?" / "¿Cómo iniciar el proyecto?" / "Design token" / "Fuente" / "Despliegue"	setup	project-setup.md — la escalera de página ≠ escalera de movimiento; comienza en el peldaño 0 y sube
"Parece demo, no producto final" / "La vista previa de OG está vacía" / "No tiene favicon" / "404" / "Estado vacío" / "Modo oscuro" / "El formulario no tiene validación"	polish	production-polish.md — todo es comprobable; ejecuta §9 en lugar de estimar
Una URL desnuda (sin otro texto)	url-drop	Ábrela y descomponla (pasos 1–2 del Modo Réplica), luego pregunta: ¿reconstruir esto, o usarlo como referencia para algo suyo?
Una URL + "haz una página web" o "referencia esto"	replicate → build	Descompón la URL primero (Modo Réplica), luego propón un concepto de movimiento para el contenido del usuario
Referencia + "réplica y guárdalo como caso" / "guárdalo en el skill" / "conviértelo en caso de estudio"	case-authoring	cases/AUTHORING.md — primero el control de Fase 0: elimina las imágenes de la referencia; si no sobrevive nada, resuelve los activos antes de construir, no después
Una URL + "réplica" / "haz uno similar" / "referencia esto para hacerlo"	replicate	Descomponer → mapear a patrones → construir inmediatamente.
Una URL a un artículo académico/artículo/blog	doc-drop	Léelo, nombra las técnicas con valores extraíbles, construye a partir de una si se te pide (Documento/Artículo)
Un resumen vago ("haz una página web genial" / "haz un portafolio")	freeform-build	Orquesta a través de composition-guide.md → elige estilo+arco argumental de forma independiente
Solo un tema ("haz una landing page sobre IA")	spec → build	Orquesta a través de composition-guide.md → propón dirección visual, construye inmediatamente
Un resumen detallado con referencias	spec → build	Escribe MOTION_SPEC.md → obtén aprobación → construye
"Audita" / "¿Qué problemas hay?" / "brecha"	audit	Inspecciona el trabajo existente para detectar brechas de movimiento/rendimiento/accesibilidad — incluyendo el fotograma estático, según design-slop.md
"No es bonito" / "Es muy feo" / "Parece hecho por IA" / "No tiene sentido de diseño" / "Es mediocre"	design-audit	Captura de pantalla con el movimiento desactivado y ejecuta las compuertas en design-slop.md. No ajustes los muelles — la queja es sobre el fotograma estático
"Formato" / "Tipografía" / "La letra es muy pequeña" / "Espacio en blanco" / "Estructura" / "Todas las secciones se ven igual"	design	page-design.md — macroestructura, escala tipográfica, ritmo de espaciado, medido contra los ganadores de premios actuales
"Añade…" en una página existente	incremental-build	Extiende la implementación actual con nuevo movimiento
Una referencia de video (clip de Pinterest/Dribbble/X)	video-ref	PARA — ejecuta el Protocolo de Referencia de Video a continuación antes de escribir cualquier código
"La sensación es mala" / "Es demasiado rígido" / "No sigue" / "Es demasiado estable" sobre un movimiento existente	handfeel-tune	Audita contra handfeel.md — muelles, acoplamiento de velocidad, movimiento secundario
"Sigue pero le falta algo" / "Tiembla" / La sensación cambia con la tasa de fotogramas en algo que sigue (cámara, cursor, riel, tooltip)	handfeel-tune	No es el muelle de §1 — handfeel.md §7: 1-exp(-k·dt), el término de adelanto speed/k, y nunca corregir después del filtro
"¿No se puede usar GSAP?" / Solo es una entrada o paralaje / Quiere algo más ligero	build	Verifica primero el peldaño 1.5 — animation-timeline nativo / animation-trigger / sibling-index() → escalera de build-mode.md + pattern-recipes.md #16. Firefox obtiene el estado final estático
El material de archivo es un lugar real (filmado/escaneado), hay que "entrar" en él	build	Peldaño 5.5 — Splats Gaussianos 3D antes que modelos → escalera de build-mode.md
Las tarjetas/imágenes se tienen que doblar, banderas, pasar páginas, clavar capturas de pantalla en una superficie 3D, "el skew no es suficiente"	warp	Homografía con pin en esquinas → pattern-recipes.md #17. Protege cada cuadrilátero y limita la inclinación del borde a asin(h/w) — un cuadrilátero sin protección pinta un bloque del tamaño de la pantalla sin error
"No se puede hacer clic" / "Solo uno se puede hacer clic" / "Nadie lo encontrará" / "No se ve" sobre un movimiento existente	affordance-audit	No toques el código de prueba de impacto primero. Audita contra affordance.md — el mecanismo suele estar bien; la invitación falta o ha caducado
Un montón de activos de imagen + "haz una escena 3D" / "que tenga profundidad" / "la cámara pueda entrar"	image-plane-3d	No recurras a modelos. Construye la escena a partir de planos planos en una cámara de perspectiva real → image-plane-3d.md (peldaño de escalera 5)
"Se ve como pegado" / "No se integra" / "Parece un recorte" en una escena renderizada	image-plane-3d	Mide antes de tocar el arte: media de R−B y luminancia por lote de activos, sombras de contacto presentes → image-plane-3d.md §6–7
"¿Con qué debería dibujar esto?" / "¿DOM o canvas?" / La página solo genera divs y fuentes del sistema / La referencia claramente no se puede hacer con DOM	render-layer	Primero la capa, luego el mecanismo → render-layer.md §1. La capa es una declaración, escríbela en el README del caso, verifícala con verify_case.py --layer
3D con estilo dibujado a mano / tinta / línea de contorno, "parece dibujado, no renderizado", boil / líneas temblorosas / textura de papel	ink-render	render-layer.md §3 — contorno de profundidad discontinua (desactivar pliegues de normales), warp estático y boil dinámico separados, reloj de boil a 11Hz vs renderizado a 60fps
Placas / renders en bruto que aún necesitan recorte, "recorte", "cómo meter el material en la escena", "la imagen está borrosa"	asset-pipeline	Clave contra el fondo propio de la imagen, recorta al bbox alfa, escribe un script para los metadatos, imprime el presupuesto de resolución por elemento → image-asset-pipeline.md
Cualquier verificación headless; un número no coincide con lo que ves; "cómo verificarlo"	verify	Construye primero la superficie de prueba — relojes fijables, __seek, __hold, salidas de estado — luego mide → verification-harness.md
"En esta parte no pasa nada" / "El ritmo es malo" / "Un montón de texto aparece de golpe" en una línea de tiempo de scroll	timeline-audit	Coloca cada pista contra un eje de scroll; los tiempos muertos son mesetas coincidentes, no una capa lenta → timeline-orchestration.md
Escena de scroll largo con muchos activos; "lento", "carga lenta", "se queda sin memoria", cientos de placas	scene-streaming	Activa por ventana de pantalla, divide las cargas grandes, cede dentro del escaneo, elimina completamente → scene-streaming.md
Cualquier cosa con sonido — BGM, ambiente, SFX de interacción, "demasiado poco sonido", "el sonido ambiental se oye pero que no moleste"	scene-audio	Tres buses (bgm / mano / mundo), curvas por acto, eventos discretos sobre una cama más fuerte → scene-audio.md

Nunca le preguntes al usuario qué modo usar. Detéctalo. Procede. Solo detente si el resumen es realmente ambiguo entre dos resultados muy diferentes (por ejemplo, especificación vs. construcción inmediata).

---

Protocolo de Referencia de Video (硬规则 — No Adivinar)

Desencadenante: la referencia es un video que no puedes ver realmente — pin de Pinterest, toma de Dribbble, clip de X, enlace corto externo. Un título o descripción de texto NO es información de movimiento.

0. Lee el hilo antes de concluir que no hay página en vivo. El autor casi siempre publica la URL en una respuesta, y las respuestas también te dicen si la pieza es siquiera una página web. Medido el 2026-09-02: una sesión anterior declaró siete referencias de video sin URL y gastó su Fase 1 en medición de fotogramas; las siete tenían sitios en vivo, publicados por los propios autores, y tres de cuatro clips en una publicación resultaron ser renders de Jitter / Figma Motion / Rive sin implementación web (cases/AUTHORING.md Fase 1). safe-x tweet <url> --json, luego resuelve cada enlace t.co en las respuestas.
1. Nunca construyas movimiento a partir de una suposición. Si todo lo que extrajiste es un título/descripción, conoces el tema, no el movimiento. Construir de todos modos quema una iteración completa — este es un modo de fallo documentado (2026-07-06, héroe de mariscos: supuso "órbita", el real era una diagonal ascendente; dos reconstrucciones).
2. Pide 2–3 fotogramas clave inmediatamente. Una frase: "No puedo abrir este video, envíame 2-3 fotogramas clave (entrada/intermedio/salida)".
3. Expresa la trayectoria como geometría explícita antes de codificar, y obtén confirmación:
   • Puntos de anclaje: dónde entra / llega al punto máximo / sale el elemento (esquinas, tercios)
   • Actitud: la rotación sigue la tangente de la trayectoria / se mantiene constante / se retrasa
   • Reacciones secundarias: qué más se mueve (formas de fondo, líneas, texto) y cómo
   • Ejemplo: "Diagonal ascendente desde abajo a la derecha → centro → sale por arriba a la izquierda, cabeza de pez siempre apuntando fijo arriba a la izquierda" — las suposiciones incorrectas mueren aquí, no en el código
4. Solo entonces mapea a pattern-recipes / handfeel.md y construye.

Una sola captura de pantalla sigue la misma regla: un fotograma da la pose, no la trayectoria. Si la ruta importa, pide más fotogramas.

---

Modo Réplica (复刻模式)

Cuando el usuario envía una URL con "réplica" / "haz uno similar" / "¿puedes hacer este efecto?" — descomponla, luego construye. No hay paso de almacenamiento; el entregable es la página.

Ruta de Ejecución de Réplica

1. Abre la página y léela en tres capas, con las herramientas de navegador disponibles (Claude Preview, browser-use, Playwright): la pila (biblioteca, easing, fotogramas clave, variables CSS — los nombres de los bundles las nombran), la coreografía de scroll (qué elemento está fijado sobre qué banda, rieles y su distancia en píxeles, tasas de paralaje, propiedades depuradas, puntos de entrada — muestra ~9 posiciones de scroll y diff getBoundingClientRect más estilos calculados entre ellas), y la capa WebGL (recuento de programas, llamadas de dibujo, nombres de uniformes personalizados; envuelve getContext antes de que se ejecuten los scripts de la página si necesitas las fuentes del shader). Dos scripts cubren las mitades medibles: scripts/measure_structure.py <url> para la página estática (secciones, navegación, botones, escalas de tokens, medios, metadatos, desbordamiento móvil) y scripts/measure_churn.py <url> para cuánto de la página se mueve realmente bajo una rueda real. La URL debe ser el trabajo en sí mismo, nunca un listado de galería (awwwards.com/sites/<slug>): una página de listado te entrega el propio chrome de la galería, y seis ganadores diferentes regresan con la misma biblioteca, los mismos fotogramas clave y la misma fuente.

2. Descompón — indica lo que encontraste y cita los números en lugar de impresiones:

   • "GSAP 3.12 + ScrollTrigger + Lenis; .home-animate__wrapper está fijado en 0.25–0.50, durante el cual .icon se mueve horizontalmente +1545px, la salida es un escalonado de tres segmentos 0.25/0.38/0.62"
   • "El fondo es WebGL2 nativo, 14 programas, 944 llamadas de dibujo, los uniformes incluyen bloomStrength/blurTexture1-5 y cloudCoverage/cloudDensity — es UnrealBloom + nubes volumétricas"

   Nunca informes "usó WebGL" solo por un contexto — un contexto de 300×150 sin tamaño y sin programa vinculado es detección de capacidad al estilo Modernizr, no una escena. Cuenta programas vinculados y llamadas de dibujo.

3. Mapa a pattern-recipes — encuentra la receta más cercana en references/pattern-recipes.md

4. Llena el vacío — lo que la referencia usa que no tenemos en las recetas, escríbelo desde cero basándote en los valores extraídos

5. Construye inmediatamente — prepara la página, ejecútala, verifica visualmente

6. Informa — "Réplica del efecto central de [sitio], usando [X] para implementar [Y], la diferencia con el original es [Z]"

Réplica ≠ Copia

• Haz: Recrea el patrón de interacción, el carácter de movimiento, la sensación de tiempo
• No hagas: Copies colores de marca propietarios, texto de copia exacto, UI de producto identificable
• Haz: Adapta la técnica al contenido y la paleta del usuario
• Nota en el informe qué se adaptó vs. qué fue fiel al original

---

Modo de Construcción Libre (Cuando el Usuario no Da Dirección)

Cuando el usuario dice "haz una página web" / "haz lo que sea" / "piensa en un tema" o da un tema vago simple (por ejemplo, "haz una landing page de plataforma de agentes de IA"), esto es una invitación a ser creativo. NO recurras a una plantilla genérica, NO uses un mapeo de ruta rígido de 1 a 1, y NO hagas preguntas de a clarificación.

Ruta de Acción de Construcción Libre (Bucle Creativo en Tiempo de Ejecución — La Creación Ocurre Durante la Ejecución, No

… [truncado para traducción]