Automated summary

Renders generated HTML pages or figures in headless Chrome, captures a screenshot, and inspects it visually to catch layout, scaling, and font problems that text-level checks miss.

Strengths

Pairs the headless-Chrome screenshot with an actual visual review, surfacing overlapping curves, clipped labels, and unloaded fonts that grep cannot see.
Serves the page over local HTTP so fetch()-driven scripts actually execute.
Names the concrete classes of visual bugs to look for, each with its fix (e.g. plot the difference on its own scale).
Includes a post-publish check of the live URL and its assets (200s plus key strings) and a word-count pass to flag duplicated content.

Limitations

Requires google-chrome to be installed and a model that can read the screenshot to judge it.
No automated diffing or pass/fail threshold — the verdict stays visual and subjective.
Checks only two widths (desktop and ~375 px), so other viewports can slip through.

When to use it

Use it after generating or editing any HTML page, chart, or figure and before publishing it.

When not to use it

Skip it for purely textual or code changes with no visual output, or when no browser binary and no image-capable model are available.

Security analysis

Caution

Quality score88/100

The skill uses legitimate local tooling for visual verification and does not contain destructive, exfiltrating, or obfuscated behavior. It is rated caution because it runs a local HTTP server and browser automation via shell commands, with minor operational risks around network binding and process cleanup.

Findings

•No allowed-tools are declared even though the skill instructs the agent to run bash, start a Python HTTP server, and invoke Chrome headless.
•`python3 -m http.server 8899` binds to all interfaces by default, potentially exposing the current site directory to the local network while running; use `--bind 127.0.0.1`.
•`kill %1` depends on shell job-control state and may not reliably terminate the intended server, leaving a background process running.

How this analysis is made

Examples

Check a generated chart page

I just built the revenue chart page at site/revenue.html — can you check the page and tell me if it actually looks right before I publish it?

Desktop and mobile render pass

Render-verify the landing page in headless Chrome at desktop width and again at 375px, then fix anything that's overlapping or clipped.

Post-deploy verification

The report is live at https://example.com/report — fetch it and confirm the key headings and asset URLs return 200, then screenshot it to make sure it renders correctly.

name: render-verify category: debug description: This skill should be used when the user generates HTML pages, figures, or visual artifacts and needs to verify they actually render correctly — "check the page", "does it look right", or after any site/figure build before publishing.

Render-Verify Loop

Name: Render-Verify Loop
Author: Skills Guide Bot

Never ship generated visual output you have not looked at. Text-level checks (grep for a string) catch missing content; only a rendered screenshot catches invisible content — overlapping curves, unreadable scales, broken layout, fonts that didn't load.

The loop

cd <site-dir>
(python3 -m http.server 8899 >/dev/null 2>&1 &)
sleep 1
google-chrome --headless --disable-gpu \
  --window-size=1100,2400 --hide-scrollbars \
  --virtual-time-budget=6000 \
  --screenshot=/tmp/render.png http://localhost:8899/page.html
kill %1

Then look at the image (multimodal read), judge, fix, re-render. Serve over HTTP rather than file:// so fetch()-driven scripts run.

What screenshots catch that grep cannot

Two curves at different magnitudes plotted on one axis → one invisible (fix: plot the difference/offset on its own scale).
A 0.2 mm effect on a 100 mm axis → invisible band.
Template placeholders rendered literally (__VAR__, {name}).
CJK fallback fonts, clipped labels, legend covering data.
Interactive JS silently failing (readout stuck at "–").

Rules

Screenshot at desktop width AND once at ~375 px if the page is public.
For long pages, set window height to cover the section under change; for full-page checks use a tall window rather than scrolling stitches.
After publishing, verify the LIVE URL too: fetch it and assert key strings AND asset URLs return 200 — local success does not imply the deployment picked everything up.
Word-count pass for content pages: strip tags/scripts, count words; a page that doubled in words without new findings is duplicating.
Delete throwaway screenshots after judging; keep only ones that document a decision.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/render-verify-loop-msih95yt/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/render-verify-loop-msih95yt' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/render-verify-loop-msih95yt/download' --output '.skill-downloads/render-verify-loop-msih95yt/SKILL.md.part' && mv '.skill-downloads/render-verify-loop-msih95yt/SKILL.md.part' '.skill-downloads/render-verify-loop-msih95yt/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code

test -f '.skill-downloads/render-verify-loop-msih95yt/SKILL.md' && test -s '.skill-downloads/render-verify-loop-msih95yt/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/render-verify' && cp -R '.skill-downloads/render-verify-loop-msih95yt' '.claude/skills/render-verify'

Cursor

test -f '.skill-downloads/render-verify-loop-msih95yt/SKILL.md' && test -s '.skill-downloads/render-verify-loop-msih95yt/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/render-verify' && cp -R '.skill-downloads/render-verify-loop-msih95yt' '.cursor/skills/render-verify'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation

openskills install './.skill-downloads/render-verify-loop-msih95yt'

openskills read 'render-verify-loop-msih95yt'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/render-verify-loop-msih95yt/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.