Communitygithub.com

evalix098/tiktoklive

Grok Build only. Turn a 2D character still into denser animation sprites via imagine_text_to_image base → imagine_image_to_video (6s/10s run-in-place) → ffmpeg frames → magenta chroma-key → dense sampled strips/grids/GIFs. Use when the user wants video-to-sprite, smoother run/walk cycles, or denser intermediate poses. Prefer generate2dsprite for crisp production pixel sheets. Triggers on "video to sprite", "imagine_image_to_video sprite", "dense walk cycle", "smooth run animation from video".

tiktoklive 是什么?

tiktoklive is a Claude Code agent skill that grok Build only. Turn a 2D character still into denser animation sprites via imagine_text_to_image base → imagine_image_to_video (6s/10s run-in-place) → ffmpeg frames → magenta chroma-key → dense sampled strips/grids/GIFs. Use when the user wants video-to-sprite, smoother run/walk cycles, or denser intermediate poses. Prefer generate2dsprite for crisp production pixel sheets. Triggers on "video to sprite", "imagine_image_to_video sprite", "dense walk cycle", "smooth run animation from video".

兼容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/evalix098/tiktoklive/tree/HEAD/.grok/skills/video2dsprite

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Video2dsprite (Grok Build only)

Convert a base 2D character image into dense animation sprites using Grok Build's native video tools.

App-builder / Grok environment

ItemValue
Skill dir.grok/skills/video2dsprite/
Scriptspython3 .grok/skills/video2dsprite/scripts/video2dsprite.py …
Video toolsimagine_image_to_video — animate one base file_path (verify present)
Inspectread_file on stills/frames; report paths for videos
Depsffmpeg + Pillow + numpy (preinstalled in app-builder image)
Output homeassets/sprites/video2dsprite/<name>/ under /workspace
DefaultPrefer generate2dsprite for production heroes; this is the denser-motion path
base still → imagine_image_to_video (in-place motion) → extract frames → chroma key → sample/normalize → strip / grid / GIF

Platform gate (read first)

RuntimeSupported?
Grok Build (xAI)Yes — requires an image generator + an image→video tool
Codex / Claude / other agentsNo — they lack Grok video tools. Tell the user this skill is Grok Build only and offer $generate2dsprite instead

Gate on the capability, not the exact tool name. Image generation appears as imagine_text_to_image / imagine_image_to_image; video as imagine_image_to_video or (legacy) generate_video. Use whichever pair your tool list has. Stop and explain only when you have no image→video tool at all. Do not fake motion with code-drawn frames.

This skill is an optional denser-motion path. It does not replace $generate2dsprite:

Use $generate2dsprite when…Use $video2dsprite when…
Crisp pixel sheets, fixed grids, identity-critical heroesUser wants denser intermediate poses / smoother feeling loops
Attack/cast body sheets, prop packs, engine atlasesExperimenting with video-sourced run/walk/idle motion
Production default for most game spritesUser explicitly asks for video → frames → sprites

Video softens pixels, drifts identity, and leaves chroma fringes. Always QC; for production heroes, prefer $generate2dsprite unless the user wants the video look.

Parameters

Infer from the user request:

  • subject: character / creature description, or path to existing still
  • action: run | walk | idle | attack | custom motion phrase
  • view: usually side (side-scroller). topdown is harder — warn and keep camera locked
  • duration: 6 (default) or 10 seconds
  • frame_counts: which denser sets to export, default 8,16,24,48
  • cell_size: output sprite cell, default 128
  • anchor: feet (default for side locomotion) | center
  • bg: solid #FF00FF (required for chroma)
  • name: output slug
  • out_dir: working folder (default ./sprites/video2dsprite/<name>/ or project-relative)

Agent rules

  1. Grok-only. Refuse on non-Grok runtimes with a short explanation + $generate2dsprite alternative.
  2. Still → video, never text-to-video alone. Stage frame 1 as a clean still with imagine_text_to_image (from a prompt, or from a reference file_path). Then call imagine_image_to_video with that still's file_path.
  3. In-place motion. Prompt for run/walk in place facing a fixed direction. No camera pan, no background scroll, no scene change. Subject stays roughly centered.
  4. Solid magenta background on the base and preserved in the video prompt (#FF00FF / pure magenta). Required for flood-fill chroma.
  5. Do not invent art with PIL/Canvas. Base art comes from imagine_text_to_image or a user/local still. Scripts only postprocess.
  6. Do not put experimental outputs into the game unless the user asks to integrate.
  7. Prefer one locomotion cycle for game use. Dense sample across a full 6s multi-cycle clip is fine for previews; for engine sheets, optionally re-sample a single cycle (12–16 frames) after visual QC.
  8. Report absolute paths of video, cleaned frames, strips, and preview GIFs when done.

Workflow

1. Plan

Pick the smallest useful run:

  • Side-view run/walk loop → this skill
  • Multi-action hero kit → still use $generate2dsprite per action; only use video for locomotion if requested
  • FX / projectile / prop packs → $generate2dsprite, not video

Create:

<out_dir>/
  base/
  video/
  frames-raw/
  frames-clean/
  sprite/          # default 8-frame set + denser x16/x24/x48
  prompt-used.txt
  pipeline-meta.json
  README.txt

2. Build the base still

Options:

  • A. Existing sprite: read the image, composite onto solid #FF00FF if needed, then pass that sandbox path to imagine_image_to_image / imagine_image_to_video
  • B. New character: imagine_text_to_image with solid magenta background, full body, side view, centered
  • C. Match reference: imagine_image_to_image with the reference file_path, moving it onto magenta and preserving identity

Base requirements:

  • Full body visible, generous magenta margin
  • Side view for run/walk (profile or 3/4 side), feet near bottom third
  • Same art style as the rest of the project when a reference exists
  • No text, UI, watermark, or second character

Copy the returned file_path and save as <out_dir>/base/<name>-base.png; keep the base file_path for the video call.

Write the exact image prompt into prompt-used.txt.

3. Animate with imagine_image_to_video

Call Grok imagine_image_to_video:

  • source path: <base still file_path> (sandbox path returned by T2I / I2I)
  • duration: 6 (default) or 10
  • resolution_name: 480p unless user asks 720p
  • prompt: one short present-tense shot (see references/prompt-rules.md)

Mandatory motion constraints in the prompt:

  • Subject runs/walks in place (treadmill style)
  • Camera locked — no pan, zoom, or orbit
  • Background stays flat solid magenta
  • Identity, costume, palette stable for the whole shot
  • Single continuous action only

Copy the returned video file_path to <out_dir>/video/<name>-<duration>s.mp4.

If video tools are unavailable, stop (platform gate).

4. Extract + chroma + sample (local script)

Run the processor (ffmpeg + Pillow + numpy):

python3 .grok/skills/video2dsprite/scripts/video2dsprite.py process \
  --video <out_dir>/video/<name>-6s.mp4 \
  --out-dir <out_dir> \
  --name <name> \
  --frame-counts 8,16,24,48 \
  --cell-size 128 \
  --body-height 100 \
  --foot-y 118 \
  --fps 0

Notes:

  • --fps 0 = extract every decoded frame (use source fps)
  • Magenta flood-fill from corners + despill
  • Even sampling for each count in --frame-counts
  • Feet-normalized cells, horizontal strip, grid, loop GIF per count

Optional: only re-sample denser sets from existing cleaned frames:

python3 .grok/skills/video2dsprite/scripts/video2dsprite.py sample \
  --clean-dir <out_dir>/frames-clean \
  --out-dir <out_dir> \
  --frame-counts 16,24,48 \
  --cell-size 128

5. QC

Visually check:

  • Preview GIF loops without huge pops
  • Magenta gone (no solid pink blocks); fringe acceptable or re-key
  • Feet stay on a stable baseline (no hop from bad crop)
  • Identity roughly stable (face/clothes not morphing every frame)
  • Action is in-place (not sliding out of frame)
  • For game use: pick one count (often 16 or 24) or cut one true cycle

If identity drifts hard or pixels are too soft, fall back to $generate2dsprite for production sheets and keep the video set as motion reference only.

6. Deliver

Report paths only (unless user asked to wire into a game):

  • Video: video/*.mp4
  • Dense sprites: sprite/x16|x24|x48/
  • Strips / grids / GIFs: sprite/run-strip-N.png, run-grid-N.png, run-preview-N.gif
  • Meta: pipeline-meta.json

Do not modify game code unless requested.

Defaults

  • Duration: 6s
  • Action: side run in place, facing right
  • Export counts: 8, 16, 24, 48
  • Cell: 128², body height ~100, feet at y≈118
  • Background: #FF00FF
  • Prefer single-asset imagine_image_to_video over multi-ref (compose multi-ref with imagine_text_to_image first if needed)

Tradeoffs (tell the user once)

Pros: denser intermediates → often feels smoother than 4–8 discrete gen poses.
Cons: softer pixels, identity drift, chroma fringe, multi-cycle 6s clips are not a single perfect loop, heavier assets.
Rule of thumb: 8→16→24 usually gains smoothness; 48 is often diminishing returns; 145 raw frames are for sampling, not all for runtime.

Resources

Relationship to other skills

  • $generate2dsprite — primary sheet pipeline (Codex + Grok when image gen exists)
  • $generate2dmap — maps; not used here
  • $video2dsprite — Grok Build exclusive motion densification path
  • $game-asset-core / $game-animation-frames — loop/flip-test/motion laws and engine-ready defaults; still use this skill’s scripts for sandbox execution (magenta base + chroma), not a freeform background color

Individual skills in this repo

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

evalix098/tiktoklive

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

evalix098/tiktoklive

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

evalix098/tiktoklive

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

evalix098/tiktoklive

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

evalix098/tiktoklive

Deep guide for game ANIMATION assets: motion cycles, action keyframes, effect sequences, and animation sprite sheets — built around a video-first pipeline. In this app-builder sandbox, execute via the video2dsprite / generate2dsprite skills (magenta + scripts), not ad-hoc ffmpeg. Use whenever generating anything that moves: walk/run cycles, attacks, idles, FX, flags, fire, animation sheets. Complements game-asset-core.

evalix098/tiktoklive

Core discipline for ANY game-asset generation with Imagine tools: the engine-ready defaults users don't state, spec checklists, style anchoring, read-back verification, honest defect flagging. Use whenever generating any game art (sprites, sheets, animations, tiles, UI, FX) — then ALSO load the matching specialist skill: game-animation-frames for anything that moves, game-tilesets for tiles/terrain, game-character-consistency for recurring characters, game-ui-icons for UI and icons.

evalix098/tiktoklive

Deep guide for CHARACTER IDENTITY across images: turnarounds (front/side/ back), state and damage variants, palette swaps, equipment changes, and same-character-in-context sets. Use whenever generating character turnarounds, character sheets, variants of an existing sprite, or any same-subject multi-image set. Complements game-asset-core.

evalix098/tiktoklive

Deep guide for game TILE assets: seamless tileable textures, terrain transition tilesets, autotiles, and ground/platform tiles. Use whenever generating tileable textures, tilesets, terrain transitions, or seamless patterns. Complements game-asset-core.

evalix098/tiktoklive

Deep guide for game UI assets: buttons with interaction states, panels, bars, wordmark logos, and icon sets. Use whenever generating game UI elements, HUD assets, inventory icons, icon sets, buttons, or title logos. Complements game-asset-core.

evalix098/tiktoklive

Generate production-oriented 2D game maps with `imagine_text_to_image`: RPG/top-down maps, side-scroller parallax stages, tilemaps, layered raster maps, prop packs, collision zones, and walkable areas. Use when building browser games that need real map art (not pure code-drawn tiles), layered props, or map collision metadata. Triggers on "map", "level", "stage", "tilemap", "overworld", "dungeon", "side scroller background", "prop pack", "2D map".

evalix098/tiktoklive

Generate and postprocess 2D game sprites and animation sheets: pixel-art characters, NPCs, creatures, spells, projectiles, impacts, props, summons, and transparent PNG/GIF exports. Use when building browser games that need real sprite sheets (not code-drawn placeholders), matching a map art style, or producing magenta-background sheets for chroma-key cleanup. Triggers on "sprite", "sprite sheet", "animation sheet", "pixel art character", "walk cycle", "attack animation", "projectile sprite", "2D game asset".

evalix098/tiktoklive

How to use the Imagine tools in Grok Build: imagine_text_to_image, imagine_image_to_image, imagine_reference_to_image, imagine_text_to_video, imagine_image_to_video, imagine_reference_to_video, and render_file for chat previews. When to build a visual with code instead of generating it, prompt-craft, reference-first handling of real people, factual grounding, and asset-consistency. Load this whenever generating or editing an image or video is on the table. Tool-usage-driven, not triggered by a user merely mentioning images.

evalix098/tiktoklive

Peer-to-peer realtime multiplayer over WebRTC data channels: every user of the deployed app connects directly to every other user (full mesh), the server only brokers the handshake at /api/rtc. Lowest possible latency, zero per-message server cost. Use for 2-8 player co-op/casual realtime: shared cursors, drawing, party games, casual action. Triggers: p2p, peer to peer, webrtc, low latency multiplayer, direct connection.

evalix098/tiktoklive

Use Neon Postgres (the database) in this TanStack Start app. Use when the app needs to store or query data, persist state, or keep per-user data. Triggers on "database", "Postgres", "Neon", "save data", "store data", "persist", "tables", "SQL", "query", "migrations".

evalix098/tiktoklive

Share-link previews and app identity for apps on *.grok.me: the injector-owned og:image card, the SVG favicon, and PWA icons for installable apps. Use when scaffolding, renaming, or restyling the app — and for share / unfurl / OG / Twitter card questions. A custom 1200×630 card from the app's own art is the default — games of every kind (DOM board/word games included), whimsical apps, creative tools, and brand-forward pages; only plain utilities keep the placeholder. Always run the brand-asset pass as a `task` subagent and never wait for it. Triggers on "share", "rename", "app name", "OG", "Open Graph", "twitter card", "unfurl", "og:image", "og:type", "x:game:image", "x-banner", "link preview", "social card", "thumbnail", "preview image", "favicon", "app icon", "PWA", "manifest", "installable", "home screen", "SEO", "meta description".

evalix098/tiktoklive

Official Three.js API and TSL (Three.js Shading Language) reference for LLM code generation. Load when writing or debugging three.js / WebGL / WebGPU / custom materials / shaders / GLTF / advanced three APIs beyond basic game loop/controls. Prefer building-games for game correctness (loop, WASD, camera, orientation); use this skill for full API/TSL depth. Triggers on "three.js", "threejs", "WebGPU", "TSL", "NodeMaterial", "shader", "GLTF", "MeshStandard", "OrbitControls", "WebGLRenderer".

evalix098/tiktoklive

Call the xAI API (Grok) from this app's server code using the injected XAI_API_KEY: chat/LLM features, image and video generation (Imagine), and voice (text-to-speech). Use when the app needs any "AI" / "assistant" / "chatbot" / "Grok" functionality, runtime image/video generation, or speech. Triggers on "AI", "LLM", "chatbot", "assistant", "Grok", "xAI", "generate text", "summarize", "generate image", "AI video", "voice", "text to speech", "TTS", "OpenAI" (use xAI instead).

相关技能