원클릭으로 Manus에서 모든 스킬 실행

capture-banners

스타90

포크3

업데이트2026년 5월 3일 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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

nguyenyou

nguyenyou/scalex

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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.

이 저장소의 다른 Skills

같은 저장소

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.