docs: screenshot-driven user guide + preview mockups#7
Merged
Conversation
- docs/USER_GUIDE.md walks through every screen of the web vault and Chrome extension popup with annotated screenshots: register, unlock, the searchable/groupable credential grid, the add-credential form, and the locked + unlocked extension popups. - docs/preview/ holds standalone HTML mockups that reuse the live packages/web/src/styles.css; they double as a regression check for styling changes and as the source for re-capturing the PNGs. - docs/preview/server.mjs is a minimal Node static server scoped to the worktree root (so the relative styles.css path resolves) and is wired up via .claude/launch.json for the in-IDE preview tool. - docs/img/ stores the captured PNGs, generated by Chrome headless; the guide documents the exact one-liner to regenerate them. - README links the new guide alongside ARCHITECTURE and SECURITY. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Trailing commit on
claude/reverent-liskov-0b076bthat PR #5 didn't carry — pushed after the squash-merge. Adds an end-user walkthrough of every screen plus the infrastructure to regenerate the screenshots.What's in this PR
<link rel=\"stylesheet\" href=\"../../packages/web/src/styles.css\">, so any change to the live CSS shows up in the screenshots without re-mocking. Includes a tinyserver.mjs(Node http, scoped to the worktree root so the relative styles.css path resolves) and an index page listing all mockups.node docs/preview/server.mjswith one click.ARCHITECTURE.mdandSECURITY.md.Reproducibility
The guide includes the exact Chrome-headless one-liner used to regenerate the PNGs, so when CSS or markup changes the maintainer can refresh the images in seconds without a separate screenshotting tool.
Verification
No code paths are touched. The web build still runs clean (
npm run build --workspace=@passman/web); the merged main is already verified end-to-end after #6 unblocked the test suite.🤖 Generated with Claude Code