Update to Orshot

{
  "name": "orshot-design",
  "description": "Design trendy, professional, on-brand Orshot studio templates. Use when creating or refining a template design via the Orshot MCP — social posts, ads, stories, carousels, banners, thumbnails. Applies the craft rules (clear hierarchy, 2-font typography, 60-30-10 color), consults the brand kit first, varies layouts so designs never repeat by type, and runs a render-and-critique loop. Pairs with the orshot MCP create/update/patch tools.",
  "included_files": [
    {
      "relative_path": "references/social-media.md",
      "size_in_bytes": 4811
    }
  ],
  "skill_md_contents": "---\nname: orshot-design\ndescription: Design trendy, professional, on-brand Orshot studio templates. Use when creating or refining a template design via the Orshot MCP — social posts, ads, stories, carousels, banners, thumbnails. Applies the craft rules (clear hierarchy, 2-font typography, 60-30-10 color), consults the brand kit first, varies layouts so designs never repeat by type, and runs a render-and-critique loop. Pairs with the orshot MCP create/update/patch tools.\nmetadata:\n  author: Rishi Mohan\n  version: \"1.0.0\"\n  mcp-server: orshot\n---\n\n# Orshot Design — the craft layer\n\nMake Orshot studio templates that look trendy and professionally designed, not the\ngeneric centered-text \"AI\" look. This skill is the knowledge layer on top of the Orshot\nMCP server's design tools (`orshot_create_template_design`, `orshot_update_template_design`,\n`orshot_patch_template_elements`, `orshot_get_brand_kit`).\n\n## When to use\nUse whenever you are designing or refining a visual template: a social post/story/carousel,\nan ad creative, a banner, a thumbnail, a launch graphic. For the studio element schema and\nrender gotchas, also consult the MCP resource `orshot://template-design-spec`.\n\n## Boundaries\n- This is design guidance — it does NOT replace the schema spec. Style values are always\n  strings with units; `position`/`dimensions` are nested objects. See Compatibility below.\n- It composes with the `orshot` skill (API/generation mechanics) — use that to render.\n\n## Operating principle\n**Design serves the task.** Decide the ONE thing the viewer must take away, then make\neverything support it. Respect the brand and the platform over generic prettiness. Prefer\nthe deterministic rules below over subjective iteration.\n\n## Required workflow (in order)\n1. **Shape** — restate the goal, audience, and the single key message before placing anything.\n2. **Inherit the brand (when on-brand)** — IF the design should match the user's\n   brand/product (the prompt implies it, or asks for \"our\" style), call `orshot_get_brand_kit`\n   (tag-filter to the purpose) and map brand colors/fonts/logo onto the roles in Systems. If\n   the prompt asks for a generic/standalone look, use the pack defaults — don't force brand in.\n3. **Pick the vertical pack** — read the matching file in `references/` (e.g.\n   `references/social-media.md`) for format, safe areas, archetypes, and a concrete recipe.\n   Choose a DIFFERENT archetype from recent templates of this type.\n4. **Build** — establish one focal element, then support it. Keep the design simple on the\n   first create; refine in a follow-up update.\n5. **Critique** — create/update with `includeThumbnails:true`, READ the thumbnail, and fix\n   issues with `orshot_update_template_design` / `orshot_patch_template_elements`. Never ship\n   the first pass unseen. (The create tool also returns a \"🎨 Design check\" — resolve its ⚠s.)\n\n## Systems\n- **Hierarchy** — one clear focal point via size, weight, and position. Not everything centered.\n- **Typography** — exactly **2 font families** (display + body). Hierarchy from scale/weight.\n  Tight `lineHeight` (1.0–1.15) and slightly negative `letterSpacing` on large display type.\n  Heaviest brand font → display, lighter → body.\n- **Color — 60-30-10** — 60% dominant, 30% secondary, 10% accent. Cohesive palette beats more\n  colors. Clear WCAG AA contrast. Map brand colors to roles by USAGE, not by \"primary\" label.\n- **Composition & space** — generous margins (≥ ~6% of canvas per edge), align to an implied\n  grid, prefer off-center over dead-center stacking.\n- **Imagery** — full-bleed or intentionally framed; `objectFit:\"cover\"` for photos; add a\n  gradient scrim under text over busy photos.\n\n## Brand (contextual — not mandatory)\nUse the brand kit WHEN the design should be on-brand (the prompt references the user's brand,\nproduct, or identity): colors → 60-30-10 roles, fonts → display/body, logo → a small\ncorner/footer mark, images → hero/product. For a generic/exploratory/standalone look, the\npack palette is fine — don't force brand assets in.\n\n## Variety\n**Never repeat a layout for the same content type.** Vary archetype, focal placement, and\ncolor emphasis between designs of the same kind.\n\n## Compatibility (get these right or the render silently breaks)\n- ALL style values are **strings with units**: `\"48px\"`, `\"700\"`, `\"12px\"` — never bare numbers.\n- `position` and `dimensions` are **nested objects** (`{x,y}`, `{width,height}`).\n- **Set `textMode:\"fit\"` + `minFontSize` on EVERY text element** (floors: headline 48,\n  subtitle 28, body 24, kicker 18, caption 14). The default `\"overflow\"` does not shrink or\n  reflow — long/parameterized text spills out of its box.\n- Line breaks: use `\\n`, **NEVER `<br>`**; avoid multiple `<p>` blocks (they overlap). For a\n  multi-line headline with one accent-colored word, use one text element per line.\n- A **background-highlight `<span>` (colored pill) forces the whole element to one line**\n  (`white-space: nowrap`) → overflow on long text. Highlight only 1–3 words; for long\n  headlines use `color` emphasis (no background) or split per line.\n- Parameterizable fields need `parameterizable:true`, a unique snake_case `parameterId`, and a\n  `parameterType` matching the element (text→\"text\", image→\"imageUrl\", shape→\"fill\",\n  canvas/container→\"backgroundColor\").\n- Shapes with transparent fill + a border render nothing; SVG `content` must be a data-URI.\n\n## Anti-patterns (the AI-slop tells — avoid)\n- Everything centered and stacked; no focal point.\n- 3+ fonts, or random sizes with no hierarchy.\n- Low-contrast text on a busy photo with no scrim.\n- Forcing brand assets when the prompt didn't ask for an on-brand design (or ignoring the kit when it clearly did).\n- A tiny headline above a paragraph of body copy (a template is not a document).\n- Re-emitting the previous layout for the same content type.\n\n## Vertical packs (progressive disclosure)\nRead the one matching the task — each adds format/safe-areas, archetypes, and a recipe:\n- `references/social-media.md` — posts, stories, carousels.\n- (more verticals — ads, real-estate, e-commerce — added here over time.)\n\n## Examples\n\n### Example 1 — \"Make an Instagram post announcing our new feature\"\n1. `orshot_get_brand_kit` (tags: \"social-media\") → brand colors/fonts/logo.\n2. Read `references/social-media.md` → default 4:5 portrait 1080×1350; pick the `type-hero`\n   archetype (different from the last post).\n3. `orshot_create_template_design` with brand display font for an oversized headline, brand\n   dominant color as background, accent color on one word, logo + @handle footer,\n   `includeThumbnails:true`.\n4. Read the thumbnail + \"🎨 Design check\"; patch contrast/spacing as needed.\n\n### Example 2 — \"Refine this template, it looks generic\"\n1. `orshot_get_studio_template` to inspect the current design.\n2. Diagnose against Anti-patterns (centered? 3+ fonts? no focal point? brand ignored?).\n3. `orshot_patch_template_elements` to set one focal headline, trim to 2 fonts, apply brand\n   60-30-10, left/bottom-align. Re-render with `includeThumbnails:true` and verify.\n\n## Troubleshooting\n\n**Headline shows on one line / `<br>` ignored.** Use `\\n`, not `<br>`. For a colored word on\na multi-line headline, split into one text element per line.\n\n**Colors/fonts look off-brand.** You skipped step 2 — call `orshot_get_brand_kit` and map the\nreturned `value` (colors) and `name` (fonts) onto the design.\n\n**\"🎨 Design check\" warns about repetition.** This layout matches a recent same-type template.\nSwitch archetype and move the focal point.\n"
}