Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

capture-banners

Estrelas90

Forks3

Atualizado3 de maio de 2026 às 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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

nguyenyou

nguyenyou/scalex

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·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.

Mais deste repositório

mesmo repositório

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.