og-generation

name	og-generation
description	Regenerate the landing site's OG/social card (web/landing/public/og.webp) by rendering a temporary in-app route with the real hero WebGL aurora and screenshotting it with headless Chrome. Invoke when the user says 'regenerate the og image', 'update the og card', 'change the og screenshot/copy', '重新生成 og 图', or edits any copy/screenshot that appears on the social card.

OG Card Generation

The OG image is NOT hand-drawn or CSS-faked: it is a screenshot of a temporary Next.js route that reuses the site's real components (HeroGradient WebGL aurora + grain overlay + AgentIcon), so the card always matches the live hero. The canonical card source lives in this skill at assets/og-card-page.tsx.

Workflow

All paths below are relative to web/landing/.

1. Restore the temp route from the skill asset:

   mkdir -p src/app/og-card
   cp <skill-dir>/assets/og-card-page.tsx src/app/og-card/page.tsx
   

2. Apply the requested changes (copy, screenshot, layout) to src/app/og-card/page.tsx. Current design decisions — keep them unless the user overrides:

   • Wordmark is capitalized "Termio" (matches the nav Logo component).
   • Headline slogan has no trailing period.
   • Subline: "Terminal-first Agentic Development Environment, built for AI builders."
   • Agent row uses real AgentIcon icons; sizes are tuned (30px text / 34px icons / 30px gap) so all six agents fit on ONE row inside the 1080px left column — if you add an agent or grow the sizes, re-check that Kimi/Pi don't clip under the screenshot or wrap to a lonely second line.
   • Screenshot window: public/screenshots/hero1.png at left 1240 / top 150 / width 1560, 28px radius, white/0.18 border.
   • The page includes nextjs-portal { display: none } — this hides the Next dev-tools badge, which otherwise ships in the capture. Don't remove it.

3. Find the landing dev server port — do NOT assume 3000. Port 3000 is often a different project (you'll get a foreign 404 page). Trick: attempt to start a server; if one is already running for this directory, Next refuses and prints the existing server's port:

   npx next dev -p 3210   # either becomes the server, or prints
                          # "Another next dev server is already running.
                          #  - Local: http://localhost:3001"
   

   Verify with curl -s localhost:<port>/og-card returning 200 (and kill the server afterwards if you started it yourself).

4. Screenshot with headless Chrome (WebGL needs the swiftshader flag; virtual time budget lets hydration + the shader's first frame land):

   "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
     --headless=new --enable-unsafe-swiftshader \
     --screenshot=/tmp/og-card/og.png --window-size=2400,1260 \
     --hide-scrollbars --force-device-scale-factor=1 \
     --virtual-time-budget=15000 http://localhost:<port>/og-card
   

5. Visually inspect /tmp/og-card/og.png (Read tool) before shipping — check for the dev badge, clipped/wrapped agent row, stale screenshot, typos.

6. Ship + clean up (the route must never be deployed):

   magick /tmp/og-card/og.png -quality 88 public/og.webp
   cp src/app/og-card/page.tsx <skill-dir>/assets/og-card-page.tsx  # persist edits
   rm -rf src/app/og-card
   curl -s -o /dev/null -w "%{http_code}" http://localhost:<port>/og-card  # expect 404
   

7. Sync metadata: og.webp is referenced from src/app/layout.tsx (openGraph.images + twitter.images, 2400×1260). If the embedded screenshot or its content changed, update the alt text there to describe what's actually shown.

Notes

• Keep the copy consistent with the hero section (sections/hero.tsx) — the card's headline/tagline should track it when the hero copy changes.
• OG rendition is 2400×1260 (2× of the 1200×630 OG standard, 1.9:1).
• Social platforms cache OG images by URL; after deploying, old shares may show the previous card until their cache expires. Remind the user.