skills.rest
nguyenyou
nguyenyouCOMMUNITY
Explore all skills by this author →
𝕏@younguyen95GitHub

capture-banners

Re-render banner and OpenGraph PNGs from HTML sources using Chrome DevTools MCP.

93|3|Updated Mar 13, 2026
Search Tags:#automation#png#chrome-devtools#render#og-image#banners
One-click install
npx skills add https://github.com/nguyenyou/scalex --skill capture-banners
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: capture-banners
Source: https://github.com/nguyenyou/scalex/tree/main/.claude/skills/capture-banners
Command: npx skills add https://github.com/nguyenyou/scalex --skill capture-banners

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Re-render Scalex banner and OG image PNGs to stay in sync with updated HTML sources, ensuring consistent previews and branding across the site.

Core Features & Use Cases

  • Rebuilds four banner PNGs from their corresponding HTML sources using Chrome DevTools MCP.
  • Keeps light/dark variants and OpenGraph images in sync after edits to HTML banners.
  • Use case: after changing site/readme-banner-dark.html, regenerate the PNG assets to reflect the new design.

Quick Start

Run the capture process to re-render all banner PNGs from their updated HTML sources.

Frequently Asked Questions about capture-banners

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I regenerate banner PNGs from HTML after updating my site design?▼

Regenerate banner PNGs from HTML by re-rendering the updated source files using Chrome DevTools MCP. This captures the new design from your site HTML files and outputs fresh PNG assets.

Can I generate OpenGraph images at 1200x630 from HTML sources?▼

Yes, you can generate OpenGraph images by capturing HTML sources at a 1200x630 viewport setting. Chrome DevTools MCP renders the HTML and exports the result as an OG PNG asset.

How do I keep OpenGraph images in sync with light and dark mode HTML changes?▼

Keep OpenGraph images in sync by re-rendering both light and dark banner variants after editing the corresponding HTML files. The capture process updates all four PNG assets to match the latest HTML design.

What do I need to capture OG images from HTML using Chrome DevTools MCP?▼

You need control of your site HTML files in the site directory, the Chrome DevTools MCP workflow configured, and correct viewport settings set to 1200x630 to capture OG images from HTML.

Why are my regenerated banner PNGs not reflecting HTML updates?▼

Banner PNGs may not reflect HTML updates if the viewport settings are incorrect or the HTML files in the site directory were not saved before running the Chrome DevTools MCP capture process.

When do I need to re-render banner and OG image PNGs?▼

Re-render banner and OG image PNGs whenever you change site HTML files like site/readme-banner-dark.html. This ensures consistent previews and branding across the site after design updates.

Related Skills

Explore More Design & Creative Skills→
aresbitaresbit
46

frontend-slides

Convert PowerPoint files into zero-dependency HTML slide decks.

Community
Advanced
diShine-digital-agencydiShine-digital-agency
1

shine-meta-check

Audit a web page for SEO-critical meta tags and report fixes.

Community
Intermediate
akornmeierakornmeier
4

chrome-debug

Debug browser UI issues with Chrome DevTools MCP in headless mode.

Community
Advanced
zengbaochengzengbaocheng

html-screenshot-image-gen

Generate infographic-style PNG images from HTML templates via browser screenshots.

Community
Intermediate