Name: ui-screenshots
Rating: 76 (1 reviews)
Author: mock-server

ui-screenshots

Regenerate the MockServer dashboard screenshots used on www.mock-server.com by driving a populated demo dashboard with headless Chromium (Playwright). Use when the dashboard UI has changed and the website screenshots (jekyll-www.mock-server.com/images/MockServer*.png) need refreshing, or when asked to "update the UI screenshots", "regenerate dashboard screenshots", or "take screenshots of the dashboard for the docs". Captures one Retina PNG per tab at the same geometry as the existing images.

Quality

94%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

88%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A strong, highly actionable skill body: executable commands with defaults, explicit validation checkpoints for the batch PNG overwrite, and troubleshooting tied to concrete symptoms. The only weaknesses are mild token cost from inlined reference tables (tab inventory, knobs) in an otherwise appropriately sized overview.

Suggestions

Move the 19-row tab inventory table (tab value → filename mapping) into a references/ file (e.g. TABS.md) and keep only a one-line pointer plus the note about newly added tabs in the body.

Collapse the two knob tables into a single compact table (or a reference file), keeping only the most-used vars (ONLY, OUT_DIR, SKIP_CHARTS) inline with their defaults.

Dimension	Reasoning	Score
Conciseness	Nearly every section carries non-obvious project knowledge (two-phase rationale, nvm node quirk, per-knob defaults) with no padding of concepts Claude already knows. Not a 5: the 19-row tab inventory table and the two knob tables are reference material that pushes token cost past what the overview itself needs.	4 / 5
Actionability	Copy-paste-ready TL;DR commands ("npm run screenshots:all"), executable variations with env-var examples, and per-symptom troubleshooting with concrete fixes (raise CHART_WARMUP_S, absolute nvm node path, SKIP_CHARTS=true) fully cover the common cases.	5 / 5
Workflow Clarity	The two-phase sequence is explicit (demo up → wait for the "Ready — populated demo environment" line → capture → teardown), and the "After capturing" checklist (git status the images dir, open PNGs to sanity-check rendering, commit) plus the Troubleshooting feedback loops provide validation checkpoints — essential since the flow batch-writes 19 PNGs into the live website image directory.	5 / 5
Progressive Disclosure	No bundle files exist, and the single-file body is well-sectioned with a clear overview (TL;DR, How it works) up front. Not a 5: the full tab inventory and complete capture-knob tables are inlined reference material that would be better split into a referenced file; not a 3 because structure and navigation are otherwise clear.	4 / 5
	Total	18 / 20 Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is exemplary: concrete actions, explicit what/when structure, and multiple natural trigger phrases including file-path patterns. It uses third-person imperative voice throughout with no fluff or over-claims.

Dimension	Reasoning	Score
Specificity	"Regenerate the MockServer dashboard screenshots... by driving a populated demo dashboard with headless Chromium (Playwright)" and "Captures one Retina PNG per tab at the same geometry as the existing images" list multiple concrete, comprehensive actions (drive demo, capture per-tab Retina PNGs, match existing geometry) rather than just several with gaps.	5 / 5
Completeness	The first sentence explicitly states what the skill does; the second gives an explicit "Use when..." clause with concrete trigger phrases covering both UI-change and direct-request scenarios. Both what and when are clearly and explicitly answered.	5 / 5
Trigger Term Quality	Includes quoted natural phrases users would say ("update the UI screenshots", "regenerate dashboard screenshots", "take screenshots of the dashboard for the docs") plus condition-based and path-pattern triggers ("dashboard UI has changed", "jekyll-www.mock-server.com/images/MockServer*.png"), giving comprehensive coverage with synonyms.	5 / 5
Distinctiveness Conflict Risk	Niche is unambiguous (MockServer dashboard docs screenshots for www.mock-server.com) with project-specific paths and trigger phrases; it would not naturally fire for generic screenshot or browser-automation requests.	5 / 5
	Total	20 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: mock-server/mockserver-monorepo
Path: .opencode/skills/ui-screenshots/SKILL.md
Commit: f66c975

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.