imgx-template-generator

To generate Vue templates for IMGX that comply with Satori constraints, this Skill constructs template strings using flex containers, allowed CSS properties, and base64-embedded images. It scaffolds the template file and auto-registers it into the server-side templateStrings map.

Automating card image generation from text is achieved by creating IMGX presets that define contentProps and styleProps. These presets drive consistent rendering of article covers and marketing visuals by mapping plain text inputs into styled template strings.

Creating presets for IMGX templates involves defining contentProps for text inputs and styleProps for visual styling. The Skill uses these preset configurations alongside registered template strings to drive the final card render output.

Satori does not support standard CSS fully; it enforces specific rendering constraints like requiring flex containers and a limited subset of CSS properties. The Skill builds template strings that strictly satisfy these Satori rules to ensure proper card rendering.

IMGX templates fail to render text into card images when template strings violate Satori constraints, such as using unsupported CSS properties or non-flex containers. The Skill prevents this by generating compliant template strings and properly registering them.

You can use base64-embedded images in IMGX Vue templates because Satori rendering constraints require images to be embedded this way. The Skill constructs template strings that automatically incorporate base64 images for visual card generation.