ui-transform-layering

Apply global UI transforms at the rendering root with jog and set methods.

1|Updated Feb 15, 2026
One-click install
npx skills add https://github.com/mlinnen/mr-pumpkin --skill ui-transform-layering
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-transform-layering
Source: https://github.com/mlinnen/mr-pumpkin/tree/main/.squad/skills/ui-transform-layering
Command: npx skills add https://github.com/mlinnen/mr-pumpkin --skill ui-transform-layering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When rendering complex user interfaces, applying transforms (offsets, scales, rotations) at the individual element level becomes brittle and hard to maintain. This pattern applies the transform once at the rendering root to ensure a consistent, uniform effect across all features.

Core Features & Use Cases

  • Centralized transform state at the render root to maintain uniform offsets, scales, and rotations
  • Orthogonal separation of transform logic from feature rendering to simplify maintenance
  • Incremental adjustment APIs (jog, set, reset) for dynamic UI alignment
  • Works for 2D UI and projection/world-space alignment, including multi-monitor and camera panning scenarios

Quick Start

Use the ui-transform-layering pattern to apply a root transform and adjust it with jog_projection or set_projection_offset to nudge the entire UI.

Frequently Asked Questions about ui-transform-layering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to apply a uniform UI transform across all rendered elements?

The best way to apply a uniform UI transform is at the rendering root, ensuring consistent offsets, scales, and rotations globally without modifying individual feature draw calls.

How do I handle user-adjustable camera panning in a 2D graphics pipeline?

Handle camera panning by applying a global transform at the render root, allowing dynamic UI alignment and world-space projection adjustments without altering individual element rendering logic.

Why does applying scale and rotation to individual UI elements become hard to maintain?

Applying transforms at the individual element level becomes brittle because it lacks orthogonal state separation, making a centralized render root transform necessary for consistent global effects.

Can I incrementally nudge UI alignment without resetting the entire projection?

Yes, you can incrementally nudge UI alignment using jog and set methods to adjust projection offsets dynamically, which includes bounds checking to prevent extreme camera panning shifts.

Does this render root transform approach support multi-monitor projection scenarios?

Yes, the render root transform supports multi-monitor projection scenarios by maintaining a centralized transform state that uniformly applies coordinate space adjustments across all rendered features.

What are the limitations of using a global transform for UI layering?

A limitation of global UI transform layering is the need for bounds checking to prevent extreme offsets, requiring orthogonal separation of transform logic from feature rendering to avoid maintenance issues.