skills.rest
fcsonline
fcsonlineCOMMUNITY
Explore all skills by this author →
Website𝕏@openfcsonlineGitHub

ui-screenshots

Coordinate before/after UI screenshot capture, annotation, and embedding for PRs.

49|15|Updated Apr 6, 2026
Search Tags:#ui#documentation#screenshot#annotation#pr-workflow#before-after
One-click install
npx skills add https://github.com/fcsonline/droneroute --skill ui-screenshots-fcsonline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-screenshots
Source: https://github.com/fcsonline/droneroute/tree/main/.opencode/skills/ui-screenshots
Command: npx skills add https://github.com/fcsonline/droneroute --skill ui-screenshots-fcsonline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guide capturing, annotating, and embedding before/after screenshots in PRs that change UX or UI.

Core Features & Use Cases

  • Before/after screenshot workflow to document visual changes in PRs.
  • Clear annotation steps and storage location in docs/screenshots.
  • Embedding screenshots in PR descriptions and changelogs to communicate changes.

Quick Start

Capture before screenshots, perform changes, capture after screenshots, annotate, and store all images in docs/screenshots.

Frequently Asked Questions about ui-screenshots

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

FAQPage Schema
How do I document UI changes in a pull request with before and after screenshots?▼

To document UI changes in a pull request, capture before and after screenshots, annotate the visual differences, and embed the images directly in the PR description to communicate the UX updates clearly.

What is the best way to organize and store annotated UI screenshots for a PR workflow?▼

The recommended way to store annotated UI screenshots for a PR workflow is saving all captured before and after image files into a dedicated docs/screenshots directory using consistent file naming conventions.

When do I need to include UI screenshots in my PR documentation?▼

You need to include UI screenshots in your PR documentation whenever a pull request changes the UX or visual presentation, ensuring that visual modifications are repeatable, verified, and properly recorded in changelogs.

Can I use this screenshot annotation workflow for changelogs as well as PR descriptions?▼

Yes, you can embed the annotated before and after UI screenshots in both PR descriptions and changelogs, ensuring that visual presentation changes are consistently communicated across all your project documentation.

Do I need specific tooling to capture and annotate before and after UI screenshots?▼

No specific tooling is required, but the workflow specifies recommended tooling and file conventions to ensure repeatable capture, clear annotation, and proper embedding of before and after UI screenshots in your documentation.

Related Skills

Explore More Design & Creative Skills→
zinohomezinohome
1

visual-regression-tester

Capture and compare UI screenshots with Playwright and Chromatic.

Community
Advanced
majesticlabs-devmajesticlabs-dev
47

pr-screenshot-docs

Capture before/after UI screenshots and document visual changes for pull requests.

Official
Basic
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate
benjaminshoemakerbenjaminshoemaker
39

browser-verification

Automate browser-based UI verification with MCP tooling and evidence capture.

Community
Advanced