threejs-image-generator

Name: threejs-image-generator
Author: majidmanzarpour

859installs108forks

How to install threejs-image-generator?

majidmanzarpour/threejs-game-skills/threejs-image-generator

$npx -y skills add majidmanzarpour/threejs-game-skills --skill threejs-image-generator

Installs into the current project.

Summary

Generate and edit 2D image assets for Three.js games using Google's Gemini image API. Use for concept sheets, image-to-3D inputs, texture references, sky/background plates, decals, logos, icons, GUI art, title/menu art, thumbnails, marketing stills, and source images that feed th

Files · 1

View on GitHub

SKILL.md

1	# Three.js Image Generator
2
3	## Purpose
4
5	Create game-useful 2D assets and references for Three.js projects. This skill is the image-generation layer for the Three.js game system: it produces concepts, textures, decals, UI art, and 2D inputs that can be handed to `threejs-3d-generator` for image-to-3D model creation.
6
7	Provider: Google's Gemini image API.
8
9	Resolve `<this-skill-dir>` in the commands below in this order: `~/.claude/skills/threejs-image-generator`, `~/.codex/skills/threejs-image-generator`, `~/.agents/skills/threejs-image-generator`, or repo `skills/threejs-image-generator`.
10
11	## When To Use
12
13	Use this skill before procedural-only fallback when a Three.js game needs:
14
15	- 2D-to-3D reference images for `threejs-3d-generator`: characters, creatures, buildings, ships, cars, weapons, props, pickups, terrain modules.
16	- Texture and material references: terrain, road, rock, sand, metal, sci-fi panels, trim sheets, decals, hazard labels, signs.
17	- Environment images: skies, backdrops, city horizons, nebula plates, menu backgrounds, parallax layers.
18	- UI art: logos, faction marks, icons, item cards, ability badges, cockpit decals, GUI panels, title art.
19	- Existing-image edits, style variants, cleanup, palette alignment, or concept sheet refinements.
20
21	For premium/AAA/showcase graphics work, generate at least one relevant image for high-value 2D surfaces or image-to-3D inputs unless the credential probe or a real generation attempt shows a blocker.
22
23	## API Key
24
25	Never store API keys in skill files or browser/game code, and never paste a key value into a report. The script reads `--api-key` or `GEMINI_API_KEY`.
26
27	Step 0, before declaring the key unavailable: run this skill's own probe and paste its literal output into the report.
28
29	```bash
30	uv run <this-skill-dir>/scripts/generate_image.py probe # prints GEMINI_API_KEY=SET\|MISSING
31	```
32
33	`GEMINI_API_KEY=MISSING` is only a valid skip/blocker reason when this output is shown. Keys defined only in a shell profile can be absent from the process env; if the plain probe prints MISSING unexpectedly, wrap it: `zsh -lc 'source ~/.zprofile 2>/dev/null \|\| true; source ~/.zshrc 2>/dev/null \|\| true; uv run <this-skill-dir>/scripts/generate_image.py probe'`. When the director skill is loaded, prefer `threejs-game-director/scripts/probe_asset_credentials.sh`, which probes all three asset keys at once.
34
35	## Tool Script
36
37	Run from the user's current project directory so output lands in the game project:
38
39	```bash
40	uv run <this-skill-dir>/scripts/generate_image.py --prompt "your image description" --filename assets/concepts/output.png --resolution 2K
41	```
42
43	Edit an existing image:
44
45	```bash
46	uv run <this-skill-dir>/scripts/generate_image.py \
47	--input-image assets/concepts/ship.png \
48	--prompt "turn this into a battle-worn red racing livery with clearer material zones" \
49	--filename assets/concepts/ship-red-livery.png \
50	--resolution 2K
51	```
52
53	Resolution mapping:
54
55	- `1K`: quick concepts, icons, draft sheets.
56	- `2K`: default production reference for image-to-3D, textures, backgrounds, UI panels. This is also the script default when `--resolution` is omitted.
57	- `4K`: hero splash/title art, high-detail texture references, large sky/background plates.
58
59	## Prompt Patterns
60
61	Image-to-3D reference:
62
63	```text
64	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.
65	```
66
67	Riggable character/creature reference:
68
69	```text
70	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/anatomy layers, no weapon fused to hands.
71	```
72
73	Texture/material reference:
74
75	```text
76	Create a seamless game texture reference for [surface]. Orthographic/top-down, PBR-friendly albedo, clear material variation, no perspective, no baked strong shadows, [style/material details].
77	```
78
79	Logo/icon/UI art:
80
81	```text
82	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.
83	```
84
85	Sky/background:
86
87	```text
88	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.
89	```
90
91	## Three.js Integration Rules
92
93	- Save concepts and image-to-3D sources under `assets/concepts/`.
94	- Save textures, decals, icons, and GUI s

People who liked this also viewed

6 picks

Type

threejs-image-generator

859installs108forks

View on GitHub

How to install threejs-image-generator?

majidmanzarpour/threejs-game-skills/threejs-image-generator

$npx -y skills add majidmanzarpour/threejs-game-skills --skill threejs-image-generator

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Three.js Image Generator
2
3	## Purpose
4
5	Create game-useful 2D assets and references for Three.js projects. This skill is the image-generation layer for the Three.js game system: it produces concepts, textures, decals, UI art, and 2D inputs that can be handed to `threejs-3d-generator` for image-to-3D model creation.
6
7	Provider: Google's Gemini image API.
8
9	Resolve `<this-skill-dir>` in the commands below in this order: `~/.claude/skills/threejs-image-generator`, `~/.codex/skills/threejs-image-generator`, `~/.agents/skills/threejs-image-generator`, or repo `skills/threejs-image-generator`.
10
11	## When To Use
12
13	Use this skill before procedural-only fallback when a Three.js game needs:
14
15	- 2D-to-3D reference images for `threejs-3d-generator`: characters, creatures, buildings, ships, cars, weapons, props, pickups, terrain modules.
16	- Texture and material references: terrain, road, rock, sand, metal, sci-fi panels, trim sheets, decals, hazard labels, signs.
17	- Environment images: skies, backdrops, city horizons, nebula plates, menu backgrounds, parallax layers.
18	- UI art: logos, faction marks, icons, item cards, ability badges, cockpit decals, GUI panels, title art.
19	- Existing-image edits, style variants, cleanup, palette alignment, or concept sheet refinements.
20
21	For premium/AAA/showcase graphics work, generate at least one relevant image for high-value 2D surfaces or image-to-3D inputs unless the credential probe or a real generation attempt shows a blocker.
22
23	## API Key
24
25	Never store API keys in skill files or browser/game code, and never paste a key value into a report. The script reads `--api-key` or `GEMINI_API_KEY`.
26
27	Step 0, before declaring the key unavailable: run this skill's own probe and paste its literal output into the report.
28
29	```bash
30	uv run <this-skill-dir>/scripts/generate_image.py probe # prints GEMINI_API_KEY=SET\|MISSING
31	```
32
33	`GEMINI_API_KEY=MISSING` is only a valid skip/blocker reason when this output is shown. Keys defined only in a shell profile can be absent from the process env; if the plain probe prints MISSING unexpectedly, wrap it: `zsh -lc 'source ~/.zprofile 2>/dev/null \|\| true; source ~/.zshrc 2>/dev/null \|\| true; uv run <this-skill-dir>/scripts/generate_image.py probe'`. When the director skill is loaded, prefer `threejs-game-director/scripts/probe_asset_credentials.sh`, which probes all three asset keys at once.
34
35	## Tool Script
36
37	Run from the user's current project directory so output lands in the game project:
38
39	```bash
40	uv run <this-skill-dir>/scripts/generate_image.py --prompt "your image description" --filename assets/concepts/output.png --resolution 2K
41	```
42
43	Edit an existing image:
44
45	```bash
46	uv run <this-skill-dir>/scripts/generate_image.py \
47	--input-image assets/concepts/ship.png \
48	--prompt "turn this into a battle-worn red racing livery with clearer material zones" \
49	--filename assets/concepts/ship-red-livery.png \
50	--resolution 2K
51	```
52
53	Resolution mapping:
54
55	- `1K`: quick concepts, icons, draft sheets.
56	- `2K`: default production reference for image-to-3D, textures, backgrounds, UI panels. This is also the script default when `--resolution` is omitted.
57	- `4K`: hero splash/title art, high-detail texture references, large sky/background plates.
58
59	## Prompt Patterns
60
61	Image-to-3D reference:
62
63	```text
64	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.
65	```
66
67	Riggable character/creature reference:
68
69	```text
70	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/anatomy layers, no weapon fused to hands.
71	```
72
73	Texture/material reference:
74
75	```text
76	Create a seamless game texture reference for [surface]. Orthographic/top-down, PBR-friendly albedo, clear material variation, no perspective, no baked strong shadows, [style/material details].
77	```
78
79	Logo/icon/UI art:
80
81	```text
82	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.
83	```
84
85	Sky/background:
86
87	```text
88	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.
89	```
90
91	## Three.js Integration Rules
92
93	- Save concepts and image-to-3D sources under `assets/concepts/`.
94	- Save textures, decals, icons, and GUI s

People who liked this also viewed

6 picks

Type