Skip to content

Document the Playwright docs-screenshot workflow for reuse across projects #23

@deanleigh

Description

@deanleigh

The Creating a Workflow docs page (#21) proved the pattern: conversational walkthrough → planning doc → docs page → Playwright spec → iterate → ship. The pattern works and should be reused — both on other UpDoc docs pages and in other projects.

Goal: capture the workflow as three durable artefacts so next time is faster.

Artefacts:

  1. Global Claude memory (`~/.claude/CLAUDE.md`) — short section describing the pattern so any future Claude in any project knows it on day one. No project specifics.
  2. Standalone guide repo (e.g. `UmTemplates/docs-screenshot-guide`) — reproducible skeleton with a planning-doc template, a Playwright spec skeleton including the lessons learned (sidebar-scoped queries, `select-only` UUI card gotcha, native-dropdown screenshot limitation), medium-zoom install steps.
  3. Project-local planning doc (`planning/DOCS_SCREENSHOT_WORKFLOW.md` in UpDoc) — UpDoc-specific bits: test site URL, sample PDF paths, Playwright API user, workflow names reserved for screenshot runs. References the standalone guide for the generic bits.

Out of scope:

  • Automating screenshot regeneration in CI (future enhancement)
  • Video captures (future)
  • Extracting the Playwright helper into a shared npm package (premature)

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions