Communitygithub.com

KrostyMall/Landing-SENSORITY

Guía profunda para activos de ANIMACIÓN en juegos: ciclos de movimiento, keyframes de acción, secuencias de efectos y hojas de sprites animados, construida alrededor de un pipeline basado en video.

¿Qué es Landing-SENSORITY?

Este skill define las leyes de movimiento, el control de calidad de bucles y el pipeline definitivo para generar activos de animación 2D para juegos (ciclos de marcha/carrera, ataques, animaciones de reposo, efectos, banderas, fuego, hojas de sprites). Está diseñado para ejecutarse en un sandbox de construcción de aplicaciones, utilizando exclusivamente los skills `video2dsprite` (generar video desde imagen y cosechar frames) o `generate2dsprite` (hojas de sprites con fondo magenta `#FF00FF`). No se debe usar ffmpeg de forma libre ni fondos de color hexadecimal arbitrario. El skill establece que el generador de video entiende el movimiento (alternancia de piernas, continuidad de arcos, dinámica de tela y fuego) y produce frames reales sin necesidad de que el modelo de imagen imagine poses intermedias. Incluye un "flip test" para verificar que la secuencia bulea correctamente: el último frame debe fluir de vuelta al primero. Se recomienda usar `video2dsprite` como pipeline predeterminado para ciclos de locomoción y `generate2dsprite` para hojas de sprites fijas de alta calidad. Las leyes de movimiento cubren: continuidad de trayectorias, física aparente en imágenes estáticas, energía apropiada (movimiento sutil = frames casi iguales) y que las extremidades/props/efectos no teletransporten, desaparezcan o se dupliquen entre frames adyacentes.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/KrostyMall/Landing-SENSORITY/tree/HEAD/.grok/skills/game-animation-frames

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Fotogramas de Animación — video primero

El generador de imágenes dibuja poses; el generador de VIDEO entiende el movimiento — la alternancia de piernas, la continuidad de arcos, la dinámica de tela y fuego vienen gratis porque el video debe animarlos. Así que no le pidas al modelo de imagen que imagine poses a medio movimiento: anima la base y cosecha fotogramas reales.

Ejecución en el sandbox de construcción de apps (leer primero)

Este skill es doctrina (leyes de movimiento, control de calidad de bucles, cuándo usar video). En el sandbox de construcción de apps, no ejecutes una cosecha libre con ffmpeg ni inventes un fondo claveable de color #hex aleatorio.

PasoQué hacer
Sprites de producción / cuadrículas fijasgenerate2dsprite — hojas magenta sólidas #FF00FF + scripts de croma
Locomoción más densa desde videovideo2dsprite — base fija sobre #FF00FF → imagine_image_to_video → scripts del skill (ffmpeg + croma)
Fondo claveableSiempre #FF00FF al usar cualquiera de los dos pipelines (requerido para croma)
Este skillBucle / flip-test / leyes de movimiento a continuación — aplica después de ejecutar el pipeline

Abre .grok/skills/video2dsprite/SKILL.md o .grok/skills/generate2dsprite/SKILL.md y sigue sus flujos de trabajo para la generación y el postprocesado. Luego aplica las leyes y el flip test de aquí antes de enviar los fotogramas al juego.

Pipeline predeterminado (intención)

  1. Fotograma base. Sujeto en pose neutra/inicial, palabras de estilo completas, vista lateral / apropiada para el juego, fondo sólido #FF00FF (croma del sandbox). Se aplican los valores predeterminados de game-asset-core.
  2. Animar. imagine_image_to_video desde la base: un movimiento claro, en el lugar, cámara estática ("el caballero camina en el lugar, vista lateral, cámara bloqueada", 6s). Mantén la toma simple — un sujeto, un movimiento. Prefiere ejecutar esto a través de video2dsprite para que la cosecha y el croma sean consistentes.
  3. Cosechar + limpiar. Usa los scripts de video2dsprite (no ffmpeg -i … fps=12 de forma libre). El relleno magenta / eliminación de matiz vive allí; no vuelvas a clavear con un #hex plano diferente a menos que abandones por completo el pipeline magenta.
  4. Seleccionar. Elige fotogramas que (a) capturen las fases distintas del movimiento y (b) BUCLEN — el final de la secuencia debe fluir de vuelta a su inicio. No fuerces un número: si el movimiento se lee mejor con 8, 10 o 12 fotogramas, entrega esa cantidad (más fotogramas = más suave en el motor). Para un ciclo, selecciona un período completo usando puntos de referencia del movimiento (contactos de pies, extremos de alas, picos de llama).
  5. Empaquetar. Entrega los fotogramas en orden de reproducción (nombres con relleno de ceros) y/o una hoja según las reglas de game-asset-core (celdas uniformes, sin divisores) — o las tiras/cuadrículas transparentes emitidas por video2dsprite / generate2dsprite. Indica los fps previstos.

Vuelve a imagine_text_to_image fotograma clave por fotograma clave (todavía sobre #FF00FF cuando postproceses con los scripts de sprites) solo cuando el video falle el movimiento (raro: poses muy estilizadas, fotogramas clave dramáticos únicos) — y entonces planifica las fases tú mismo y obedece las leyes a continuación. Prefiere generate2dsprite para cuadrículas multiphotograma de producción nítidas.

Leyes de movimiento (verifica contra estas, sea cual sea el pipeline)

  • Los ciclos bulean; los andares alternos pasan la mitad del período reflejados.
  • Continuidad: extremidades, accesorios, anatomía, efectos se mueven en trayectorias continuas — nada se teletransporta, desaparece o se duplica entre fotogramas adyacentes.
  • Física legible en imágenes estáticas: en el aire muestra aire, la anticipación comprime, el seguimiento excede; los efectos permanecen anclados a su origen a menos que la solicitud los mueva.
  • La energía coincide con lo solicitado: reposo/sutil significa fotogramas apenas diferentes.

Verificar — el flip test

Visualiza los fotogramas finales estrictamente en orden y narra el movimiento; verifica el cierre del bucle explícitamente (último→primero). Una vacilación en tu narración es un fotograma fallido. El pipeline de video normalmente pasa esto en el primer intento — por eso es el predeterminado.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

KrostyMall/Landing-SENSORITY

Add user accounts and sign-in to this TanStack Start app. Use when the app needs authentication, sign-in, user accounts, protected routes, or per-user data. Triggers on "auth", "login", "log in", "sign in", "sign up", "account", "users", "authentication", "protected", "who is logged in", "current user", "per-user".

KrostyMall/Landing-SENSORITY

Build browser games and interactive/canvas/3D experiences in this TanStack Start + React app. Use for any game, simulation, or WebGL/Canvas experience — 2D or 3D, single-player. Covers the game loop & timing, 3D orientation/camera conventions, collision, performance, assets, audio, save, game feel, and per-genre playbooks. For WASD / vehicle / flight **input signs and inverted A/D**, open the **`controls`** skill — do not rely on this file or racing-kart alone. Triggers on "game", "minecraft", "fps", "platformer", "racing", "tetris", "snake", "shooter", "3d", "three.js", "canvas", "voxel", "physics".

KrostyMall/Landing-SENSORITY

Player-facing input signs for browser games: WASD, vehicles, flight, FPS mouse-look, and the #1 failure mode (inverted A/D). Mandatory control self-tests and a tiny test interface so you can verify A turns left before shipping. Load for ANY game with movement, steering, flying, driving, tanks, boats, mechs, drones, planes, karts, third-person follow cams — not only racing. Triggers on "controls", "WASD", "inverted", "steer", "flight", "airplane", "kart", "vehicle", "yaw", "roll", "pitch", "mouse look", "A/D".

KrostyMall/Landing-SENSORITY

Design and build polished, non-generic UI for this TanStack Start + React + Tailwind v4 + shadcn/Radix app. Use whenever you create or restyle any interface surface — pages, landing pages, dashboards, forms, modals, nav, and game overlays (start screens, HUD, menus). Covers design tokens, layout, typography, color, spacing, motion, and the anti-"AI-slop" rules that keep output from looking generic. Triggers on "design", "UI", "make it look good", "polish", "landing page", "theme", "style", "redesign", "ugly", "clean up".

Skills relacionados