Skip to content
Automation
Skill

/ui-kit

Produce a complete reusable flat-first Godot UI Theme from a binding visual reference, with two provider-generated source sheets, fixed square nine-slice patches, stable AtlasTexture icons, and native Theme bindings.

From plugin
godotmaker
51141 skills7 agents14 hooks
Install
$ npx -y skills add RandallLiuXin/GodotMaker --skill ui-kit --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/ui-kit

Context preview

The summary Claude sees to decide when to auto-load this skill.

Produce a complete reusable flat-first Godot UI Theme from a binding visual reference, with two provider-generated source sheets, fixed square nine-slice patches, stable AtlasTexture icons, and native Theme bindings.

SKILL.md

ui-kit.SKILL.md
name: ui-kit
description: Produce a complete reusable flat-first Godot UI Theme from a binding visual reference, with two provider-generated source sheets, fixed square nine-slice patches, stable AtlasTexture icons, and native Theme bindings.

UI Kit Asset

Produce one reusable visual system, not a page layout. The result gives a worker a complete Godot `Theme`, named `StyleBoxTexture` resources, and named `AtlasTexture` icons. Its reusable art covers button states, panels, tabs, and semantic icons. It does not create a composite screen, readable UI copy, characters, logos, gameplay geometry, or final `Control`/`Container` layout. Do not use it for card frames. Do not use it for portrait frames.

Read [references/theme-baseline.md](references/theme-baseline.md) and [references/source-sheet-scheme.json](references/source-sheet-scheme.json) before planning. They own the baseline controls, stable runtime names, two provider sheets, fixed patch geometry, and source-to-runtime reuse mappings. The caller's brief supplies visual direction; do not make it repeat this contract.

Input gate

Accept the shared Asset Skill request schema at `.godotmaker/asset-runtime/schema/asset-skill-request.schema.json`; require `asset_type: ui-kit`, a pinned `provider` (`native`, `codex`, `gemini`, or `openai`), and at least one readable image in `references`. Preserve every reference `role`. Missing or unreadable references and pixel-art requests are input-gate STOP conditions.

Validate the returned document with the shared result schema and checker at `.godotmaker/asset-runtime/schema/asset-skill-result.schema.json` before family binding checks.

Attach every reference as real image input to both provider calls. The Codex route uses `referenced_image_paths`; other routes use their declared attachment mechanism. Never reduce a reference to prompt text or silently switch provider. Record provider, image model when exposed, coding model, reasoning, roles, absolute attached paths, call identity, prompt, and attempt in provenance. STOP before generation if the pinned route cannot attach every reference.

This skill can be invoked directly or by an orchestrator with the same contract. Do not read or write `ASSETS.md`, tags, stage state, generated manifests, stable entries, or worker dispatch state.

Produce

1. Inspect the reference and write `theme_plan.json` before image generation. It contains:

  • a positive `rendering_medium` such as `bold comic-book game art`,

`hand-painted fantasy illustration`, or `glossy mobile-game illustration`;

  • exactly the color tokens required by `asset_ui_theme_recipe.py`:

`text`, `text_muted`, `text_outline`, `surface`, `surface_raised`, `input`, `primary`, `secondary`, `danger`, `success`, `border`, `focus`, `selection`, and `shadow`;

  • exactly the geometry tokens `corner_radius_small`,

`corner_radius_medium`, `corner_radius_large`, `border_width`, `content_margin`, `shadow_size`, `shadow_offset`, and `font_size`;

  • concise observations for palette, contrast, shape, outline, shadow, and

material language, plus the reference roles and paths used to derive them.

Use positive medium language. Do not put pixel-art negations into image prompts. The Theme plan is a deterministic visual-system specification, not generated art.

2. Generate the deterministic source plan:

   python tools/asset_ui_source_sheet_plan.py --request ASSET_REQUEST.json --scheme .agents/skills/ui-kit/references/source-sheet-scheme.json --rendering-medium "<theme_plan rendering_medium>" --out source_sheet_plan.json

Use the plan prompts unchanged. Make exactly two provider calls, attaching every reference to each call:

  • `surface_patches_source.png`: eight 96x96 square runtime patches for button

normal/hover/pressed/disabled, base/raised panel, and selected/unselected tab treatment. Decoration stays inside the declared border band; the declared safe center remains continuous and undecorated.

  • `icons_source.png`: 24 unique semantic icons. The plan normalizes Theme

arrows to 32x32, checks and toggles to 40x40, slider grabbers to 48x48, and reusable action/status icons to 128x128. Its mappings expand to all stable runtime icon names.

Both images use only solid `#FF00FF` as background, with separated artwork that never touches canvas edges. Save each raw provider image and full provenance. Do not accept a screen mockup as either sheet.

Write `source_sheet_provenance.json` as an array with exactly one final record per sheet, in plan order. Each record contains `sheet_id`, final `attempt`, exact `prompt`, `provider`, `image_model`, `coding_model`, `reasoning`, `tool_call_id`, `attached_references`, and `raw_source_path`. Every attached reference entry preserves its request `role` and readable request-relative `path`. Keep earlier failed generation attempts under a `retries` array on that sheet's final record; never replace or conceal them.

3. Process each real provider image only with controlled tools already owned by the project:

  • `asset_image_finalize.py --background magenta --no-origin` creates the

transparent processing source and report.

  • `asset_sheet_process.py --snap-mode autoslice` receives the plan's ordered

source component names. Do not pass `--grid`.

  • The detected region count must equal the plan count. On count, separation,

edge, or transparency failure, preserve evidence and regenerate only that provider sheet with the same provider and attachments.

  • Normalize each accepted component with `asset_image_finalize.py --resize`

to its fixed plan size.

  • Assemble each plan atlas with `asset_atlas_assemble.py`, preserving the

final physical atlas, metadata, and processing reports.

Do not programmatically draw, replace, or repair art with Pillow, SVG, canvas, ImageMagick, Godot draw

Read more
Ships withgodotmaker

Autonomous text-to-game pipeline for Godot, powered by Claude Code,Codex,Opencode

Get the whole plugin