skills.rest
Generous-Corp
Generous-CorpOFFICIAL
Explore all skills by this author →
GitHub

screenshot-sync

Synchronize project UI screenshots with source code changes via headless capture routines.

13|1|Updated Apr 6, 2026
Search Tags:#automation#testing#ui#documentation#web-development#screenshot
One-click install
npx skills add https://github.com/Generous-Corp/pulp --skill screenshot-sync-generous-corp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshot-sync
Source: https://github.com/Generous-Corp/pulp/tree/main/.agents/skills/screenshot-sync
Command: npx skills add https://github.com/Generous-Corp/pulp --skill screenshot-sync-generous-corp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3, node, playwright-core, and includes scripts (resource) components.

What problem does it solve?

This skill prevents visual drift between a project's UI and its documentation by ensuring that README images, Open Graph previews, and gallery thumbnails are automatically updated whenever the underlying UX code changes.

Core Features & Use Cases

  • Automated Sync Gate: Validates that screenshots are refreshed when UX-related files are modified, failing PRs that contain stale assets.
  • Multi-Route Capture: Supports both native headless rendering for editor shots and browser-based headless capture for web-demo OG images.
  • Use Case: When a design token or UI component is updated in a plugin repository, this skill triggers a re-capture of the editor and demo previews, ensuring the README and social media unfurls always reflect the current state of the product.

Quick Start

Run the screenshot sync check script to report any stale screenshots in the current repository.

Frequently Asked Questions about screenshot-sync

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

FAQPage Schema
How do I keep UI screenshots in sync with code changes automatically?▼

Automated screenshot synchronization orchestrates native and web-based headless capture routines to regenerate README images and Open Graph previews whenever underlying UX code changes, failing pull requests that contain stale assets.

Why do my README images and Open Graph previews show outdated UI after updating design tokens?▼

Visual drift between documentation and code occurs when screenshots are not automatically re-captured after design token or UI component updates. An automated sync gate detects modified UX files and triggers re-capture to prevent stale assets.

How do I fail pull requests that contain stale documentation screenshots?▼

An automated sync gate validates that screenshot assets are refreshed whenever UX-related files are modified, failing pull requests that contain stale assets. Run the screenshot sync check script to report any outdated screenshots in the current repository.

Does screenshot synchronization work with Playwright for headless browser capture?▼

Screenshot synchronization integrates Playwright-core to execute browser-based headless capture for web-demo OG images and capture verification tasks. It supports both native headless rendering for editor shots and web-based headless capture for Open Graph metadata.

What do I need to run automated screenshot capture for repository documentation?▼

Automated screenshot capture requires Python 3.11+, Node, and Playwright-core installed in your environment, plus manifest files in repositories that have opted into the synchronization workflow to maintain README and Open Graph image consistency.

Can I use headless capture routines for both editor screenshots and web demo previews?▼

Multi-route headless capture supports both native headless rendering for editor screenshots and browser-based headless capture for web-demo OG images, ensuring README images, gallery thumbnails, and Open Graph previews consistently reflect the current UI state.

Related Skills

Explore More Software Engineering Skills→
GayanKavindaGayanKavinda

webapp-testing

Test local web applications with Python Playwright automation.

Community
Intermediate
spallempatispallempati

pr-review-requirements

Enforce mandatory peer review and automated quality gates on pull requests.

Community
Intermediate
bellaFGbellaFG

Gerador de Imagens HTML

Render HTML/CSS into retina PNG images using a headless browser.

Community
Advanced
aquariuscookaquariuscook

visual-testing-advanced

Compare screenshots across viewports and browsers to detect visual regressions.

Community
Advanced