skills.rest
discourse
discourseOFFICIAL
Explore all skills by this author →
WebsiteGitHub

discourse-screenshots

Captures Discourse UI screenshots across themes, color modes, and devices via system specs.

47.8k|9.0k|Updated Jan 12, 2013
Search Tags:#screenshots#themes#discourse#Visual Testing#RSpec#Dark mode#system specs
One-click install
npx skills add https://github.com/discourse/discourse --skill discourse-screenshots
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: discourse-screenshots
Source: https://github.com/discourse/discourse/tree/main/.skills/discourse-screenshots
Command: npx skills add https://github.com/discourse/discourse --skill discourse-screenshots

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually verifying how Discourse pages render across the Foundation and Horizon themes, light and dark modes, and desktop and mobile viewports is slow and error-prone. This Skill automates that visual capture by driving a system spec that produces consistent PNG screenshots plus a comparison viewer.

Core Features & Use Cases

  • Matrix-based capture: Runs screenshot markers across every combination of theme (Foundation, Horizon), color mode (light, dark), and device (desktop, mobile via Playwright WebKit).
  • Auto-discovery of markers: Finds all system specs containing screenshot_marker calls and runs only those it blocks, skipping everything else.
  • Configurable runs: Filter by mode, device, theme, label substring, output directory, or add a remote theme via git URL.
  • Use Case: After changing a component's CSS, run the skill with a label subset to regenerate only the affected screenshots, then open compare.html to review light/dark and desktop/mobile rendering side by side.

Quick Start

Ask the assistant to take screenshots of the local Discourse site, optionally narrowing the run with phrases like "dark mode only, desktop, just topic markers".

Frequently Asked Questions about discourse-screenshots

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

FAQPage Schema
How do I take screenshots of Discourse themes in light and dark mode?▼

Run the theme screenshots system spec with TAKE_SCREENSHOTS=1 LOAD_PLUGINS=1 bin/rspec spec/system/theme_screenshots_spec.rb. It captures every screenshot marker across Foundation and Horizon themes in both light and dark modes on desktop and mobile.

How do I capture screenshots for only one theme or device?▼

Set the SCREENSHOTS_THEMES, SCREENSHOTS_MODES, or SCREENSHOTS_DEVICES environment variables to comma-separated values, such as SCREENSHOTS_THEMES=foundation SCREENSHOTS_MODES=dark. Only the matching matrix legs are captured.

Can I screenshot a custom Discourse theme from a git repository?▼

Yes, pass SCREENSHOTS_THEME_URL with the theme's git URL and optionally SCREENSHOTS_THEME_NAME for the file label. The theme is installed and added to the capture matrix alongside the built-in Foundation and Horizon themes.

How do I add a new screenshot marker to a Discourse system spec?▼

Include ThemeScreenshotMarker in the spec and call screenshot_marker with a label at the point you want to capture. Use the only: :desktop or only: :mobile keyword to restrict a marker to one device leg.

Why does the screenshot spec not run without TAKE_SCREENSHOTS?▼

The spec is gated behind the TAKE_SCREENSHOTS=1 environment variable so it is skipped during normal test runs. Without it, the orchestrator exits instead of executing the full theme and device matrix.

Where are the Discourse theme screenshots saved?▼

PNGs are written to tmp/theme-screenshots/raw with filenames encoding device, theme, mode, and label, and a compare.html viewer is generated in tmp/theme-screenshots. Override the location with the SCREENSHOTS_DIR environment variable.

Related Skills

Explore More Software Engineering Skills→
bikeindexbikeindex
308

sandbox-test-setup

Configure Ruby and RSpec environments for Bike Index across macOS and sandboxes.

Official
Advanced
stoodderstoodder
1

ui-review

Capture UI screenshots and compare them against visual standards.

Community
Advanced
special-place-administratorspecial-place-administrator

live-preview

Capture UI component screenshots during build to detect visual regressions.

Community
Advanced
vecearvecear

visual-regression-tester

Automate visual regression testing of UI with Playwright, Chromatic, or Percy.

Community
Advanced