Run any Skill in Manus with one click

capture-banners

Stars90

Forks3

UpdatedMay 3, 2026 at 05:14

Re-render Scalex banner and OG image PNGs from their HTML source files using Chrome DevTools MCP. Use this skill whenever banner HTML files are edited (slogan changes, color tweaks, layout changes) and the corresponding PNGs need to be regenerated. Triggers on "capture banners", "update banner images", "re-render banners", "regenerate PNGs", or after any edit to files in site/*-banner*.html or site/og-banner*.html.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

nguyenyou

nguyenyou/scalex

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name

capture-banners

description

Capture Banners

The Scalex project has 4 banner images that are rendered from HTML source files. When the HTML is edited, the PNGs must be re-captured to stay in sync.

Banner inventory

HTML source	PNG output	Purpose
`site/readme-banner-dark.html`	`site/readme-banner-dark.png`	GitHub README banner (dark mode)
`site/readme-banner-light.html`	`site/readme-banner-light.png`	GitHub README banner (light mode)
`site/og-banner.html`	`site/og-banner.png`	OpenGraph social preview (dark)
`site/og-banner-light.html`	`site/og-banner-light.png`	OpenGraph social preview (light)

Required viewport size

All banners are designed at 1200 x 630 pixels. The HTML <body> is hardcoded to this size. The Chrome DevTools viewport must match exactly, otherwise the screenshot will crop or include extra whitespace.

Capture procedure

Use Chrome DevTools MCP tools. For each banner:

Open or navigate to the HTML file using a file:// URL:

file:///absolute/path/to/scalex/site/readme-banner-dark.html

Resize the viewport to 1200x630:

mcp__chrome-devtools__resize_page(width=1200, height=630)

Take a screenshot and save directly to the PNG path:

mcp__chrome-devtools__take_screenshot(
  filePath="site/readme-banner-dark.png",
  format="png"
)

Repeat for the remaining 3 banners. You can reuse the same tab by navigating to the next HTML file.

Notes

The Kestrel mascot image (Kestrel.png) is referenced by relative path in the HTML, so the file:// URL must point to the site/ directory for it to render.
After capturing, the PNGs are ready to commit — no post-processing needed.
If the images look wrong (missing mascot, broken layout), check that the HTML references are correct relative to the site/ directory.

More from this repository

same repository

scalex

nguyenyou/scalex

Scala/Java code intelligence CLI for Scala 2/3 and Java codebases. Find definitions, implementations, usages, imports, members, scaladoc, codebase overview, package API surface, files, annotated symbols, file contents. Render directed graphs as ASCII/Unicode art and parse diagrams. Triggers: "where is X defined", "who implements Y", "find usages of Z", "what methods does X have", "show source of X", "inheritance tree", "explain this type", "what changed since commit", "find types extending X with method Y", "what does this package export", or before renaming. Test navigation: "what tests exist", "is X tested". Use proactively exploring unfamiliar Scala code. Supports fuzzy camelCase search. Prefer scalex over grep/glob for Scala symbol lookups. The graph command (ASCII/Unicode art rendering) should only be used when the user explicitly asks to draw, render, or visualize a graph/diagram — never run it automatically as part of other workflows.

2026-06-0190

benchmark

nguyenyou/scalex

Run scalex performance benchmarks, profiling, and timing analysis. Use this skill whenever the user asks to benchmark scalex, measure performance, profile index/query times, compare before/after performance of a change, investigate bottlenecks, or mentions "benchmark", "perf", "how fast", "timing", "hyperfine", "profile", "flame graph", "profiling", "--timings", "slow", "bottleneck", "regression", "memory", "heap", "GC", "allocation". Also use proactively after implementing performance improvements to verify gains. Covers 6 layers: built-in --timings, hyperfine benchmarks, async-profiler flame graphs, JFR recording, microbenchmarks, and memory profiling.

name

capture-banners

description

Capture Banners

The Scalex project has 4 banner images that are rendered from HTML source files. When the HTML is edited, the PNGs must be re-captured to stay in sync.

Banner inventory

HTML source	PNG output	Purpose
`site/readme-banner-dark.html`	`site/readme-banner-dark.png`	GitHub README banner (dark mode)
`site/readme-banner-light.html`	`site/readme-banner-light.png`	GitHub README banner (light mode)
`site/og-banner.html`	`site/og-banner.png`	OpenGraph social preview (dark)
`site/og-banner-light.html`	`site/og-banner-light.png`	OpenGraph social preview (light)

Required viewport size

Capture procedure

Use Chrome DevTools MCP tools. For each banner:

Open or navigate to the HTML file using a file:// URL:

file:///absolute/path/to/scalex/site/readme-banner-dark.html

Resize the viewport to 1200x630:

mcp__chrome-devtools__resize_page(width=1200, height=630)

Take a screenshot and save directly to the PNG path:

mcp__chrome-devtools__take_screenshot(
  filePath="site/readme-banner-dark.png",
  format="png"
)

Repeat for the remaining 3 banners. You can reuse the same tab by navigating to the next HTML file.

Notes

The Kestrel mascot image (Kestrel.png) is referenced by relative path in the HTML, so the file:// URL must point to the site/ directory for it to render.
After capturing, the PNGs are ready to commit — no post-processing needed.
If the images look wrong (missing mascot, broken layout), check that the HTML references are correct relative to the site/ directory.