skills.rest
MrSuttonmann
MrSuttonmannCOMMUNITY
Explore all skills by this author →
GitHub

screenshots

Regenerate README UI screenshots for desktop and mobile views.

55|1|Updated Apr 18, 2026
Search Tags:#automation#documentation#screenshots#playwright#ui-regression#backend-mock
One-click install
npx skills add https://github.com/MrSuttonmann/flightjar --skill screenshots-mrsuttonmann
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshots
Source: https://github.com/MrSuttonmann/flightjar/tree/main/.claude/skills/screenshots
Command: npx skills add https://github.com/MrSuttonmann/flightjar --skill screenshots-mrsuttonmann

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool automates regenerating the README UI screenshots to reflect the latest design changes, ensuring documentation stays up-to-date with the product's visuals.

Core Features & Use Cases

  • Automated screenshot regeneration: runs a dedicated script to capture desktop and mobile views from a locally hosted backend.
  • Offline-friendly with mocked endpoints: uses a harness that mocks API responses to produce realistic yet reproducible results for documentation.
  • Design-review ready: ideal during UI updates, regressions checks, and whenever the UI is modified.

Quick Start

Run the take_screenshots.js script against a freshly started backend to regenerate the PNGs under docs/screenshots.

Frequently Asked Questions about screenshots

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate README screenshot regeneration for UI changes?▼

Automated README screenshot regeneration runs a dedicated script to capture desktop and mobile views from a locally hosted backend, ensuring documentation stays aligned with the latest design updates.

How do mocked endpoints help produce consistent UI screenshots offline?▼

Mocked endpoints intercept API responses during the screenshot capture process, producing realistic yet reproducible documentation results without relying on live external services.

Can I use Playwright for UI regression checks and documentation screenshots?▼

Playwright can drive UI regression checks by running the take_screenshots.js script against a local backend harness, capturing updated desktop and mobile views for documentation.

What is needed to run offline screenshot generation for design reviews?▼

Offline screenshot generation requires a local backend harness, the take_screenshots.js script, and mocked endpoints to capture reproducible desktop and mobile UI views.

When should I regenerate README screenshots using an automated script?▼

You should regenerate README screenshots whenever UI modifications occur, including design changes, mobile view updates, and regression checks, to keep documentation visually current.

Related Skills

Explore More Software Engineering Skills→
whd4whd4

setup-gbrain

Install the gbrain CLI and initialize a local PG Lite or Supabase brain on macOS.

Community
Advanced
binfen1binfen1

document-release

Update project docs and CHANGELOG after PR merges.

Community
Advanced
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate
miglettomigletto

vela-live-render

Render and validate Vela slide decks offline without external CDNs.

Community
Advanced