Communitygithub.com

KrostyMall/랜딩-센서리티

게임 애니메이션 자산(모션 사이클, 액션 키프레임, 효과 시퀀스, 애니메이션 스프라이트 시트)을 위한 심층 가이드로, 비디오 우선 파이프라인을 기반으로 합니다. 앱 빌더 샌드박스에서 video2dsprite / generate2dsprite 스킬을 사용하여 실행하며, 임시 ffmpeg 명령어는 사용하지 않습니다.

랜딩-센서리티란 무엇인가요?

이 스킬은 게임 애니메이션 자산 제작을 위한 포괄적인 가이드 역할을 합니다. 비디오 생성이 본질적으로 움직임을 다루기 때문에, 이미지 모델에게 중간 동작 자세를 요청하지 않고 비디오에서 실제 프레임을 수확하는 비디오 우선 접근법을 강조합니다. 주요 기능으로는 걷기/달리기 사이클, 공격, 대기 자세, 효과, 깃발, 불, 애니메이션 시트 등 움직이는 모든 것을 생성할 때 사용됩니다. 앱 빌더 환경에서는 generate2dsprite(고정 스프라이트 시트)와 video2dsprite(비디오 기반 모션 수확) 두 가지 파이프라인을 통해 작업을 수행하며, 항상 #FF00FF 마젠타 배경을 사용하여 크로마키 처리가 가능하도록 합니다. 이 스킬은 모션 법칙, 루프 품질 검증(플립 테스트), 워크플로우 선택 기준 등 이론적 지침을 제공하며, 실제 생성 및 후처리는 별도의 SKILL.md 파일에 정의된 워크플로우를 따라야 합니다. 게임 자산 코어 규칙과 호환되어 최종 프레임은 균일한 셀 크기, 구분선 없음, 제로 패딩 이름, 지정된 FPS 등의 조건을 충족해야 합니다.

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

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

애니메이션 프레임 — 비디오 우선

이미지 생성기는 포즈를 그리고, 비디오 생성기는 움직임을 이해합니다. 다리 교대, 호 연속성, 천과 불의 역학은 비디오가 자연스럽게 애니메이션해야 하므로 추가 노력 없이 얻을 수 있습니다. 따라서 이미지 모델에게 중간 동작 자세를 요청하지 말고, 기본 동작을 애니메이션화한 후 실제 프레임을 수확하세요.

앱 빌더 실행 (먼저 읽으세요)

이 스킬은 원칙 (모션 법칙, 루프 QC, 비디오 사용 시기)을 다룹니다. 앱 빌더 샌드박스에서는 임시 ffmpeg 수확이나 무작위 키 가능한 #hex 배경을 사용하지 마십시오.

단계이렇게 하세요
프로덕션 스프라이트 / 고정 그리드generate2dsprite — 단색 #FF00FF 마젠타 시트 + 크로마 스크립트
비디오에서 더 조밀한 로코모션video2dsprite — #FF00FF 위에 기본 정지 이미지 → imagine_image_to_video → 스킬 스크립트 (ffmpeg + 크로마)
키 가능 배경파이프라인 사용 시 항상 #FF00FF (크로마에 필요)
이 스킬아래의 루프 / 플립 테스트 / 모션 법칙 — 파이프라인 실행 후 적용

.grok/skills/video2dsprite/SKILL.md 또는 .grok/skills/generate2dsprite/SKILL.md를 열고 생성 및 후처리 워크플로우를 따르세요. 그런 다음 여기의 법칙과 플립 테스트를 적용하여 프레임을 게임에 전달하기 전에 확인하세요.

기본 파이프라인 (의도)

  1. 기본 프레임. 중립/시작 자세의 주제, 전체 스타일 단어, 측면/게임 적합 뷰, 단색 #FF00FF 배경 (앱 빌더 크로마 키). game-asset-core 기본값 적용.
  2. 애니메이션. 기본 이미지에서 imagine_image_to_video: 한 가지 명확한 움직임, 제자리에서, 정적 카메라 ("기사가 제자리에서 걷고, 측면 뷰, 카메라 고정", 6초). 장면을 단순하게 유지하세요 — 한 주제, 한 동작. video2dsprite 를 통해 실행하여 수확과 크로마 일관성을 유지하는 것이 좋습니다.
  3. 수확 + 정리. video2dsprite 스크립트를 사용하세요 (임시 ffmpeg -i … fps=12 단독 사용 금지). 마젠타 플러드필/디스필은 거기에 있으므로, 마젠타 파이프라인을 완전히 떠나지 않는 한 다른 평평한 #hex로 다시 키를 지정하지 마십시오.
  4. 선택. (a) 동작의 뚜렷한 단계를 포착하고 (b) 루프되는 프레임을 선택하세요 — 시퀀스 끝이 시작으로 자연스럽게 돌아와야 합니다. 개수를 강제하지 마세요: 동작을 가장 잘 표현하는 프레임이 8, 10 또는 12개라면 그 개수를 전달하세요 (더 많은 프레임 = 엔진에서 더 부드러움). 사이클의 경우 움직임 랜드마크 (발 접촉, 날개 극단, 불꽃 피크)를 사용하여 한 전체 주기를 선택하세요.
  5. 패키징. game-asset-core 규칙 (균일한 셀, 구분선 없음)에 따라 플레이 순서대로 프레임을 전달하거나 (0으로 채워진 이름) 및/또는 시트로 전달하세요. 또는 video2dsprite / generate2dsprite 에서 생성된 투명 스트립/그리드를 사용하세요. 의도된 fps를 명시하세요.

비디오가 동작에 실패할 때만 (드물게: 매우 양식화된 포즈, 단일 극적인 키프레임) 키프레임별로 imagine_text_to_image로 대체하세요 (스프라이트 스크립트로 후처리할 때는 여전히 #FF00FF 사용). 그런 다음 직접 단계를 계획하고 아래 법칙을 준수하세요. 선명한 프로덕션 멀티 프레임 그리드를 위해서는 generate2dsprite 를 선호하세요.

모션 법칙 (파이프라인에 관계없이 이것들에 대해 검증하세요)

  • 사이클은 반복되며, 교대 보행은 주기의 절반을 대칭으로 보냅니다.
  • 연속성: 팔다리, 소품, 해부학, 효과는 연속적인 경로로 움직입니다. 인접한 프레임 사이에서 텔레포트, 사라짐, 복제가 없어야 합니다.
  • 정지 이미지에서 물리 법칙이 읽혀야 합니다: 공중에 떠 있으면 공기 저항이 보이고, 예비 동작은 압축되며, 후속 동작은 과도하게 움직입니다. 효과는 요청이 이동시키지 않는 한 원점에 고정됩니다.
  • 에너지는 요청과 일치해야 합니다: 대기/미묘한 동작은 거의 차이가 없는 프레임을 의미합니다.

검증 — 플립 테스트

최종 프레임을 엄격히 순서대로 보면서 움직임을 설명하고, 루프 종료를 명시적으로 확인하세요 (마지막→첫 번째). 설명에서 망설임이 있으면 실패한 프레임입니다. 비디오 파이프라인은 일반적으로 첫 번째 시도에서 이 테스트를 통과합니다. 이것이 기본값인 이유입니다.

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

관련 스킬