image-compose

Image Compose

Read this skill after route lock for COMPOSE, or later in HYBRID, GENERATE, or EDIT only when deterministic copy, layout, diagram, framing, crop, mask, or overlay work is required. Do not preload it during routing. Keep the artifact in one stable directory containing image-manifest.json, index.html, and local assets.

Safe project bootstrap

Create or repair image-manifest.json and index.html with write_file / edit_file. Do not assemble either file through bash, PowerShell, shell redirection, or an inline script: quoting damage can leave a partially written project and shell safety checks can block recovery.

This production skill is the earliest point at which a COMPOSE manifest may be created. Initialize it from the Canonical image-manifest v1 block in image-router; that block is the single structural source, so do not redefine or reconstruct the manifest shape here. Replace every example value with the current brief and planning output. Keep its nesting and value types exactly: brief.purpose and every art_direction field are required by native inspection, and any region coordinates belong under visual_plan.regions[].bounds.

For HYBRID, GENERATE, or EDIT, set the locked lowercase route and the approved nonzero generation budget, then add the route-specific reference and request fields required by image-router / image-generate. After the first write, read the manifest back once and repair it with edit_file if needed before calling project.inspect.

Authoring contract

• Start from the canvas and art direction in the manifest. Make the first render meaningful without network access or user interaction.
• Keep decorative rules, strokes, and signature geometry outside every required-text bounding box. After any headline revision, recheck the full phrase at thumbnail size and repair any line or shape that crosses, crowds, masks, or visually splits a glyph or line of copy.
• Fit every multi-glyph required headline as a complete phrase before snapshot. Automatic wrapping must never leave a line with only one glyph: widen the text box, reduce the type size, or author an intentional balanced <br> before capture. Do not approve a source merely because the DOM contains the exact string; line-by-line rendered legibility is the gate.
• For a multi-image set, reuse the first passing image's concrete CSS/SVG design decisions—palette variables, type roles, spacing/grid, radii, strokes, icon treatment, material effects, and signature device—in every later member. Change the content and the layout details needed by that content; do not redesign the visual system per image.
• Use semantic HTML for text and SVG for geometry, diagrams, strokes, charts, patterns, and masks. Use CSS for layout, texture, lighting, and controlled effects.
• Preserve every required-copy string exactly in visible DOM text. Keep important text out of raster assets.
• Preserve natural English casing: use sentence case or natural title case for titles and sentence case for body, captions, labels, and CTAs. Keep all caps only when that exact casing is explicit in required user copy or an external brand/source, and then only for one short metadata label, acronym, or code. Never apply text-transform: uppercase through a broad selector or use multiple all-caps text roles; create hierarchy with family, width, weight, scale, color, or spacing.
• Use only local relative assets inside the project directory. Do not use scripts, CDNs, remote fonts, remote images, iframes, embedded pages, autoplay media, or a local server.
• In HYBRID, use the generated raster as one deliberate layer and let HTML/SVG own copy, logo placement, framing, and layout.
• Map every visual_plan.regions[].id to an HTML/SVG element with data-image-region. Treat supplied reference images as local assets: they remain usable in HTML through <img>, CSS backgrounds, SVG <image>, masks, crops, and overlays without a generation call.
• Declare the fixed canvas on the index.html root with data-preview-layout="fixed-canvas", data-preview-width="<canvas.width>", and data-preview-height="<canvas.height>". The two dimensions must exactly match image-manifest.json; this is the shared HTML viewer contract, not ImageStudio-specific presentation logic.
• Size for the declared canvas. Avoid hidden overflow, tiny copy, edge collisions, and low-contrast focal content.