Skip to main content
Use PNG or WebP for final screenshots (recommended width 1200–1400px). Store files under docs/images/screenshots/ and reference them from MDX with <Frame>.
On macOS: Cmd+Shift+4 then Space to capture a window. Prefer demo accounts; avoid publishing real student PII when possible.

​
Screenshots in the docs (on disk)

​
Still needed (capture when convenient)

Optional older captures still in the folder:
  • intake-archived-file.png — File Assignment for archived returning students
  • intake-success-legacy.png — replace with intake-success.png when ready

​
Nice-to-have next

​
Capture from production

Prefer manual window captures when the machine is busy. Automated Playwright scripts launch Chromium and a local/prod browser session — they can spike memory. Only run them when nothing else heavy is open.
Put credentials in .env as plain KEY=value lines (no wrapping quotes or trailing \). .env is gitignored. Re-capture sign-in, sign-in-school-portal, dashboard, app-shell-sidebar, and cabinets-add-custom-capacity after UI changes so Mintlify matches production. Use an Admin account for Email Validation, Security, and MotherDuck shots. Close other browsers/IDEs before running Playwright capture scripts.

​
How to add a screenshot

1

Capture the screenshot

Open the live app, navigate to the screen, and capture at full width.
2

Save the file

Save as docs/images/screenshots/your-name.png.
3

Update the MDX page

4

Preview and deploy

Run npm run docs:dev, verify locally, then push for Mintlify to deploy.

​
Mintlify Frame tips

From Mintlify Frames:
  • Always wrap screenshots in <Frame> for consistent borders and captions
  • Use caption for what the image shows; Markdown links are allowed in captions
  • Keep alt text specific (role + page + key UI elements)