Communitygithub.com

KrostyMall/Landing-SENSORITY

Guia aprofundado para ativos de ANIMAÇÃO de jogos: ciclos de movimento, keyframes de ação, sequências de efeitos e folhas de sprites de animação — construído em torno de um pipeline baseado em vídeo. Execute via as habilidades video2dsprite / generate2dsprite (magenta + scripts), não com ffmpeg ad hoc. Use sempre que gerar algo que se move: ciclos de caminhada/corrida, ataques, paradas, FX, bandeiras, fogo, folhas de animação. Complementa game-asset-core.

O que é Landing-SENSORITY?

Este skill, nomeado KrostyMall/Landing-SENSORITY, é uma doutrina abrangente para a criação de ativos de animação em jogos, com foco em ciclos de movimento, keyframes de ação, sequências de efeitos e folhas de sprites de animação. O pipeline principal é baseado em vídeo, aproveitando a capacidade do gerador de vídeo de entender movimento — como alternância de pernas, continuidade de arcos, dinâmica de tecidos e fogo — em vez de confiar no gerador de imagens para imaginar poses intermediárias. Ele especifica que, no app-builder sandbox, a execução deve ser feita através das habilidades video2dsprite e generate2dsprite (com fundo magenta #FF00FF e scripts de chroma key), e não com ffmpeg ad hoc. O skill descreve um pipeline padrão de cinco etapas: frame base, animação via imagine_image_to_video, colheita e limpeza com scripts, seleção de frames que capturam fases distintas do movimento e formam um loop, e empacotamento em folhas ou tiras transparentes. Além disso, estabelece leis de movimento (ciclos, continuidade, física, energia) e um teste de flip (reprodução em ordem e verificação de fechamento do loop) para garantir a qualidade. Ele complementa o skill game-asset-core e é útil para desenvolvedores de jogos que precisam gerar animações suaves e consistentes rapidamente, suportando plataformas como o app-builder sandbox (provavelmente Grok ou similar) que oferecem pipelines de geração de imagens e vídeos.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Frames de Animação — vídeo primeiro

O gerador de imagens desenha poses; o gerador de VÍDEO entende movimento — alternância de pernas, continuidade de arco, dinâmica de tecidos e fogo vêm de graça porque o vídeo deve animá-los. Portanto, não peça ao modelo de imagem para imaginar poses intermediárias: anime a base e colha frames reais.

Execução do app-builder (leia primeiro)

Este skill é doutrina (leis de movimento, controle de qualidade de loop, quando usar vídeo). No sandbox do app-builder, não execute uma colheita livre com ffmpeg nem invente um fundo #hex chaveável aleatório.

PassoFaça isto
Sprites de produção / grades fixasgenerate2dsprite — folhas magenta sólidas #FF00FF + scripts de chroma
Locomoção mais densa a partir de vídeovideo2dsprite — base ainda com #FF00FF → imagine_image_to_video → scripts do skill (ffmpeg + chroma)
Fundo chaveávelSempre #FF00FF ao usar qualquer pipeline (necessário para chroma)
Este skillLoop / teste de flip / leis de movimento abaixo — aplique após a execução do pipeline

Abra .grok/skills/video2dsprite/SKILL.md ou .grok/skills/generate2dsprite/SKILL.md e siga seus fluxos de trabalho para geração e pós-processamento. Em seguida, aplique as leis e o teste de flip aqui antes de enviar frames para o jogo.

Pipeline padrão (intenção)

  1. Frame base. Sujeito em pose neutra/inicial, palavras de estilo completas, vista lateral / adequada ao jogo, fundo sólido #FF00FF (chroma key do app-builder). Os padrões do game-asset-core se aplicam.
  2. Animar. imagine_image_to_video a partir da base: um movimento claro, no lugar, câmera estática ("o cavaleiro caminha no lugar, vista lateral, câmera travada", 6s). Mantenha a tomada simples — um sujeito, um movimento. Prefira executar isso através de video2dsprite para que a colheita + chroma sejam consistentes.
  3. Colher + limpar. Use scripts de video2dsprite (não ffmpeg -i … fps=12 ad hoc sozinho). O preenchimento/despreenchimento magenta está lá; não re-chaveie com um #hex diferente a menos que você saia completamente do pipeline magenta.
  4. Selecionar. Escolha frames que (a) capturem as fases distintas do movimento e (b) formem um LOOP — o final da sequência deve fluir de volta ao início. Não force uma contagem: se o movimento ficar melhor com 8, 10 ou 12 frames, entregue essa quantidade (mais frames = mais suave no motor). Para um ciclo, selecione um período completo usando marcos de movimento (contatos de pé, extremos de asa, picos de chama).
  5. Empacotar. Entregue frames em ordem de reprodução (nomes com zero à esquerda) e/ou uma folha conforme as regras do game-asset-core (células uniformes, sem divisores) — ou as tiras/grades transparentes emitidas por video2dsprite / generate2dsprite. Informe o fps pretendido.

Recorra a keyframe por keyframe com imagine_text_to_image (ainda com #FF00FF ao pós-processar com os scripts de sprite) apenas quando o vídeo falhar no movimento (raro: poses muito estilizadas, keyframes dramáticos únicos) — e então planeje fases você mesmo e obedeça às leis abaixo. Prefira generate2dsprite para grades de múltiplos frames de produção nítidas.

Leis de movimento (verifique contra estas, qualquer que seja o pipeline)

  • Ciclos em loop; marchas alternadas passam metade do período espelhadas.
  • Continuidade: membros, props, anatomia, efeitos movem-se em caminhos contínuos — nada teletransporta, desaparece ou duplica entre frames adjacentes.
  • Física é legível nos stills: no ar mostra ar, antecipação comprime, follow-through ultrapassa; efeitos permanecem ancorados à sua origem a menos que a solicitação os mova.
  • Energia corresponde ao pedido: parada/sutil significa frames quase idênticos.

Verifique — o teste de flip

Veja os frames finais estritamente em ordem e narre o movimento; verifique o fechamento do loop explicitamente (último→primeiro). Uma hesitação em sua narrativa é um frame falho. O pipeline de vídeo geralmente passa nisso na primeira tentativa — é por isso que é o padrão.

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".

Habilidades Relacionadas