New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Release Screenshots

by chmonitor in chmonitor/chmonitor

Capture, pick, and design the screenshots for a chmonitor release: blog release posts, the landing changelog, What's new, and social posts.

GPL-3.0Auto-check passedWriting & Content

Install Release Screenshots

skills CLI
$ npx skills add chmonitor/chmonitor --skill release-screenshots -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install chmonitor/chmonitor release-screenshots --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/chmonitor/chmonitor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/release-screenshots .claude/skills/release-screenshots && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
release-screenshots
GitHub stars
298
Token cost
~1.7k tokens
SKILL.md length
901 words
Files
8 (incl. assets)
Skills in repo
53
Repo updated
First seen
Licence
GPL-3.0

At a glance

Capture, pick, and design the screenshots for a chmonitor release: blog release posts, the landing changelog, What's new, and social posts.

  • Works in 6 steps: Capture → Privacy check (hard gate) → Pick → …
  • Tasks that involve Social media graphics
  • SKILL.md covers 1. Capture, 2. Privacy check (hard gate), 3. Pick and 4. Write the spec, plus 4 more sections
  • Runs JavaScript scripts from its folder; calls bun

What it does

Release Screenshots is an agent skill from chmonitor/chmonitor. Capture, pick, and design the screenshots for a chmonitor release: blog release posts, the landing changelog, What's new, and social posts. Covers capturing the dashboard at 2x, the privacy check every image must pass, choosing one idea per image, cropping, and rendering branded frames (headline, before/after split, zoomed callouts) to WebP with the bundled frame.html + render.mjs. Triggers: "release images", "release screenshots", "blog post images", "screenshot for the changelog", "social image", "cover image"…

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including assets (for example `examples/v0.3.6.json`).

It sits in Writing & Content, covering Social media graphics, Blog and article writing and Social media posts. The repository describes itself as: Open-source operational advisor for ClickHouse — real-time monitoring plus AI-driven index/partition/materialized-view recommendations. The licence is GPL-3.0.

When your agent uses it

  • Tasks that involve Social media graphics
  • Tasks that involve Blog and article writing
  • Tasks that involve Social media posts

Example prompts

  • “release images”
  • “release screenshots”
  • “blog post images”
  • “/release-screenshots”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Capture
  2. Privacy check (hard gate)
  3. Pick
  4. Write the spec
  5. Render
  6. Review before shipping

What it can do on your machine

Read from SKILL.md and the folder at commit fc39ef0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • bun

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Release Screenshots loads about 1.7k tokens when it runs. Until then it costs about 162 tokens; SKILL.md has 901 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~162
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from chmonitor/chmonitor at commit fc39ef0, republished under its GPL-3.0 licence (© chmonitor). 901 words, ~1,739 tokens.

Download SKILL.mdSave it as .claude/skills/release-screenshots/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
release-screenshots
description
Capture, pick, and design the screenshots for a chmonitor release: blog release posts, the landing changelog, What's new, and social posts. Covers capturing the dashboard at 2x, the privacy check every image must pass, choosing one idea per image, cropping, and rendering branded frames (headline, before/after split, zoomed callouts) to WebP with the bundled frame.html + render.mjs. Triggers: "release images", "release screenshots", "blog post images", "screenshot for the changelog", "social image", "cover image", "before and after", "make the screenshots look professional", "crop and decorate", "redesign the screenshots".

Release screenshots

A release image has one job: show one change so a reader gets it in two seconds. Raw full-screen captures fail that job — the change is a small part of a busy page. This skill turns captures into framed images: a short headline, the screenshot cropped to the part that matters, and at most one zoomed callout. Backing doc: docs/knowledge/release-screenshots.md.

1. Capture

  • Capture the real product, never a mockup. Use agent-browser at 1920x1080 with DPR 2 (3840x2160 PNG), light theme by default, plus a dark capture of Overview for the cover:

    sh
    agent-browser set viewport 1920 1080 2
agent-browser open "<dashboard>/overview?host=0"
agent-browser wait --load networkidle
agent-browser screenshot capture/raw/new-overview.png

  • For before/after, capture both versions on the same page, same viewport, same theme, so only the change differs.

  • Close toasts, popovers, and dev overlays first — unless the popover is the feature (for example the More flyout).

  • Keep captures next to the release's other launch assets (for example launch/vX.Y.Z/capture/raw/), outside the repo. Only finished images go in the repo.

2. Privacy check (hard gate)

Open every capture at full size and reject it if it shows any of:

  • Hostnames, service DNS names, IPs, or connection strings (DDL with HOST '…', SOURCE(POSTGRESQL(…)), URLs in settings).
  • Real database, table, user, or customer names from a production workload.
  • Emails, API keys, tokens, or real people's names.

Generic names are fine (clickhouse-0, system.query_log, Guest). If a capture fails, re-capture against the demo host or crop the region out — do not blur. Blurred text still reads as "we hid something". For example, the v0.3.6 Schema Compare and TTL captures showed real Postgres service hosts and workload table names, so they were left out.

3. Pick

  • One idea per image. If you cannot write its headline in 6 words, it is two images or none.
  • 4–6 images per post. Lead with the change a returning user notices first.
  • Prefer a before/after split when the release changes something users already know. Prefer a single window with a callout for new features.
  • The cover is dark, shows the main screen, and carries the release headline.

4. Write the spec

One JSON array per release. Paths are relative to the spec file. Coordinates are source pixels (a 3840x2160 capture is 2x the CSS layout).

FieldUse
nameOutput file name (<name>.webp)
themelight (default) or dark
eyebrowShort section label, shown uppercase in orange
titleHeadline, 6 words or fewer
subOne sentence, optional
verVersion pill next to the logo, optional (cover only)
src, cropCapture and {x,y,w,h} region for a single window
calloutsOptional [{x,y,w,h, zoom, at:{x,y}, label}]: ring the source region and show it magnified at canvas point at
bgPhoto backdrop (path relative to the spec). Use assets/backgrounds/meadow-hill.jpg by default; this is the house style
bgPosCSS background-position for the photo (for example 50% 70%), so a set of images does not repeat the same crop
layout: "split" + panesBefore/after: [{label, src, crop}, …]; label takes HTML, wrap the keyword in <b>

Crop rules:

  • Single window: crop aspect about 1.94:1 (for example 2400x1236) fills the window width. Let the window run off the bottom edge.
  • Split pane: crop aspect about 1.21:1 (for example 1700x1400), the same crop on both panes.
  • Callouts: one per image, on a control 2–4x smaller than the window. Place at over quiet content (empty space, a chart body), never over the headline.

examples/v0.3.6.json is a complete spec for a real release.

Show full SKILL.md (351 more words)Show less

Style: photo backdrop (default)

Release images use a real photo behind the app window (bg), not a generated grid or glow. With bg set, the frame switches to the photo style: plain sentence-case eyebrow, a dark headline over the sky, the version as plain text next to the logo, the window resting on the meadow with a soft natural shadow, and white callouts. Avoid the generic tells: grid backdrops, orange glows, mono uppercase labels with rules, outlined pills, neon rings.

Backgrounds in assets/backgrounds/ (from the maintainer's own image library, downscaled to 2400px):

  • meadow-hill.jpg — sky over a grassy hill with flowers. Default for every image.
  • meadow-lake.jpg — painted meadow and lake. Busier at the edges; use sparingly.

The headline sits on the sky, so it needs a light, low-detail top third. A deep saturated sky makes dark text unreadable — check contrast before adding a new background. Without bg, the frame falls back to the older grid style.

5. Render

sh
bun .claude/skills/release-screenshots/render.mjs <spec.json> apps/blog/public/posts/vX.Y.Z

Each run uses its own agent-browser session (RELEASE_SHOTS_SESSION, default per process), so several releases can render in parallel. Each image comes out 2000x1250 WebP, about 130–180 KB with a photo backdrop. Run it with bun: node may be a lazy-load shell function on dev machines, which execFileSync cannot call. Needs agent-browser, cwebp, and sips (macOS).

6. Review before shipping

Look at every output at full size and check:

  • Each image passes the privacy check, including inside callouts.
  • Each file is distinct (md5 -q *.webp | sort -u | wc -l equals the shot count).
  • The headline and the screenshot say the same thing.
  • Callouts sit over quiet content and do not cover the thing they explain.
  • Version strings keep their case (v0.3.6, not V0.3.6).

In the post, use width="2000" height="1250", a descriptive alt, and set the cover as the post's cover: frontmatter.

Gotchas

  • frame.html must not declare a global named top, name, status, or similar window properties: in a classic script const top throws, nothing renders, and render.mjs waits until it times out.
  • agent-browser does not reload when only the URL hash changes. render.mjs adds ?shot=<name> to every open so each shot gets a fresh page.

© chmonitor, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (assets) in .claude/skills/release-screenshots of chmonitor/chmonitor.

  • SKILL.md
  • assets/backgrounds/meadow-hill.jpg
  • assets/backgrounds/meadow-lake.jpg
  • assets/geist-latin.woff2
  • assets/geist-mono-latin-500.woff2
  • examples/v0.3.6.json
  • frame.html
  • render.mjs

Open the folder on GitHubat commit fc39ef0

Compare with similar skills

Release Screenshots next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Release Screenshots compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Release Screenshots this skillchmonitor/chmonitor298—~1.7kAutomated safety check: PassGPL-3.0
Social Media Managementmanojbajaj95/claude-gtm-plugin1041 repos~3.9kAutomated safety check: PassMIT
Release Announcementpaperclipai/paperclip98k—~1.7kAutomated safety check: PassMIT
SepiaNanako0129/sepia3k—~3.6kAutomated safety check: PassMIT
Changelog Social RecapFlorianBruniaux/claude-code-ultimate-guide6.1k—~1.8kAutomated safety check: NotesCC-BY-SA-4.0
Blogtheopenco/llmgateway1.7k—~2.2kAutomated safety check: PassCustom licence

Similar skills

  • Social Media Management

    manojbajaj95/claude-gtm-plugin

    Comprehensive social media management for all platforms (LinkedIn, Twitter/X, Instagram, TikTok, Facebook, Pinterest, YouTube).

    104 GitHub starsUsed in 1 repo~3.9k tokens
    Writing & ContentAuto-check passed

  • Release Announcement

    paperclipai/paperclip

    Write a release announcement — changelog, blog post, in-app note, or social post — that leads with user impact, names the audience, and includes upgrade/migration steps without filler.

    98k GitHub stars~1.7k tokensUpdated today
    DevelopmentAuto-check passed

  • Sepia

    Nanako0129/sepia

    Make AI-generated writing read as human-written, in fiction and in professional prose.

    3k GitHub stars~3.6k tokensUpdated yesterday
    Writing & ContentAuto-check passed

  • Changelog Social Recap

    FlorianBruniaux/claude-code-ultimate-guide

    Turns CHANGELOG.md entries for a release or a week into LinkedIn, Twitter/X, newsletter and Slack posts in French and English.

    6.1k GitHub stars~1.8k tokensUpdated yesterday
    Writing & ContentAuto-check: notes

  • Blog

    theopenco/llmgateway

    Write and validate an LLM Gateway marketing blog post in the repository's current house style, including structured frontmatter and a gpt-image-2 OpenGraph image.

    1.7k GitHub stars~2.2k tokensUpdated today
    Writing & ContentAuto-check passed

  • Release Post

    quarto-dev/quarto-r

    Create professional package release blog posts following Tidyverse or Shiny blog conventions.

    160 GitHub starsUsed in 1 repo~2.5k tokens
    Writing & ContentAuto-check passed

More from chmonitor/chmonitor

All 53 skills in this repo

  • Hyperframes Creative

    chmonitor/chmonitor

    Non-animation creative direction for HyperFrames videos. An agent skill from chmonitor/chmonitor.

    298 GitHub starsUsed in 5 repos~1.3k tokens
    Auto-check passed

  • Hyperframes Media

    chmonitor/chmonitor

    Audio and media assets for HyperFrames compositions, produced by one shared audio engine (scripts/audio.mjs) — multi-provider TTS (HeyGen / ElevenLabs / Kokoro local), background music + sound…

    298 GitHub starsUsed in 1 repo~2.8k tokens
    Auto-check: notes

  • Remotion To Hyperframes

    chmonitor/chmonitor

    Port an existing Remotion (React) composition to HyperFrames HTML.

    298 GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

  • Music To Video

    chmonitor/chmonitor

    A skill your agent uses when the user has a music track (an audio file, or a video to pull audio from) and wants a beat-synced HyperFrames video, calm to hard-hitting.

    298 GitHub starsUsed in 1 repo~4k tokens
    Auto-check: notes

  • Hyperframes Animation

    chmonitor/chmonitor

    All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus…

    298 GitHub starsUsed in 2 repos~1.8k tokens
    Auto-check passed

  • Faceless Explainer

    chmonitor/chmonitor

    turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video, up to ~3 min (sweet spot 30-90s), where every visual is invented (typography, abstract graphics…

    298 GitHub stars~4.5k tokensUpdated yesterday
    Auto-check: notes

Categories

Questions about Release Screenshots

What does Release Screenshots do?

Capture, pick, and design the screenshots for a chmonitor release: blog release posts, the landing changelog, What's new, and social posts. Release Screenshots is an agent skill from chmonitor/chmonitor. Capture, pick, and design the screenshots for a chmonitor release: blog release posts, the landing changelog, What's new, and social posts.

When should I use Release Screenshots?

Release Screenshots fits situations like: tasks that involve Social media graphics; tasks that involve Blog and article writing; tasks that involve Social media posts.

How do I install Release Screenshots in Claude Code?

Run `npx skills add chmonitor/chmonitor --skill release-screenshots -a claude-code`. Or copy the skill folder (.claude/skills/release-screenshots in chmonitor/chmonitor) into .claude/skills/release-screenshots in your project. Claude Code loads it when a task matches its description.

How do I install Release Screenshots in Codex?

Run `npx skills add chmonitor/chmonitor --skill release-screenshots -a codex`. Or copy the skill folder (.claude/skills/release-screenshots in chmonitor/chmonitor) into .agents/skills/release-screenshots in your project. Codex loads it when a task matches its description.

Can I use Release Screenshots in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add chmonitor/chmonitor --skill release-screenshots -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/release-screenshots, .gemini/skills/release-screenshots, .github/skills/release-screenshots and .opencode/skills/release-screenshots in your project.

What does Release Screenshots need to run?

Going by SKILL.md and its folder, Release Screenshots needs JavaScript for the scripts in its folder and the command-line tools its instructions call (bun). Our summary lists: Node.js.

Does Release Screenshots access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Release Screenshots safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Release Screenshots use?

Release Screenshots is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Release Screenshots use?

About 1.7k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Release Screenshots?

Skills that share tags, products or a category with Release Screenshots: Social Media Management (manojbajaj95/claude-gtm-plugin, 104 stars), Release Announcement (paperclipai/paperclip, 98k stars), Sepia (Nanako0129/sepia, 3k stars) and Changelog Social Recap (FlorianBruniaux/claude-code-ultimate-guide, 6.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Release Screenshots?

chmonitor (a GitHub organization) maintains it in chmonitor/chmonitor, which has 298 GitHub stars. The repository holds 53 skills in this directory. The repository was last updated on October 5, 2026.

Source: chmonitor/chmonitor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.