skills.rest
danielraffel
danielraffelCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/danielraffel/burl --skill screenshot-sync
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Mattyreed1Mattyreed1

browser

Route web automation tasks between authenticated Chrome and headless Playwright.

Community
Advanced
flight505flight505
9

story-generation

Generate Storybook CSF 3.0 stories from React, Vue, and Svelte components.

Community
Intermediate
tan-yong-shengtan-yong-sheng
4

ui-visual-validator

Analyze screenshots for visual regressions, design system compliance, and accessibility.

Community
Advanced
mgd34msumgd34msu
4

chromatic

Automate visual regression testing for Storybook components via Chromatic.

Community
Intermediate