Problem
Users land on the GitHub page and see code, not a product. There is no visual guide showing what RightLayout looks like, how to install it, what correction looks like in action, or how to configure settings. Without visual proof, users will not trust or install a keystroke-monitoring app.
Proposed Solution
Create docs/USER_GUIDE.md with annotated screenshots and GIF recordings.
Sections to Include
1. Installation
- Homebrew:
brew install --cask rightlayout
- Manual: download DMG, drag to Applications
- Include a GIF of the drag-to-Applications flow
2. Granting Accessibility Permission
- Screenshot of System Settings > Privacy & Security > Accessibility
- Explain WHY the permission is needed
- Link to SECURITY.md for trust
3. First Launch
- Screenshot of menu bar icon and dropdown
- Explain what each menu item does
4. Your First Correction (the key demo)
- Record a GIF showing: wrong layout active, user types, RightLayout corrects
- This is the "aha moment" that sells the app
5. Settings
- Screenshot of settings window
- Explain each option (languages, launch at login, exclusions, shortcut)
6. Troubleshooting
- "Not correcting anything" -> check Accessibility, check if paused, check exclusions
- "Corrections are wrong" -> check layout in System Settings, report with original/expected
- "App won't start after macOS update" -> re-grant Accessibility permission
GIF Recording Tools
- Kap -- open source macOS screen recorder
- LICEcap -- lightweight GIF recorder
- gifski -- high-quality GIF encoder
Asset Storage
Store in assets/docs/:
install.gif -- DMG drag-to-Applications
accessibility.png -- System Settings permission
menubar.png -- Menu bar dropdown
correction-demo.gif -- Live correction in action
settings.png -- Settings window
Steps to Implement
- Create
docs/USER_GUIDE.md with all sections
- Record GIFs of installation, accessibility setup, and live correction
- Take screenshots of menu bar and settings
- Save assets to
assets/docs/
- Add prominent "User Guide" link in README
- Embed
correction-demo.gif in README for immediate visual impact
Acceptance Criteria
Problem
Users land on the GitHub page and see code, not a product. There is no visual guide showing what RightLayout looks like, how to install it, what correction looks like in action, or how to configure settings. Without visual proof, users will not trust or install a keystroke-monitoring app.
Proposed Solution
Create
docs/USER_GUIDE.mdwith annotated screenshots and GIF recordings.Sections to Include
1. Installation
brew install --cask rightlayout2. Granting Accessibility Permission
3. First Launch
4. Your First Correction (the key demo)
5. Settings
6. Troubleshooting
GIF Recording Tools
Asset Storage
Store in
assets/docs/:install.gif-- DMG drag-to-Applicationsaccessibility.png-- System Settings permissionmenubar.png-- Menu bar dropdowncorrection-demo.gif-- Live correction in actionsettings.png-- Settings windowSteps to Implement
docs/USER_GUIDE.mdwith all sectionsassets/docs/correction-demo.gifin README for immediate visual impactAcceptance Criteria
docs/USER_GUIDE.mdexists with all sections listed above