screenshot-sync

Automate screenshot synchronization with UI changes in a repository.

1|Updated Jul 11, 2026

Search Tags:#UI consistency #repository maintenance #screenshot capture #screenshot synchronization #UX development

Ready to run

npx skills add https://github.com/danielraffel/burl --skill screenshot-sync

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: screenshot-sync
Source: https://github.com/danielraffel/burl/tree/main/.agents/skills/screenshot-sync
Command: npx skills add https://github.com/danielraffel/burl --skill screenshot-sync

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3, node, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill ensures that screenshots remain in sync with UI changes in a repository, providing a consistent user experience across various demo sites.

Core Features & Use Cases

Screenshot Synchronization: Automatically capture and update screenshots when UI changes occur.
Trigger-based Updates: Re-capture screenshots based on specific UX path changes.
Multiple Capture Routes: Support for native headless and live-web headless Chrome capture routes.
Consistency Tool: Aids in maintaining UI consistency without copying or fabricating screenshots.
Use Case: When a design-token change reskins every widget, this Skill ensures all related screenshots, Open Graph images, and gallery thumbnails are updated accordingly.

Quick Start

Run the screenshot-sync skill with the command: python3 tools/scripts/screenshot_sync_check.py --base origin/main --mode=report

Frequently Asked Questions about screenshot-sync

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

FAQPage Schema

How do I keep repository screenshots in sync with UI changes automatically?▼

To keep repository screenshots in sync with UI changes, you can automate screenshot synchronization using a script that captures and updates images based on specific UX path changes. This ensures README images, Open Graph images, and gallery thumbnails reflect the latest design.

What is the best way to update Open Graph images and thumbnails after a design-token change?▼

The best way to update Open Graph images and thumbnails after a design-token change is using an automated screenshot synchronization tool. It re-captures affected UI paths to ensure all demo site visuals remain consistent without manual image copying.

Do I need Python 3 and Node to automate screenshot capture for UX development?▼

Yes, you need Python 3 and Node to automate screenshot capture for UX development. Python 3 executes the synchronization scripts, while Node supports playwright-core for live-web headless Chrome capture routes.

Can I trigger screenshot updates based on specific UX path changes in a repository?▼

Yes, you can trigger screenshot updates based on specific UX path changes in a repository. The automation script detects UI modifications and re-captures the affected screenshots to maintain visual consistency across your documentation.

Does headless Chrome screenshot capture work for live web demos?▼

Yes, headless Chrome screenshot capture works for live web demos by utilizing playwright-core. This provides multiple capture routes, including native headless and live-web headless Chrome, to accurately capture dynamic UI states.