Communitygithub.com

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

O que é tiktoklive?

tiktoklive is a Codex agent skill that 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".

Funciona com~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/evalix098/tiktoklive/tree/HEAD/.grok/skills/generate2dmap

Perguntar na sua IA favorita

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

Documentação

Generate2dmap

App-builder / Grok environment

ItemValue
Skill dir / scripts.grok/skills/generate2dmap/, run as python3 .grok/skills/generate2dmap/scripts/<script>.py …
Image toolsimagine_text_to_image / imagine_image_to_image (path-based; see imagine); inspect output with read_file on the PNG path (not Codex view_image)
Generated image pathimagine_text_to_image → sandbox file_path → copy into assets/map/; Pillow is preinstalled
Default engine_targetraw_canvas or Phaser for this TanStack browser sandbox — only use Godot/Unity/Tiled when the user explicitly wants those exports
Related skillsgenerate2dsprite (character/FX sprites; prop packs still use this skill's extract script), building-games, imagine

Decide the pipeline first

Build the smallest playable map bundle that satisfies the game: choose a product-level map_mode, then the lower-level axes (visual_model, runtime_object_model, collision_model, engine_target).

  • tile_mode — editable tile/grid maps: Pokemon-like routes, top-down RPG towns, platformer tilemaps, or any project already on Tiled/LDtk/Godot/Unity/Phaser tilemaps.
  • scene_mode — foundation base plus separate props: tower defense, survivors-like arenas, cozy top-down showcase maps.
  • side_scroll_mode — parallax side-scroller stages: Mega Man-like, action platformers, Metroidvania rooms, runners, brawlers.
  • grid_mode — rule-heavy grids: tactical RPGs, factory/automation, board/card battlers, build grids.
  • room_chunk_mode — modular rooms/chunks: roguelike dungeons, Metroidvania networks, procedural assembly.
  • baked_scene_mode — explicitly flat, non-playable scenes only: title/menu screens, battle backdrops, visual-novel scenes, concept art.

Use user-specified parameters when present; otherwise infer the lightest playable pipeline from the existing game, camera, collision needs, map scale, and editing needs. When mode and axes disagree, the mode's playable/editable contract wins. Genre routing, per-mode axis defaults, presets, and the escalation heuristic are in references/map-strategies.md — read it whenever the choice is not obvious.

A playable map is never one baked image. For any request implying a playable map, level, stage, room, prototype, or engine scene, the deliverable must expose gameplay geometry and objects as separate layers, props, tile/object data, collision, zones, or engine-native scene nodes. A baked image may be a background, reference, or preview artifact — never the runtime map — unless the user explicitly asked for a flat background only.

Scenes and maps only. Do not generate character, enemy, boss, NPC, player, projectile, or animation sprites here; those belong to $generate2dsprite. Maps carry scene hooks (spawn markers, patrol/encounter zones, arena entrances, gates, exits, camera triggers) as metadata, not as drawn art.

Art comes from image generation, and you write the prompts

  • imagine_text_to_image is the default art source for base maps, parallax plates, references, prop sheets, and tileset art. Default art_style is clean_hd (hand-painted HD, sharp readable shapes, low texture noise, no chunky pixels); use pixel_inspired or retro_pixel only when asked.
  • Write every creative prompt yourself. Scripts may assemble, slice, chroma-key, crop, validate, compose previews, and emit JSON/engine files — never write creative prompts or draw final art. Procedural/placeholder art only when the user explicitly asks for placeholders, fixtures, debug maps, or scaffolding. With a tile engine target, generate the tileset art first, then script only the layers, collision, zones, and scene wiring.
  • Save each prompt beside its asset as <asset>.prompt.txt (or an explicit manifest field) whenever the run creates new visual assets.
  • A reference handoff is a file path, not a sentence. To build on an earlier image, pass its sandbox file_path to imagine_image_to_image (and read_file it so you can see it), then name the concrete features to preserve: camera framing, horizon, road/water shapes, terrain boundaries, entrances/exits, landmarks. A filename, "based on the map", or the image merely being visible in conversation is not a handoff — stop and pass the path.

Keep runtime objects out of the base layer

The first generated base/background/foundation image may hold only stable, non-interactive foundation art — ground material, paths, roads, water, cliffs, floor patterns, lane markings and build pads; for side views sky, far/mid scenery, silhouettes, atmosphere; for tilemaps tileset art as editable layers. It must not contain tall props, buildings, trees, rocks, crates, signs, doors, gates, pickups, chests, checkpoints, hazards, traps, turrets, ladders, foreground occluders, destructibles, actors, enemies, NPCs, UI, labels, or anything needing collision, interaction, reuse, y-sorting, animation, or its own render order — regenerate a foundation-only base, or demote such an image to a reference artifact.

Reference mockups are checkpoints, not deliverables

Dressed references (top-down) and stage references (side-view) plan placement in-world: natural game-world objects or subtle blockout geometry, at most 9 distinct visible object candidates (repeats count once, then recur in placement metadata), no annotation graphics (circles, arrows, outlines, labels, text, callouts, legends, measurement lines), and no non-visual metadata — spawns, triggers, patrol hints, camera bounds are written later as scene hooks.

Having generated one, do not stop there. Continue through references/object-production-gate.md: re-read_file both images, build the object list, generate the final separate objects, write placement / collision / scene-hook metadata, compose the QA preview. Reference-only output is an incomplete run unless the user explicitly asked for a concept image.

Depth for the pipeline you picked — open these before producing assets

  • Layered raster maps → references/layered-map-contract.md (layer types, base and prop prompt patterns, prop metadata, render order, collision, QA checklist).
  • side_scroll_mode → references/side-scroll-stages.md: the stage_canvas decision, the named scenery-only parallax layers, and the mandatory in-world stage reference before any platform/object work.
  • Any prop or scene-object generation → classify each object first, then follow references/prop-pack-contract.md: only compact props may share a square prop pack; platforms, floors, bridges, gates, buildings and anything collision-aligned go one-by-one, as a platform strip, a custom wide pack, or tile/object layers.
  • Parameters, the step-by-step workflow, and the extract_prop_pack.py / compose_layered_preview.py commands → references/pipeline.md.
  • Deliverable lists per pipeline and the validation checklist → references/deliverables.md; run both before calling a map done.

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

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

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

Habilidades Relacionadas