# Ui Asset Pipeline

> Define import, 9-slice, atlas packing, theming, and naming rules for UI visual assets (buttons, panels, icons, bars).

- **Type:** Skill
- **Install:** `agentstack add skill-mrcalderon3d-everything-game-dev-code-ui-asset-pipeline`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [MRCalderon3D](https://agentstack.voostack.com/s/mrcalderon3d)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [MRCalderon3D](https://github.com/MRCalderon3D)
- **Source:** https://github.com/MRCalderon3D/everything-game-dev-code/tree/main/skills/art-audio-content/ui-asset-pipeline

## Install

```sh
agentstack add skill-mrcalderon3d-everything-game-dev-code-ui-asset-pipeline
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UI Asset Pipeline

## Purpose
Define import, 9-slice configuration, atlas packing, theming, and naming rules for UI visual assets so they scale correctly across resolutions, remain consistent with the visual theme, and are replaceable without code changes.

## Use When
- the project needs UI visual assets (buttons, panels, icons, progress bars, backgrounds)
- placeholder UI rectangles are being replaced with styled assets
- a UI theme or skin system needs standardization
- new UI screens are being added and need visual assets that follow project conventions

## Inputs
- art bible or UI style guide (palette, typography, spacing, border radius)
- target resolutions and aspect ratios
- UI element inventory (buttons, panels, icons, bars, dividers, tooltips)
- 9-slice requirements per element type
- atlas packing strategy (single UI atlas vs per-screen)

## Process
1. define UI asset categories, naming convention, and folder structure
2. set resolution, format, and import settings per category (sprites vs raw textures)
3. establish 9-slice borders for scalable elements (buttons, panels, dialogs)
4. configure UI atlas packing groups and max atlas size
5. define theme structure (base palette, variant overrides, font pairing)
6. validate that all UI assets render correctly at min and max supported resolutions

## Outputs
- UI asset naming and folder convention document
- import settings template per UI asset category
- 9-slice border specification per scalable element
- UI atlas packing configuration
- theme definition (palette, fonts, spacing, variants)
- validation checklist for new UI asset submissions

## Quality Bar
- every UI asset follows the naming convention and lives in the correct folder
- 9-slice borders are correct — no stretching artifacts at any supported resolution
- UI atlas does not exceed platform texture memory budget
- theme is applied consistently — no one-off color or font overrides in individual screens
- all UI elements are legible at the smallest supported resolution

## Common Failure Modes
- 9-slice borders set incorrectly, causing visual distortion on resize
- inconsistent padding or margin between UI elements across screens
- UI atlas too large because high-res assets were used where 9-slice would suffice
- theme colors hardcoded per element instead of referenced from a central palette
- icons rendered at wrong resolution, appearing blurry or oversized

## Related Agents
- 2d-artist
- ui-ux-designer
- ui-programmer

## Related Commands
- ui-asset-pass
- ui-flow-review
- perf-budget

## Related Skills
- generated-raster-asset-pipeline

## Notes
- Keep this skill aligned with the relevant rules layer and current project documentation.
- If engine-specific constraints materially change the workflow, hand off to the matching engine skill or engine-specific reviewer.
- UI assets can be generated programmatically via the engine's editor-scripting or pixel-buffer APIs — this skill's conventions apply equally to hand-drawn and code-generated assets. The concrete API belongs to the active engine layer.
- If UI skins or icons are generated with an image model, pair this skill with `generated-raster-asset-pipeline` so transparency, crop cleanliness, 9-slice readiness, and declared display-size expectations are validated before acceptance.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [MRCalderon3D](https://github.com/MRCalderon3D)
- **Source:** [MRCalderon3D/everything-game-dev-code](https://github.com/MRCalderon3D/everything-game-dev-code)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mrcalderon3d-everything-game-dev-code-ui-asset-pipeline
- Seller: https://agentstack.voostack.com/s/mrcalderon3d
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.