Agent skill

Threejs Image Generator

by valkor-ai in valkor-ai/loom

Generate and edit 2D image assets for Three.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos…

Apache-2.0Auto-check passedGame Development

Install Threejs Image Generator

skills CLI
$ npx skills add valkor-ai/loom --skill threejs-image-generator -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install valkor-ai/loom threejs-image-generator --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/valkor-ai/loom.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/shared/loom/skills/threejs/threejs-image-generator .claude/skills/threejs-image-generator && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
threejs-image-generator
GitHub stars
1.2k
Used in
1 other repo
Token cost
~1.4k tokens
SKILL.md length
609 words
Files
3 (incl. scripts)
Skills in repo
17
Repo updated
First seen
Licence
Apache-2.0

At a glance

Generate and edit 2D image assets for Three.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos…

  • Direct image editing when the user supplies an image path
  • SKILL.md covers When to use, API key, Commands and Prompt patterns, plus 3 more sections
  • Runs Python scripts from its folder; calls uv; needs GEMINI_API_KEY
  • Tasks that involve 3D graphics and WebGL

What it does

Threejs Image Generator is an agent skill from valkor-ai/loom. Generate and edit 2D image assets for Three.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos, icons, GUI art, title and menu art, and marketing stills. Also use for direct image editing when the user supplies an image path.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including scripts (for example `agents/openai.yaml` and `scripts/generate_image.py`).

It sits in Game Development, covering 3D graphics and WebGL, Image generation and Logo and visual identity. It works with Three.js. The repository describes itself as: Loop engineering for agentic software delivery. The licence is Apache-2.0.

When your agent uses it

  • Direct image editing when the user supplies an image path
  • Tasks that involve 3D graphics and WebGL
  • Tasks that involve Image generation

Example prompts

  • “/threejs-image-generator”

Requirements

  • Python 3
  • A credential in GEMINI_API_KEY

What it can do on your machine

Read from SKILL.md and the folder at commit a30a7e6. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • uv

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use uv, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • GEMINI_API_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Threejs Image Generator loads about 1.4k tokens when it runs. Until then it costs about 87 tokens; SKILL.md has 609 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~87
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from valkor-ai/loom at commit a30a7e6, republished under its Apache-2.0 licence (© valkor-ai). 609 words, ~1,352 tokens.

Download SKILL.mdSave it as .claude/skills/threejs-image-generator/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
threejs-image-generator
description
Generate and edit 2D image assets for Three.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos, icons, GUI art, title and menu art, and marketing stills. Also use for direct image editing when the user supplies an image path.

Three.js Image Generator

The 2D layer for Three.js games: concepts, textures, decals, UI art, and the source images that feed threejs-3d-generator for image-to-3D.

Resolve <this-skill-dir> from the actual loaded skill file. Resolve sibling skills beside it first, then use the runner's discovered paths. Do not mix installed versions or assume a particular home directory.

When to use

  • Image-to-3D references: characters, creatures, buildings, ships, cars, weapons, props, pickups, terrain modules.
  • Texture and material references: terrain, road, rock, sand, metal, sci-fi panels, trim sheets, decals, hazard labels, signs.
  • Environment plates: skies, backdrops, city horizons, nebulas, menu backgrounds, parallax layers.
  • UI art: logos, faction marks, icons, item cards, ability badges, cockpit decals, GUI panels, title art.
  • Editing an existing image: style variants, cleanup, palette alignment, concept refinement.

For premium graphics work with generation in scope, generate the high-value 2D surfaces rather than defaulting to hand-coded CSS and flat colors. Respect explicitly procedural art and external-service restrictions. Choose assets from the game's design, not a fixed quota of logos, skies, or icons.

API key

The script reads --api-key or GEMINI_API_KEY. Keys never go in skill files, game code, or reports.

bash
uv run <this-skill-dir>/scripts/generate_image.py probe   # GEMINI_API_KEY=SET|MISSING

Keys defined only in a shell profile can be absent from the process env. If the plain probe unexpectedly prints MISSING, use threejs-game-director/scripts/probe_asset_credentials.sh, which sources the profile and probes all three providers.

Commands

Run from the game project so output lands in it:

bash
uv run <this-skill-dir>/scripts/generate_image.py \
  --prompt "your image description" --filename assets/concepts/output.png --resolution 2K

uv run <this-skill-dir>/scripts/generate_image.py \
  --input-image assets/concepts/ship.png \
  --prompt "battle-worn red racing livery with clearer material zones" \
  --filename assets/concepts/ship-red-livery.png --resolution 2K

Resolution: 1K for quick concepts, icons, and draft sheets · 2K (the default) for production references, image-to-3D, textures, backgrounds, UI panels · 4K for hero splash art, high-detail texture references, and large sky plates.

Prompt patterns

Image-to-3D reference:

Create a clean 3D-generation reference image of [asset]. Centered single object, full object visible, plain light background, readable silhouette, clear material zones, game-ready [genre/style], no motion blur, no cropped parts, no text.

Riggable character or creature:

Create a full-body [T-pose / A-pose / side-view creature] reference for 3D rigging: [details]. Symmetric stance, visible hands/feet/limbs, plain background, readable costume and anatomy layers, no weapon fused to hands.

Texture or material:

Create a seamless game texture reference for [surface]. Orthographic top-down, PBR-friendly albedo, clear material variation, no perspective, no baked strong shadows, [style details].

Logo, icon, or UI art:

Create a crisp game UI [logo/icon/badge/panel] for [faction/item/ability]. Transparent-friendly silhouette, high contrast at small size, [genre styling], no tiny unreadable text.

Sky or background:

Create a wide game background plate of [environment]. Layered depth, readable horizon, [time/weather/style], suitable behind a real-time Three.js scene, no foreground subject.

Show full SKILL.md (203 more words)Show less

Integration

Save concepts and image-to-3D sources under assets/concepts/; textures, decals, icons, and GUI sources under assets/textures/, assets/decals/, or assets/ui/. Hand image-to-3D sources to threejs-3d-generator by path.

Convert PNGs to runtime formats deliberately: PNG where alpha matters (UI, icons, decals), JPG/WebP/KTX2 for larger opaque textures where the pipeline supports it. The API is a tooling step — never called from game code.

Inspect the image before spending on image-to-3D or dependent variants. Check how runtime images look in the game, not just that the file was written. Preserve useful existing images when the user changes requirements, and update the project note instead of regenerating everything.

Recovery

For coordinated games use the director's references/asset-recovery.md. Missing credentials or exhausted credits permit an honest local alternative; a transient error does not. Distinguish invalid input and authentication from service failures. Do not blindly retry an uncertain paid generation: preserve existing files and reconcile the provider result first. This command has no Tripo-style task resume interface. Continue independent game work while only the dependent image work is blocked.

Report

Prompt and purpose, output path, resolution, whether it was used directly, edited further, or handed to threejs-3d-generator, and any remaining work such as compression, UV assignment, alpha cleanup, or atlas packing.

© valkor-ai, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (scripts) in plugins/shared/loom/skills/threejs/threejs-image-generator of valkor-ai/loom.

  • SKILL.md
  • agents/openai.yaml
  • scripts/generate_image.py

Open the folder on GitHubat commit a30a7e6

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in valkor-ai/loom, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Threejs Image Generator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Threejs Image Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Threejs Image Generator this skillvalkor-ai/loom1.2k1 repos~1.4kAutomated safety check: PassApache-2.0
3D Image Rendererhassancs91/claude-image-generation101—~1.4kAutomated safety check: PassMIT
Fal Regenerate 3Dfal-ai-community/skills250—~1.6kAutomated safety check: PassNone
Threejs 3D Generatorcorosolto/client257—~3.4kAutomated safety check: PassAGPL-3.0
Qiaomu Cutjoeseesun/qiaomu-cut-skill372—~6.8kAutomated safety check: NotesMIT
Content To Videoarchitectds/modeldock117—~2.4kAutomated safety check: PassApache-2.0

Similar skills

  • 3D Image Renderer

    hassancs91/claude-image-generation

    Generate PNG images by building a real Three.js 3D scene and capturing one frame headlessly — no image model involved.

    101 GitHub stars~1.4k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed
  • Fal Regenerate 3D

    fal-ai-community/skills

    Build a fully-interactive 3D character-selector experience powered entirely by fal.ai.

    250 GitHub stars~1.6k tokensUpdated 10 days ago
    Game DevelopmentAuto-check passed
  • Threejs 3D Generator

    corosolto/client

    Generate, texture, rig, animate, stylize, convert, and download 3D assets for Three.js games using the Tripo API.

    257 GitHub stars~3.4k tokensUpdated today
    Game DevelopmentAuto-check passed
  • Qiaomu Cut

    joeseesun/qiaomu-cut-skill

    把一句话需求转成可复现、可验收视频工程的乔木智能剪辑导演。Use when the user asks to create, plan, edit, remix, explain, narrate, subtitle, animate, composite, or render a video—including one-line requests such as “制作一个科普视频:介绍…

    372 GitHub stars~6.8k tokensUpdated 11 days ago
    Media & CreativeAuto-check: notes
  • Content To Video

    architectds/modeldock

    Turn arbitrary source content (README, article, story, slides, deck, data/report, product description, tutorial text, audio/transcript, or a bare topic) into a finished, high-quality MP4 video.

    117 GitHub stars~2.4k tokensUpdated 3 days ago
    Media & CreativeAuto-check passed
  • Image to Three.js Model

    img2threejs/img2threejs

    Rebuilds the object in a reference image as a procedural, animation-ready Three.js model written entirely in code, using staged sculpting with quality checks.

    18k GitHub starsUsed in 1 repo~8.2k tokens
    Game DevelopmentAuto-check passed

More from valkor-ai/loom

All 17 skills in this repo
  • Build and iterate playable Three.js game systems: starter scaffold, architecture, design briefs, core loops, level and encounter design, entities, input, camera, collision and physics, scoring…

    1.2k GitHub starsUsed in 1 repo~1.4k tokens
    Auto-check passed
  • Threejs 3D Generator

    valkor-ai/loom

    Generate, texture, rig, animate, stylize, convert, and download 3D assets for Three.js games via the Tripo API.

    1.2k GitHub starsUsed in 1 repo~2.6k tokens
    Auto-check passed
  • Threejs Game Director

    valkor-ai/loom

    Entrypoint for building, upgrading, and finishing Three.js browser games.

    1.2k GitHub stars~2.3k tokensUpdated 2 days ago
    Auto-check passed
  • Generate, convert, clean, and integrate audio for Three.js browser games with ElevenLabs: sound effects, looping ambience, UI sounds, impact/weapon/vehicle audio, creature and boss stingers…

    1.2k GitHub starsUsed in 1 repo~1.3k tokens
    Auto-check passed
  • Threejs QA Release

    valkor-ai/loom

    Verify and release Three.js browser games: playtest QA, automated bot playtests, mobile and responsive checks, production builds, static-hosting base paths, debug gating, bundle review, screenshots…

    1.2k GitHub starsUsed in 1 repo~1.3k tokens
    Auto-check passed
  • Upgrade Three.js games from prototype visuals to premium browser graphics: art-direction critique, procedural model building, material and texture libraries, world prop kits, shaders, VFX, lighting…

    1.2k GitHub starsUsed in 1 repo~1.2k tokens
    Auto-check passed

Works with

Questions about Threejs Image Generator

What does Threejs Image Generator do?

Generate and edit 2D image assets for Three.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos…. Threejs Image Generator is an agent skill from valkor-ai/loom.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos, icons, GUI art, title and menu art, and marketing stills.

When should I use Threejs Image Generator?

Threejs Image Generator fits situations like: direct image editing when the user supplies an image path; tasks that involve 3D graphics and WebGL; tasks that involve Image generation.

How do I install Threejs Image Generator in Claude Code?

Run `npx skills add valkor-ai/loom --skill threejs-image-generator -a claude-code`. Or copy the skill folder (plugins/shared/loom/skills/threejs/threejs-image-generator in valkor-ai/loom) into .claude/skills/threejs-image-generator in your project. Claude Code loads it when a task matches its description.

How do I install Threejs Image Generator in Codex?

Run `npx skills add valkor-ai/loom --skill threejs-image-generator -a codex`. Or copy the skill folder (plugins/shared/loom/skills/threejs/threejs-image-generator in valkor-ai/loom) into .agents/skills/threejs-image-generator in your project. Codex loads it when a task matches its description.

Can I use Threejs Image Generator in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add valkor-ai/loom --skill threejs-image-generator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/threejs-image-generator, .gemini/skills/threejs-image-generator, .github/skills/threejs-image-generator and .opencode/skills/threejs-image-generator in your project.

What does Threejs Image Generator need to run?

Going by SKILL.md and its folder, Threejs Image Generator needs Python for the scripts in its folder, the command-line tools its instructions call (uv) and credentials named GEMINI_API_KEY. Our summary lists: Python 3; A credential in GEMINI_API_KEY.

Does Threejs Image Generator access the network?

SKILL.md contains no URLs. Its commands use uv, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Threejs Image Generator safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Threejs Image Generator use?

Threejs Image Generator is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Threejs Image Generator use?

About 1.4k tokens (SKILL.md is roughly 5.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Threejs Image Generator?

Skills that share tags, products or a category with Threejs Image Generator: 3D Image Renderer (hassancs91/claude-image-generation, 101 stars), Fal Regenerate 3D (fal-ai-community/skills, 250 stars), Threejs 3D Generator (corosolto/client, 257 stars) and Qiaomu Cut (joeseesun/qiaomu-cut-skill, 372 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Threejs Image Generator?

valkor-ai (a GitHub organization) maintains it in valkor-ai/loom, which has 1,211 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 6, 2026.

Source: valkor-ai/loom on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.