skills.rest
hivemq
hivemqOFFICIAL
Explore all skills by this author →
WebsiteGitHub

capture-screenshots

Automates Cypress UI-state screenshot capture for PRs, docs, blogs with defined naming and storage locations.

164|44|Updated Jun 30, 2023
Search Tags:#automation#cypress#ui-testing#screenshot#visual-regression#pr-docs-blog
One-click install
npx skills add https://github.com/hivemq/hivemq-edge --skill capture-screenshots-hivemq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: capture-screenshots
Source: https://github.com/hivemq/hivemq-edge/tree/main/hivemq-edge-frontend/.claude/skills/capture-screenshots
Command: npx skills add https://github.com/hivemq/hivemq-edge --skill capture-screenshots-hivemq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates capturing UI-state screenshots to provide visual evidence for PRs, docs, and blog visuals, ensuring consistency across states.

Core Features & Use Cases

  • Automated UI screenshots using Cypress to document PR changes, documentation updates, and blog visuals.
  • Defined storage locations and naming conventions for PRs, docs, and blogs to keep assets organized.
  • Flexible capture modes: injects into existing tests or uses quick-headed captures when a rapid snapshot is needed.

Quick Start

Run the capture-screenshots workflow to capture and store a current UI snapshot for PRs, docs, or blog visuals using the Cypress-based approach.

Frequently Asked Questions about capture-screenshots

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

FAQPage Schema
How do I automate Cypress screenshots for PR documentation?▼

Automating Cypress screenshots for PR documentation involves injecting capture blocks into existing UI tests or using quick-headed captures to snapshot UI states. The workflow ensures consistent viewport configuration, naming conventions, and predefined storage paths for your visual assets.

How do I capture consistent UI visuals for blog posts and docs?▼

Capturing consistent UI visuals for blog posts and docs is achieved by automating screenshot workflows that enforce standardized viewport sizes and organized storage locations. This ensures your visual evidence remains uniform across different documentation updates and blog announcements.

Can I inject screenshot commands into existing Cypress tests?▼

Yes, you can inject screenshot commands into existing Cypress tests to capture specific UI states. This flexible capture mode allows you to generate visual evidence for PRs seamlessly during your regular UI-testing automation runs without creating standalone scripts.

What is the best way to organize UI screenshots for visual regression?▼

The best way to organize UI screenshots for visual regression is using predefined storage locations and strict naming conventions. Automating this process ensures that visual evidence for PRs, documentation, and blog visuals remains consistently categorized and easily accessible.

Do I need existing Cypress tests to automate UI screenshots?▼

No, you do not need existing Cypress tests to automate UI screenshots. The workflow supports quick-headed captures, allowing you to rapidly snapshot a UI state for PRs or blog visuals independently without relying on pre-existing test suites.

Related Skills

Explore More Software Engineering Skills→
GuidoBergmanGuidoBergman

testarch-framework

Initialize Playwright or Cypress test frameworks with fixtures and configurations.

Community
Advanced
mckinseymckinsey
413

Ark Dashboard and UI Testing

Automate Ark dashboard UI testing with Playwright and generate PR-ready screenshots.

Official
Intermediate
krzemienskikrzemienski
2

visual-inspection

Capture rendered UI states with screenshots and DOM snapshots into severity-classified markdown reports.

Community
Advanced
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate