Skip to main content

Screenshots

Documentation visuals

The docs now use screenshots as product communication assets, not just raw captures. This page explains where those images come from and how to keep them current.

Current tooling

  • Expo dev build for iOS
  • Maestro for scripted mobile navigation and capture
  • Playwright for hosted admin control plane screenshots

Current outputs​

Mobile output set

The current mobile capture set covers the highest-value product views and flow stages.

  • home
  • capture step 1
  • capture step 2
  • capture step 3
  • context and events
  • impact dashboard
  • executive dashboard
  • profile
Admin output set

The admin capture set now covers all 16 screens across public, core, team, workflow, and admin-only views.

  • landing, login
  • dashboard, search, events, insights
  • advocates, leaderboard, world map
  • program, bug reports, PMO import, settings
  • monitoring, operations, user management
Published guides

Curated visual output is now published in product-facing walkthrough pages rather than as raw screenshot dumps.

  • Mobile Experience > Mobile Screenshots
  • Admin Control Plane > Admin Screenshots

Workflow source​

1. Keep capture flows stable

Use consistent fixture data and reproducible navigation so visual diffs reflect product changes, not test noise.

2. Refresh curated outputs when UI changes

If a screen meaningfully changes, refresh the image and its surrounding explanation together.

3. Publish screenshots as guided references

The goal is to help readers understand what matters on the screen, not just prove the screen exists.

Source references​

The active mobile screenshot implementation lives in the mobile app repo:

  • docs/SCREENSHOTS.md
  • .maestro/screenshots.yaml
  • scripts/run-doc-screenshots.sh

The admin screenshot automation has two entry points:

  • Docs repo: scripts/capture-admin-screenshots.mjs -- run with npm run screenshots:admin
  • Admin app repo: scripts/take-screenshots.ts -- run with npx tsx scripts/take-screenshots.ts

Both produce the same 16 screenshots. The docs script captures from the hosted deployment while the admin script captures from the local dev server. After capturing from the admin app, copy the outputs into static/img/admin/ in this repo to publish updated images.