Skip to content
PhotoProofing PhotoProofing PhotoProofing Manual

Documentation Guidelines

This page defines the production rules for the user manual itself. If the manual is updated without following these rules, the result stops being usable for first-time readers because the text, screenshots, and localized copies drift apart.

Screenshot rules

Section titled “Screenshot rules”
RuleRequirement
FramePrefer 16:9 captures at 1920×1080 for every screenshot, including compact steps.
ThemeEach page should show one theme-aware screenshot variant at a time. Do not place separate light and dark screenshots side-by-side in the same section.
LocaleEvery screenshot needs variants for en, it, de, and es.
AssetsStore generated screenshot sources under src/assets/screenshots/<locale>/.... Keep /screenshots/... URLs in docs and sync to public/screenshots before build.
ImagesUse the curated image set in src/assets/images for screenshot seeds. Keep portrait, landscape, sport, product, and mixed editorial assets available and document the author for every file.
NamingUse a realistic studio name such as Aurora Frame Studio. Never show E2E, test IDs, or fake labels in visible UI. Use favicon.svg as the fake studio logo so it is visible in the app chrome.
Mini stepsUse a compact screenshot only for a short step, error state, or one-screen confirmation.

Image attribution

Section titled “Image attribution”

The screenshot seed uses a small local image set from src/assets/images:

FileAuthorSource
aiony-haust-3TLl_97HNJo-unsplash.jpgAiony HaustUnsplash
alex-lvrs-mTw_GePuRUE-unsplash.jpgAlex LvrsUnsplash
andrea-brambila-qdlwwWvuLfk-unsplash.jpgAndrea BrambilaUnsplash
andy-holmes-ErbcPR6StBk-unsplash.jpgAndy HolmesUnsplash
branislav-rodman-e54z7uvah4c-unsplash.jpgBranislav RodmanUnsplash
branislav-rodman-EJRsDXNz4CM-unsplash.jpgBranislav RodmanUnsplash
branislav-rodman-iEwXXHqJBzQ-unsplash.jpgBranislav RodmanUnsplash
de-von-wellesley-rAgCFi0ue0w-unsplash.jpgDe Von WellesleyUnsplash
dom-hill-nimElTcTNyY-unsplash.jpgDom HillUnsplash
ermia-ramez-k0tAULbT6K8-unsplash.jpgErmia RamezUnsplash
gabriel-silverio-K_b41GaWC5Y-unsplash.jpgGabriel SilverioUnsplash
irene-kredenets-KStSiM1UvPw-unsplash.jpgIrene KredenetsUnsplash
isaac-maffeis-X4MeVvCIk6A-unsplash.jpgIsaac MaffeisUnsplash
joe-gardner-NorYfP4rwmQ-unsplash.jpgJoe GardnerUnsplash
marjan-taghipour-1tjMpBTvFAA-unsplash.jpgMarjan TaghipourUnsplash
nathanael-desmeules-c7f03aFW5gg-unsplash.jpgNathanael DesmeulesUnsplash
olga-serjantu-qu2JENeCaE4-unsplash.jpgOlga SerjantuUnsplash
paul-cuoco-CkzMxn8tJ7A-unsplash.jpgPaul CuocoUnsplash
paul-gaudriault-a-QH9MAAVNI-unsplash.jpgPaul GaudriaultUnsplash
paul-kruger-j1vgIYKsPmQ-unsplash.jpgPaul KrugerUnsplash
shaun-bexley-wAY43y9sPx0-unsplash.jpgShaun BexleyUnsplash
stefan-stefancik-QXevDflbl8A-unsplash.jpgStefan StefancikUnsplash
yemi-wallington-Iys8Fitaq_Q-unsplash.jpgYemi WallingtonUnsplash

Local image set

Section titled “Local image set”

The current manual seed also uses this mixed local set for galleries and cover images:

FileTypeNotes
aiony-haust-3TLl_97HNJo-unsplash.jpgPortraitEditorial portrait seed
alex-lvrs-mTw_GePuRUE-unsplash.jpgPortraitEditorial portrait seed
andrea-brambila-qdlwwWvuLfk-unsplash.jpgWeddingLandscape couple cover
andy-holmes-ErbcPR6StBk-unsplash.jpgSportAction still life
branislav-rodman-e54z7uvah4c-unsplash.jpgPortraitEditorial portrait seed
branislav-rodman-EJRsDXNz4CM-unsplash.jpgProductStudio product shot
branislav-rodman-iEwXXHqJBzQ-unsplash.jpgPortraitEditorial portrait seed
de-von-wellesley-rAgCFi0ue0w-unsplash.jpgMixedPresentation-friendly cover
dom-hill-nimElTcTNyY-unsplash.jpgPortraitEditorial portrait seed
ermia-ramez-k0tAULbT6K8-unsplash.jpgProductClean product cover
gabriel-silverio-K_b41GaWC5Y-unsplash.jpgPortraitEditorial portrait seed
irene-kredenets-KStSiM1UvPw-unsplash.jpgPortraitEditorial portrait seed
isaac-maffeis-X4MeVvCIk6A-unsplash.jpgWeddingLandscape couple cover
joe-gardner-NorYfP4rwmQ-unsplash.jpgMixedPresentation-friendly cover
marjan-taghipour-1tjMpBTvFAA-unsplash.jpgWeddingLandscape couple cover
nathanael-desmeules-c7f03aFW5gg-unsplash.jpgProductStudio product shot
olga-serjantu-qu2JENeCaE4-unsplash.jpgPortraitEditorial portrait seed
paul-cuoco-CkzMxn8tJ7A-unsplash.jpgSportAction still life
paul-gaudriault-a-QH9MAAVNI-unsplash.jpgPortraitEditorial portrait seed
paul-kruger-j1vgIYKsPmQ-unsplash.jpgProductStudio product shot
shaun-bexley-wAY43y9sPx0-unsplash.jpgWeddingLandscape couple cover
stefan-stefancik-QXevDflbl8A-unsplash.jpgPortraitEditorial portrait seed
yemi-wallington-Iys8Fitaq_Q-unsplash.jpgMixedPresentation-friendly cover

Writing rules

Section titled “Writing rules”
  • Describe what the reader should do, not only what they can see.
  • Keep captions factual. They should explain the result of the step, not celebrate dark mode or smaller viewports as a showcase.
  • Use ThemeScreenshot when a flow needs a theme-aware capture, but keep the page showing only one variant at a time.
  • Use ImageZoom for screenshots that benefit from close inspection.
  • Use starlight-kbd for shortcuts and key labels instead of writing raw key names by hand.
  • Hide TanStack devtools overlays and other floating debug controls in manual screenshots.

Quality checklist

Section titled “Quality checklist”

Before publishing a new or edited page, verify the following:

  1. The page exists in all available languages.
  2. Every image path resolves in the correct locale.
  3. Theme-aware screenshots never show light and dark variants side-by-side in the same section.
  4. Curated images are present where the app would otherwise show empty or gray panels, and the source attribution is documented.
  5. The copy does not mention E2E anywhere in user-facing text.
  6. The fake studio logo resolves to favicon.svg and remains visible in the app chrome.
  7. Mini screenshots are truly compact and explain a single step.

When to update this page

Section titled “When to update this page”

Update the guidelines whenever the screenshot pipeline, the locale strategy, or the manual styling changes. The goal is to keep the manual 1:1 with the app and with the assets that represent it.