How long does the integration take?

Change one base URL in an OpenAI-compatible client, or install the Python or TypeScript SDK; the quickstart routes a first request in a few minutes.

Will this lock us into another vendor?

No. The router is Apache-2.0 open source, your provider keys stay yours, and the API is OpenAI-compatible, so leaving is a change of base URL.

What happens when a provider fails?

The router falls back to the next model your policy allows and records the fallback in the trace, so an outage costs a retry, not an incident.

cover-image - Prompt - OpenSmartRoute

Name: cover-image
Author: mmarko88

Prompt file imported from mmarko88/mmarko88.github.io (.windsurf/workflows/cover-image.md). Copyright stays with the author.

Cover image for a post

Usage: /cover-image <post> — <post> is a directory or slug under content/post/ (e.g. cover-image teen_mistakes).

Produces 2–3 candidate cards as SVG + rendered PNG previews; the user picks one. Distilled from OG-image CTR research — do not skip the read-first steps.

Steps

Read the post fully (title, description, hook, conclusion). Find the punchline: the most surprising number, the strongest quote, or the core mechanism/takeaway. The card sells the click — do NOT just repeat the H1 on a colored background.
Pick a concept type (in priority order — the first that fits the content):
- Proof card — the surprising number / before-vs-after / benchmark shape (best for measured posts; numbers get clicked)
- Quote card — bold typography + attribution badge (interviews, opinions, quotable one-liners)
- Visual metaphor — the article's mechanism compressed into one glance (pipeline, split bar, ✗/✓ list)
- Title card — fallback only: eyebrow tag + shortened title + one-line hook
Draft 2–3 SVG variants at 1200x630 in the post's page bundle. Each variant must differ in perspective, not just colors/layout — assign each a distinct creative angle, e.g. the reader's-pain angle, the authority/credibility angle, the mechanism angle (persona-based variation is what actually diversifies an idea pool; restyling the same concept does not). For posts about a person, prefer a variant with their real public headshot — faces outperform every other focal point (crop tight, expressive beats neutral). If the user rejects the first set, run a reseed burst: list the rejected concepts as one-line mechanisms and generate only directions not yet proposed.

Serving rules (from RESEARCH-cover-image.md — most card failures are here, not design):
- shareImage must be a raster file (PNG/JPG) with a real extension — social crawlers ignore SVG/WebP
- Platforms cache cards by URL forever: if re-generating a card for an already-shared post, bump the filename (e.g. share-v2.png)
- JPEG for photos, PNG for text cards; never rely on transparency; keep under a few hundred KB
- featureImageAlt/og:image:alt: describe the card in plain words — not a verbatim title repeat
Brand tokens (match existing heroes, e.g. fp-antipatterns-hero.svg):
- Light bg #f7f9fc / dark bg #172033; accent bar rect 12px #1a5fb4 at top
- Font Segoe UI, Arial, sans-serif only; red #ca3f3f (+bg #fde8e8), green #17864b (+bg #d9f2e4), muted #617086 (light) / #9aa8bf (dark)
- Eyebrow row: font-size 24, font-weight 700, letter-spacing 2, caps, accent color
- Footer: TOPIC · TOPIC · professionaldev.dev, font-size 18, muted
Layout rules (from research — violations get cropped or ignored):
- Safe zone: keep everything critical inside the center ~1000x500; ≥60px from edges (platforms crop unpredictably)
- Headline 46–72px so it reads at ~300–400px preview width; max 2–3 text elements; 6–10 words of large text max
- One message — billboard, not infographic. If a row needs a label >~35 chars at 22px, shorten it or move the annotation to a separate column (x≥580)
- No fake buttons/CTA chrome; high contrast (dark text on light card or white on #172033)
- Estimate text width ≈ chars × font-size × 0.55; check for overlaps before rendering
- Keep text ≤10 words and large — Google Discover recommends against text-heavy og:images (a performance recommendation, not a ban); the card must still read visually without its text
Render PNG previews — headless Chrome (works offline, no rsvg/magick needed):
```
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --window-size=1200,630 \
  --screenshot="<abs>/preview-<name>.png" "file://<abs>/hero-<name>.svg"
```
If the SVG ever uses web fonts, wait for document.fonts.ready before screenshot — load doesn't cover them (Playwright > Puppeteer if this pipeline ever graduates to a script). Always read_file each PNG to check it visually — overlaps, clipping, and legibility at ~400px thumbnail width. Fix and re-render before presenting.
Self-check before presenting (reviewer pass — observable bans, not vibes). For each PNG, verify: nothing critical within 60px of edges; headline ≤10 words and legible at 400px; no fake buttons/CTA chrome; no text overlapping other elements; brand tokens used (accent #1a5fb4, site font, footer with professionaldev.dev); the card reads visually even without its text. Any failure → fix and re-render before the user sees it.
Present previews to the user. On pick: rename winner to <slug>-hero.svg (or post's existing convention), re-render it as share.png, delete losing SVGs/previews.

Wire front matter — if the post isn't a page bundle yet, git mv post.md post/index.md first:

usePageBundles: true
featureImage: '<name>-hero.svg'   # hero shown atop the post
featureImageAlt: '<what the card literally shows>'
shareImage: 'share.png'           # PNG — social crawlers ignore SVG/WebP

Verify on localhost:1313 — post serves 200 and the hero renders. Optionally sanity-check the card with a link-preview debugger (Facebook Debugger, LinkedIn Post Inspector) before the post is shared — crawlers cache the first fetch. Do not commit unless asked.

Install cover-image and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

# Cover image for a post Usage: `/cover-image <post>` — `<post>` is a directory or slug under `content/post/` (e.g. `cover-image teen_mistakes`). Produces 2–3 candidate cards as SVG + rendered PNG previews; the user picks one. Distilled from OG-image CTR research — do not skip the read-first steps. ## Steps 1. **Read the post fully** (title, description, hook, conclusion). Find the *punchline*: the most surprising number, the strongest quote, or the core mechanism/takeaway. The card sells the click — do NOT just repeat the H1 on a colored background. 2. **Pick a concept type** (in priority order — the first that fits the content): - **Proof card** — the surprising number / before-vs-after / benchmark shape (best for measured posts; numbers get clicked) - **Quote card** — bold typography + attribution badge (interviews, opinions, quotable one-liners) - **Visual metaphor** — the article's mechanism compressed into one glance (pipeline, split bar, ✗/✓ list) - **Title card** — fallback only: eyebrow tag + shortened title + one-line hook 3. **Draft 2–3 SVG variants** at `1200x630` in the post's page bundle. Each variant must differ in *perspective*, not just colors/layout — assign each a distinct creative angle, e.g. the reader's-pain angle, the authority/credibility angle, the mechanism angle (persona-based variation is what actually diversifies an idea pool; restyling the same concept does not). For posts about a *person*, prefer a variant with their real public headshot — faces outperform every other focal point (crop tight, expressive beats neutral). If the user rejects the first set, run a **reseed burst**: list the rejected concepts as one-line mechanisms and generate only directions not yet proposed. **Serving rules (from RESEARCH-cover-image.md — most card failures are here, not design):** - `shareImage` must be a raster file (PNG/JPG) with a real extension — social crawlers ignore SVG/WebP - Platforms cache cards by URL forever: if re-generating a card for an already-shared post, bump the filename (e.g. `share-v2.png`) - JPEG for photos, PNG for text cards; never rely on transparency; keep under a few hundred KB - `featureImageAlt`/`og:image:alt`: describe the card in plain words — not a verbatim title repeat **Brand tokens** (match existing heroes, e.g. `fp-antipatterns-hero.svg`): - Light bg `#f7f9fc` / dark bg `#172033`; accent bar `rect` 12px `#1a5fb4` at top - Font `Segoe UI, Arial, sans-serif` only; red `#ca3f3f` (+bg `#fde8e8`), green `#17864b` (+bg `#d9f2e4`), muted `#617086` (light) / `#9aa8bf` (dark) - Eyebrow row: `font-size 24`, `font-weight 700`, `letter-spacing 2`, caps, accent color - Footer: `TOPIC · TOPIC · professionaldev.dev`, `font-size 18`, muted **Layout rules** (from research — violations get cropped or ignored): - Safe zone: keep everything critical inside the center ~1000x500; ≥60px from edges (platforms crop unpredictably) - Headline 46–72px so it reads at ~300–400px preview width; max 2–3 text elements; 6–10 words of large text max - One message — billboard, not infographic. If a row needs a label >~35 chars at 22px, shorten it or move the annotation to a separate column (x≥580) - No fake buttons/CTA chrome; high contrast (dark text on light card or white on `#172033`) - Estimate text width ≈ `chars × font-size × 0.55`; check for overlaps before rendering - Keep text ≤10 words and large — Google Discover recommends against *text-heavy* og:images (a performance recommendation, not a ban); the card must still read visually without its text 4. **Render PNG previews** — headless Chrome (works offline, no rsvg/magick needed): ```bash "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \ --headless --disable-gpu --window-size=1200,630 \ --screenshot="<abs>/preview-<name>.png" "file://<abs>/hero-<name>.svg" ``` If the SVG ever uses web fonts, wait for `document.fonts.ready` before screenshot — `load` doesn't cover them (Playwright > Puppeteer if this pipeline ever graduates to a script). **Always `read_file` each PNG to check it visually** — overlaps, clipping, and legibility at ~400px thumbnail width. Fix and re-render before presenting. 5. **Self-check before presenting** (reviewer pass — observable bans, not vibes). For each PNG, verify: nothing critical within 60px of edges; headline ≤10 words and legible at 400px; no fake buttons/CTA chrome; no text overlapping other elements; brand tokens used (accent `#1a5fb4`, site font, footer with `professionaldev.dev`); the card reads visually even without its text. Any failure → fix and re-render *before* the user sees it. 6. **Present previews to the user.** On pick: rename winner to `<slug>-hero.svg` (or post's existing convention), re-render it as `share.png`, delete losing SVGs/previews. 7. **Wire front matter** — if the post isn't a page bundle yet, `git mv post.md post/index.md` first: ```yaml usePageBundles: true featureImage: '<name>-hero.svg' # hero shown atop the post featureImageAlt: '<what the card literally shows>' shareImage: 'share.png' # PNG — social crawlers ignore SVG/WebP ``` 8. **Verify** on `localhost:1313` — post serves 200 and the hero renders. Optionally sanity-check the card with a link-preview debugger (Facebook Debugger, LinkedIn Post Inspector) before the post is shared — crawlers cache the first fetch. Do not commit unless asked.

{ "prompt": "# Cover image for a post\r\n\r\nUsage: `/cover-image <post>` — `<post>` is a directory or slug under `content/post/` (e.g. `cover-image teen_mistakes`).\r\n\r\nProduces 2–3 candidate cards as SVG + rendered PNG previews; the user picks one. Distilled from OG-image CTR research — do not skip the read-first steps.\r\n\r\n## Steps\r\n\r\n1. **Read the post fully** (title, description, hook, conclusion). Find the *punchline*: the most surprising number, the strongest quote, or the core mechanism/takeaway. The card sells the click — do NOT just repeat the H1 on a colored background.\r\n\r\n2. **Pick a concept type** (in priority order — the first that fits the content):\r\n - **Proof card** — the surprising number / before-vs-after / benchmark shape (best for measured posts; numbers get clicked)\r\n - **Quote card** — bold typography + attribution badge (interviews, opinions, quotable one-liners)\r\n - **Visual metaphor** — the article's mechanism compressed into one glance (pipeline, split bar, ✗/✓ list)\r\n - **Title card** — fallback only: eyebrow tag + shortened title + one-line hook\r\n\r\n3. **Draft 2–3 SVG variants** at `1200x630` in the post's page bundle. Each variant must differ in *perspective*, not just colors/layout — assign each a distinct creative angle, e.g. the reader's-pain angle, the authority/credibility angle, the mechanism angle (persona-based variation is what actually diversifies an idea pool; restyling the same concept does not). For posts about a *person*, prefer a variant with their real public headshot — faces outperform every other focal point (crop tight, expressive beats neutral). If the user rejects the first set, run a **reseed burst**: list the rejected concepts as one-line mechanisms and generate only directions not yet proposed.\r\n\r\n **Serving rules (from RESEARCH-cover-image.md — most card failures are here, not design):**\r\n - `shareImage` must be a raster file (PNG/JPG) with a real extension — social crawlers ignore SVG/WebP\r\n - Platforms cache cards by URL forever: if re-generating a card for an already-shared post, bump the filename (e.g. `share-v2.png`)\r\n - JPEG for photos, PNG for text cards; never rely on transparency; keep under a few hundred KB\r\n - `featureImageAlt`/`og:image:alt`: describe the card in plain words — not a verbatim title repeat\r\n\r\n **Brand tokens** (match existing heroes, e.g. `fp-antipatterns-hero.svg`):\r\n - Light bg `#f7f9fc` / dark bg `#172033`; accent bar `rect` 12px `#1a5fb4` at top\r\n - Font `Segoe UI, Arial, sans-serif` only; red `#ca3f3f` (+bg `#fde8e8`), green `#17864b` (+bg `#d9f2e4`), muted `#617086` (light) / `#9aa8bf` (dark)\r\n - Eyebrow row: `font-size 24`, `font-weight 700`, `letter-spacing 2`, caps, accent color\r\n - Footer: `TOPIC · TOPIC · professionaldev.dev`, `font-size 18`, muted\r\n\r\n **Layout rules** (from research — violations get cropped or ignored):\r\n - Safe zone: keep everything critical inside the center ~1000x500; ≥60px from edges (platforms crop unpredictably)\r\n - Headline 46–72px so it reads at ~300–400px preview width; max 2–3 text elements; 6–10 words of large text max\r\n - One message — billboard, not infographic. If a row needs a label >~35 chars at 22px, shorten it or move the annotation to a separate column (x≥580)\r\n - No fake buttons/CTA chrome; high contrast (dark text on light card or white on `#172033`)\r\n - Estimate text width ≈ `chars × font-size × 0.55`; check for overlaps before rendering\r\n - Keep text ≤10 words and large — Google Discover recommends against *text-heavy* og:images (a performance recommendation, not a ban); the card must still read visually without its text\r\n\r\n4. **Render PNG previews** — headless Chrome (works offline, no rsvg/magick needed):\r\n ```bash\r\n \"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome\" \\\r\n --headless --disable-gpu --window-size=1200,630 \\\r\n --screenshot=\"<abs>/preview-<name>.png\" \"file://<abs>/hero-<name>.svg\"\r\n ```\r\n If the SVG ever uses web fonts, wait for `document.fonts.ready` before screenshot — `load` doesn't cover them (Playwright > Puppeteer if this pipeline ever graduates to a script). **Always `read_file` each PNG to check it visually** — overlaps, clipping, and legibility at ~400px thumbnail width. Fix and re-render before presenting.\r\n\r\n5. **Self-check before presenting** (reviewer pass — observable bans, not vibes). For each PNG, verify: nothing critical within 60px of edges; headline ≤10 words and legible at 400px; no fake buttons/CTA chrome; no text overlapping other elements; brand tokens used (accent `#1a5fb4`, site font, footer with `professionaldev.dev`); the card reads visually even without its text. Any failure → fix and re-render *before* the user sees it.\r\n\r\n6. **Present previews to the user.** On pick: rename winner to `<slug>-hero.svg` (or post's existing convention), re-render it as `share.png`, delete losing SVGs/previews.\r\n\r\n7. **Wire front matter** — if the post isn't a page bundle yet, `git mv post.md post/index.md` first:\r\n ```yaml\r\n usePageBundles: true\r\n featureImage: '<name>-hero.svg' # hero shown atop the post\r\n featureImageAlt: '<what the card literally shows>'\r\n shareImage: 'share.png' # PNG — social crawlers ignore SVG/WebP\r\n ```\r\n\r\n8. **Verify** on `localhost:1313` — post serves 200 and the hero renders. Optionally sanity-check the card with a link-preview debugger (Facebook Debugger, LinkedIn Post Inspector) before the post is shared — crawlers cache the first fetch. Do not commit unless asked.", "variables": [], "notes": "Design a branded cover image (featureImage hero + share.png) for a post", "metadata": { "source": { "provider": "github-windsurf-workflows", "repository": "https://github.com/mmarko88/mmarko88.github.io", "path": ".windsurf/workflows/cover-image.md", "ref": "b5193c0eb497a892eecae9c1fdf668e8129dff16", "url": "https://github.com/mmarko88/mmarko88.github.io/blob/b5193c0eb497a892eecae9c1fdf668e8129dff16/.windsurf/workflows/cover-image.md", "key": "mmarko88/mmarko88.github.io/.windsurf/workflows/cover-image.md" } } }

cover-image

About

Cover image for a post

Steps

Install cover-image and it becomes one more candidate the router can pick - when it fits.

What it costs to adopt - in engineering time.

One base URL

No vendor lock-in

Failover built in

Use it

Manifest

Reviews