skills.rest
fairy-pitta
fairy-pittaCOMMUNITY
Explore all skills by this author →
GitHub

capture-ui

Capture screenshots of changed UI files and upload them to a GitHub Pull Request.

Updated Jan 26, 2026
Search Tags:#automation#ui#frontend#visual testing#screenshot#github pr
One-click install
npx skills add https://github.com/fairy-pitta/claude-dotfiles --skill capture-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: capture-ui
Source: https://github.com/fairy-pitta/claude-dotfiles/tree/main/skills/capture-ui
Command: npx skills add https://github.com/fairy-pitta/claude-dotfiles --skill capture-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the process of detecting UI changes, capturing screenshots from a local development server, and uploading them as comments to a GitHub Pull Request, ensuring visual consistency and facilitating reviews.

Core Features & Use Cases

  • Automated UI Change Detection: Identifies modified UI-related files (Vue, TSX, CSS, etc.).
  • Screenshot Capture: Takes screenshots from a running local development server.
  • PR Integration: Uploads captured screenshots directly to the relevant GitHub Pull Request.
  • Use Case: After making changes to your application's frontend components, this skill can automatically generate screenshots of the affected pages and attach them to your PR for quick visual verification by reviewers.

Quick Start

Run the capture-ui skill with the URL of the pull request you want to update.

Frequently Asked Questions about capture-ui

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

FAQPage Schema
How do I automatically add UI screenshots to a GitHub PR?▼

You can automate UI screenshot uploads to a GitHub PR by running a skill that detects modified frontend files, captures images from a local development server, and posts them as comments to the specified pull request.

How does automated visual testing detect which pages to screenshot?▼

Automated visual testing infers target pages by detecting modified UI-related files, such as Vue, TSX, and CSS, within a Git branch, and then uses browser automation to navigate and capture the affected pages.

Do I need a running local development server to capture UI changes?▼

Yes, a running local development server is required. The tool checks dev server availability and uses browser automation to navigate and capture screenshots from the local environment before uploading them to the PR.

What frontend file types are supported for detecting UI changes?▼

Supported frontend file types include Vue, TSX, and CSS. The tool identifies modified UI-related files in a Git branch to determine which application pages require visual verification and screenshot capture.

What are the limitations of automating PR screenshots from a local server?▼

Limitations include dependence on local dev server availability and accurate PR detection. The screenshot capture and upload process will fail if the local server is not running or the specified GitHub PR cannot be properly detected.

Related Skills

Explore More Software Engineering Skills→
huangzidahuangzida
2

webapp-testing

Automate end-to-end testing of local web apps with Playwright in Python.

Community
Intermediate
rickyanandarickyananda
1

github-code-review

Reviews GitHub pull requests and local diffs for security and quality issues.

Community
Advanced
damacusdamacus
2

screenshot-github

Capture MedTracker UI screenshots and attach them to GitHub issues or PR comments.

Community
Advanced
MacPhobosMacPhobos

Screenshot-Based UI Verification

Capture UI screenshots across multiple viewports and generate pull request descriptions.

Community
Intermediate