--- name: UI Kit Asset slug: ui-kit-asset category: Frontend description: UI Kit Asset produces a reusable Godot Theme with StyleBoxTexture resources, AtlasTexture icons, and native Theme bindings from visual references. Use it when you need a flat-first UI style system instead of a screen layout or mockup. github: "https://github.com/RandallLiuXin/GodotMaker/tree/main/skills/assets/ui-kit" language: Python stars: 515 forks: 44 install: "npx degit https://github.com/RandallLiuXin/GodotMaker/tree/main/skills/assets/ui-kit ~/.claude/skills/ui-kit" installs_to: ~/.claude/skills/ui-kit source_path: skills/assets/ui-kit/SKILL.md collection_size: 25 category_size: 567 collection_url: "https://dirskills.com/collections/RandallLiuXin/GodotMaker" added: 2026-08-26T05:12:29.904Z last_synced: 2026-08-26T05:12:29.904Z canonical_url: "https://dirskills.com/skills/ui-kit-asset" --- # UI Kit Asset UI Kit Asset produces a reusable Godot Theme with StyleBoxTexture resources, AtlasTexture icons, and native Theme bindings from visual references. Use it when you need a flat-first UI style system instead of a screen layout or mockup. **Install:** ```bash npx degit https://github.com/RandallLiuXin/GodotMaker/tree/main/skills/assets/ui-kit ~/.claude/skills/ui-kit ``` ## README # 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: ```powershell python tools/asset_ui_source_sheet_plan.py --request ASSET_REQUEST.json --scheme .agents/skills/ui-kit/references/source-sheet-scheme.json --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 drawing, inline scripts, placeholders, or a new pixel tool. Do not pass raw provider rectangles directly to a compiler. 4. Compile the flat-first runtime resources. Generate `stylebox_plan.json`: ```powershell python tools/asset_ui_stylebox_plan.py --source-sheet-plan source_sheet_plan.json --theme-plan theme_plan.json --asset-id --out stylebox_plan.json ``` The fixed profiles, not freehand agent guesses, own borders, content margins, safe centers, stretch modes, and preview sizes. The plan expands eight source patches into 23 stable `StyleBoxTexture` outputs. Base, Primary, Secondary, and Danger button families reuse the same state patches through deterministic `modulate_color`; popup and tooltip reuse panel patches. Copy `stylebox_plan.styleboxes` unchanged into the request at `.godotmaker/asset-generation/-request.json` under `spec.styleboxes` and compile every entry. Compile 31 stable runtime `AtlasTexture` outputs from the icon metadata. Multiple names may intentionally share one of the 24 source rectangles. Bind only Godot-defined semantic icon slots in `Theme`; keep other utility icons as independently reusable named runtime resources. 5. Generate and compile the complete Theme recipe: ```powershell python tools/asset_ui_theme_recipe.py --theme-plan theme_plan.json --asset-id --out theme_recipe.json ``` The recipe uses native `StyleBoxFlat`/`StyleBoxEmpty` resources for input, text, progress, slider, scrollbar, option-button, focus, separator, and undrawn control backgrounds. It uses the compiled texture resources only for button, panel, tab, popup-panel, and tooltip surfaces. Compile the final Theme to `res://assets/generated/ui-kit//_theme.tres`. 6. Return the generic result with separate `source_layout` sources and `godot_artifact` runtime outputs, all under `res://assets/generated/ui-kit//`. Sources include theme/source plans, recipe, raw provenance, physical atlases, atlas metadata, and processing reports. Declare each raw provider sheet as `grid_sheet`, each physical final atlas as `region_atlas`, and plans/provenance/reports without an invented layout. Use stable report names `surface_patches_finalize_report.json`, `icons_finalize_report.json`, `surface_patches_process_report.json`, and `icons_process_report.json`. Runtime outputs include the Theme, 23 `StyleBoxTexture` resources, and 31 `AtlasTexture` resources. Every runtime output has one required filename, derived from the name it serves: the Theme at `_theme.tres`, and every `StyleBoxTexture` and `AtlasTexture` at `.tres`. One kit fills one directory, so this is what keeps each output separately bindable — two resources sharing a file would hand a worker the wrong Godot type. `check_ui_card_handoff` enforces it at L0, so a drifting filename is a repair, not a late failure. The family validator checks each output's declared path. Cross-output path uniqueness is enforced when the manager registers the completed result. 7. Write the complete derived request to `.godotmaker/asset-generation/-request.json` and candidate result to `.godotmaker/asset-generation/-result.json`. Run the public validator after resources exist: ```powershell python tools/asset_ui_card_validate.py --request .godotmaker/asset-generation/-request.json --result .godotmaker/asset-generation/-result.json --project-root . --godot-path --allow-failure ``` It owns L0-L5 facts. L0-L4 check the closed contract, sources and trace, native compilation, Godot load, and structural bindings. L5 instantiates common controls at compact and expanded sizes. L6 is a separate private visual Eval. Treat a failed level as repair input: - L1: preserve evidence and regenerate only the invalid source sheet. - L2: repair derived requests, mappings, recipes, or compiler support; do not regenerate valid art for a Godot schema error. - L3-L5: repair paths, regions, bindings, or consumer setup and rerun. Record retries. STOP only for an input-gate failure or a pinned provider that cannot attach references. Never hand-write L-level values; do not STOP merely because a production validation attempt failed. Resolve Godot from `.claude/godotmaker.yaml`'s `godot_path`; when it is absent, use `godot` on `PATH`. Do not substitute another installation. If required validation cannot run, return a failed result rather than claiming readiness. ## Return format Finish with exactly one generic Asset Skill result JSON object. A successful result is validator-owned. A genuine input-gate STOP has the same generic keys, no outputs, and `validation.passed: false` with a concrete note. Do not replace the object with prose or Markdown. The worker owns final page layout. The returned Theme, StyleBoxes, and AtlasTextures are reusable visual-system resources; a reference establishes visual language, not pixel-perfect screen layout.