discourse/.skills
Penar Musaraj ef406fc8c0
DEV: Add theme screenshots system spec and skill (#39426)
Previously, there was no systematic way to visually review changes
across multiple screens in a theme. Or to compare how Foundation and
Horizon render key UI screens

This adds a `screenshot_marker(label:)` helper in system specs (globally
included via ThemeScreenshotMarker) that captures a PNG at that point in
a test. A matrix runner spec at `theme_screenshots_spec.rb`
auto-discovers any system spec containing screenshot markers and runs
those blocks against each theme × color mode × device combination. At
the end it generates a `compare.html` viewer for side-by-side
comparison.

<img width="3399" height="1400" alt="image"
src="https://github.com/user-attachments/assets/4ddd650a-6133-4da5-901e-5ec2f2d0906a"
/>


This can be run via CLI or via the attached skill. Directly:

### All themes × light/dark × desktop/mobile (default)
TAKE_SCREENSHOTS=1 bin/rspec spec/system/theme_screenshots_spec.rb


#### Foundation only, dark mode, desktop only
TAKE_SCREENSHOTS=1 SCREENSHOTS_THEMES=foundation SCREENSHOTS_MODES=dark
SCREENSHOTS_DEVICES=desktop bin/rspec
spec/system/theme_screenshots_spec.rb

#### Third-party theme in addition to core themes
TAKE_SCREENSHOTS=1
SCREENSHOTS_THEME_URL=https://github.com/discourse/discourse-air
bin/rspec spec/system/theme_screenshots_spec.rb



You can also run this via the agent skill, which builds the command from
natural language: `/discourse-screenshots` for the full default matrix,
or `/discourse-screenshots foundation only, dark only, desktop` and
similar limited runs.

### Use cases

- review broad changes in core against key UI screens across the app
- compare layouts/screens between core themes and/or a custom theme
- preview a new theme's look and feel across different areas of the app

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-05 09:36:29 -04:00
..
discourse-ai-llm-presets DEV: Refresh default LLM presets and pricing (#39673) 2026-04-30 17:02:32 -03:00
discourse-migration PERF: add index for audit log post ids (#39365) 2026-04-20 12:09:44 +10:00
discourse-pr DEV: Tweaks for discourse-pr skill (#39643) 2026-04-30 10:36:06 +01:00
discourse-screenshots DEV: Add theme screenshots system spec and skill (#39426) 2026-05-05 09:36:29 -04:00
discourse-service-authoring DEV: tasks and autonomous mode for service skill (#38619) 2026-03-16 10:21:04 +01:00
discourse-upcoming-changes DEV: inits our .skills directory (#37850) 2026-02-17 09:35:23 +11:00
discourse-upcoming-changes-authoring UX: Surface upcoming-change default overrides via site setting filter (#39628) 2026-04-29 17:05:09 +10:00