Miliastra Image Editor CSS Builder

Problem

The Miliastra image editor import pipeline expects a strict CSS scene format. Typical web CSS can silently drop elements when it uses pseudo-elements, gradients, percentage sizes, or malformed rotation. Without an explicit canvas size and element budget, the editor preview, PNG export, and GIA assets can shift or fall back to unexpected colors.

How It Works

The skill generates importable CSS through a planning-first workflow:
- Confirm the element budget and canvas size first; the full-canvas background rectangle counts toward the budget.
- Extract 3–6 primary colors, map canvas regions such as sky, subject, and foreground, then plan layers by z-index.
- Use only supported primitives: rectangles, ellipses with border-radius: 50%, and triangles with the exact clip-path template.
- Use rotated ellipses for soft light, shadow, and color blending; use opaque rectangles or triangles for hard-edged subjects; keep rotated bounding boxes inside the canvas.
- Return only CSS, with usage comments such as 11/20 elements used.

Boundaries

This approach is best for quick, round-trip scene generation within an element budget. It does not support gradients, rgba, percentage sizes, pseudo-elements, box-shadow, filter, or transforms other than rotate(Ndeg). For native stars, precise triangle rotation, or higher fidelity, switch to JSON import instead of approximating with CSS.