imgx-template-generator

Generate IMGX Vue template strings that comply with Satori constraints.

119|10|Updated Feb 7, 2025

Search Tags:#automation #template generation #Vue #presets #IMGX #template strings #Satori

Ready to run

npx skills add https://github.com/aatrooox/imgx --skill imgx-template-generator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: imgx-template-generator
Source: https://github.com/aatrooox/imgx/tree/main/.opencode/skills/imgx-template-generator
Command: npx skills add https://github.com/aatrooox/imgx --skill imgx-template-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers generate IMGX Vue templates that conform to Satori rendering constraints, turning textual content into ready-to-render card templates without manual boilerplate.

Core Features & Use Cases

Generate type-safe template strings for IMGX that satisfy the Satori rules (flex containers, allowed CSS, base64-embedded images).
Auto-register templates into a server-side templateStrings map and create presets to render consistent card visuals.
Use cases include creating article covers, marketing cards, or social media visuals from plain text inputs.

Quick Start

To generate a new template for a title card, run the skill to scaffold a template file, wire it into the template registry, and create a preset describing the content and style.

Frequently Asked Questions about imgx-template-generator

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

FAQPage Schema

How do I generate Vue templates for IMGX that comply with Satori rendering constraints?▼

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.

What is the best way to automate card image generation from text for social media visuals?▼

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.

How do I create presets for IMGX templates to render consistent marketing cards?▼

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.

Does Satori support standard CSS when building template strings for card visuals?▼

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.

Why does my IMGX template fail to render text into a card image properly?▼

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.

Can I use base64-embedded images in IMGX Vue templates for Satori rendering?▼

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.