Update to Templated

{
  "description": "Design a new Templated template from a short brief, or fix the layout of an existing one, with create_template and update_template: Instagram posts and stories, Open Graph link previews, banners, certificates, invoices, menus, quote cards and multi-size templates. Use when no existing template fits, the account has no templates yet, the user asks to design or redesign a template, or a render shows text that overflows, overlaps or is hard to read.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 114
    }
  ],
  "name": "templated-design",
  "skill_md_contents": "---\nname: templated-design\ndescription: \"Design a new Templated template from a short brief, or fix the layout of an existing one, with create_template and update_template: Instagram posts and stories, Open Graph link previews, banners, certificates, invoices, menus, quote cards and multi-size templates. Use when no existing template fits, the account has no templates yet, the user asks to design or redesign a template, or a render shows text that overflows, overlaps or is hard to read.\"\n---\n\n# Design a Templated template\n\nA template is a canvas (width, height, background) with named layers. The\nlayer names become the keys used later in `create_render`, so name each layer\nby its role.\n\nExplicit instructions from the user about layout, colors, fonts or wording\ntake priority over the defaults below.\n\n## 1. Gather the brief\n\nYou need what the piece is for, its size, the text it carries, and any brand\ncolors, fonts or image URLs. Use what the user already said. Ask one short\nquestion only when the purpose or the main text is missing. Otherwise choose\nsensible defaults and say which ones you chose.\n\n| Piece | Size (px) | Keep clear |\n|---|---|---|\n| Instagram post | 1080x1080 | 64 px on every side |\n| Story or reel | 1080x1920 | top 250 px and bottom 320 px, covered by app controls |\n| Link preview (Open Graph) | 1200x630 | keep text inside the central 1000x500 |\n| YouTube thumbnail | 1280x720 | the bottom-right corner, where the duration badge sits |\n| Certificate, A4 landscape | 1754x1240 | 120 px margins |\n| Invoice, menu or flyer, A4 portrait | 1240x1754 | 120 px margins |\n\n## 2. Compose before placing layers\n\n- **One message.** Write the one sentence the viewer should take away. Leave\n  out anything that doesn't serve it.\n- **One dominant element.** The main text is at least twice the size of the\n  next largest text.\n- **Two font families at most.** One display face for the headline, one text\n  face for the rest. Vary weight, size, letter spacing and color instead of\n  adding fonts. Widely available families such as Inter, Montserrat, Poppins,\n  Roboto, Playfair Display and Archivo Black work well. `list_fonts` shows the\n  fonts uploaded to the account, such as brand fonts.\n- **Color 60-30-10.** One surface color for most of the canvas, a neutral\n  family for the text, and one accent used at most three times.\n- **One margin, one alignment edge.** Inset content by about 8% of the shorter\n  side (about 90 px on 1080) and align every layer to the same left edge or the\n  same center.\n- **No text directly on a photo.** Put a full-canvas `shape` layer between the\n  photo and the text, for example\n  `<rect width=\"100%\" height=\"100%\" fill=\"#0B0E13\" opacity=\"0.8\"/>`, with an\n  opacity that keeps the smallest text readable.\n- **Images.** Use only image URLs the user gave you or that are already in the\n  account (`list_uploads`). Without one, design with color and shapes, and keep\n  an image layer only if the user plans to add a photo.\n\nVary the structure across a series so consecutive pieces don't look the same:\n\n| Piece | Structure |\n|---|---|\n| Announcement, event | Full-bleed photo, dark overlay, text block low on the left |\n| Quote, testimonial | Flat color, no photo, large centered text, thin rule above |\n| Product, offer | Canvas split in two: image on one half, text on the other |\n| Stat, result | One oversized number as the dominant element, label under it |\n| Certificate | Centered stack: title, recipient name (largest), reason, then date and issuer at the bottom |\n\n## 3. Create the template\n\nCall `create_template` with `name`, `width`, `height`, an optional\n`background`, and `layers`. Each layer needs a unique `layer` name, a `type`\n(`text`, `image`, `shape` or `rating`) and its position (`x`, `y`, `width`,\n`height`).\n\n- **Text:** `text`, `font_family`, `font_size` (for example `\"72px\"`),\n  `font_weight`, `color`, `horizontal_align`, `vertical_align`, `line_height`,\n  `letter_spacing`.\n- **Image:** `image_url`, and `object_fit: \"cover\"` to fill the box.\n- **Shape:** SVG markup in `html`, for example\n  `<rect width=\"100%\" height=\"100%\" rx=\"24\" fill=\"#1477FF\"/>`.\n- **Stacking:** later layers are drawn on top; `order` sets it explicitly.\n\nName layers by role, in lowercase: `headline`, `subtitle`, `photo`, `logo`,\n`name`, `date`, `cta`. Fill text layers with realistic content from the brief,\nand size each text box for the longest value it will receive.\n\nFor several sizes of one design (for example a post, a story and a banner),\npass `pages` instead of `layers`. Each page has a `page` name, its own `width`\nand `height`, and `layers` keyed by layer name. When rendering, use\n`get_template_pages` to read the exact layer names of each page.\n\n## 4. Render and check\n\n1. Render the new template once with `create_render`, using the real content\n   from the brief.\n2. If you can see the rendered image, check it before showing it:\n   - Is the main message the first thing you notice?\n   - Does any text overflow, get cut off, or run past the margins?\n   - Do any layers overlap by accident?\n   - Does the headline still read at thumbnail size?\n   - Is any placeholder text left?\n3. Fix what failed and render again. Two passes are normal. Then show the\n   result and ask the user what to change.\n\nFor long or variable text, send `\"autofit\": \"height\"` with `min_font_size` and\n`max_font_size` for that layer in `create_render`, and lower `max_font_size`\nuntil the longest string fits. Don't send `font_size` together with autofit.\n\n## 5. Edit an existing template\n\n- `update_template` matches layers by their `layer` name: existing names are\n  updated and new names are added. For every layer you change, send `layer`,\n  `type`, both `x` and `y`, and every property you want to keep, because a\n  missing coordinate is set to 0 and omitted properties can be reset.\n- Leave `replaceLayers` off unless the user wants layers removed, because it\n  deletes every layer missing from the request.\n- Avoid changing `shape` layers with `update_template`, because a shape can\n  lose its SVG content. If a shape must change, create a corrected copy with\n  `create_template`, tell the user its name, and keep the original unless they\n  ask to delete it.\n- To add a size to a multi-size template, send a new page in `pages` with its\n  own `width` and `height`. On multi-size templates, set sizes per page rather\n  than at the top level.\n- After an update, call `get_template_layers` to confirm the change, then\n  render once to check it.\n- For fine adjustments, the user can open the template in the Templated editor\n  (app.templated.io) and keep rendering from the chat.\n"
}