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

Ready to run

npx skills add https://github.com/MrSuttonmann/flightjar --skill screenshots-mrsuttonmann

💬 Prompt for ChatGPT / Claude Chat▼

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.