Screenshot Capture Checklist

Before Starting

  • Start Hugo server: hugo server -D --navigateToChanged
  • Open second terminal for Claude work
  • Clear terminal history if needed
  • Position windows optimally for screenshots
  • Prepare screenshot tool (Cmd+Shift+4 on macOS)

During Capture Process

Pre-Screenshot Checklist

For each screenshot:

  • Check window positioning and sizing
  • Ensure good contrast and text readability
  • Remove any sensitive information from view
  • Verify proper terminal prompt/cursor position
  • Check browser zoom level (100% recommended)

Screenshot Quality

  • Use PNG format for text clarity
  • Capture at full resolution, resize if needed
  • Ensure maximum width doesn’t exceed 1200px
  • Check that all important details are visible
  • Verify text is readable at various sizes

Capture Sequence by Step

01-Setup

  • 01-terminal-hugo-server-running.png - Hugo server startup output
  • 01-browser-localhost-preview.png - Local site preview
  • 01-terminal-project-structure.png - Directory listing
  • 01-terminal-dual-setup.png - Both terminals visible
  • 01-hugo-server-output.png - Server running confirmation
  • 01-terminal-directory-listing.png - Project files with ls -la

02-Planning

  • 02-claude-planning-conversation.png - Initial planning discussion
  • 02-claude-todowrite-output.png - TodoWrite tool in action
  • 02-terminal-specs-directory.png - Specs folder creation

03-Research

  • 03-claude-web-research.png - Claude research capabilities
  • 03-terminal-grep-results.png - Searching existing content
  • 03-claude-context-gathering.png - Information synthesis

04-Structure

  • 04-terminal-mkdir-post.png - Creating post directory
  • 04-editor-front-matter.png - Setting up post metadata
  • 04-terminal-file-structure.png - Final directory structure

05-Writing

  • 05-claude-editor-split.png - Claude + editor view
  • 05-claude-collaborative-writing.png - Writing process
  • 05-editor-revision-history.png - Content evolution

06-Testing

  • 06-browser-live-reload.png - Live reload demonstration
  • 06-mobile-responsive-view.png - Mobile compatibility
  • 06-browser-navigation-test.png - Navigation verification

07-Assets

  • 07-terminal-assets-listing.png - Asset organization
  • 07-terminal-image-optimization.png - Image processing
  • 07-browser-page-speed-test.png - Performance testing

08-Review

  • 08-claude-content-review.png - Content review process
  • 08-terminal-hugo-build.png - Build validation
  • 08-browser-final-preview.png - Pre-publish preview

09-Deployment

  • 09-terminal-git-status.png - Git status check
  • 09-terminal-commit-message.png - Commit message creation
  • 09-github-actions-triggered.png - Workflow start
  • 09-github-deployment-success.png - Deploy completion

10-Monitoring

  • 10-browser-live-site-post.png - Published post verification
  • 10-browser-azure-dashboard.png - Azure deployment status
  • 10-browser-social-sharing.png - Social sharing functionality

Post-Capture Tasks

  • Review all screenshots for quality
  • Rename files according to naming convention
  • Move to appropriate subdirectories
  • Optimize file sizes if needed
  • Write alt text descriptions
  • Update blog post with image references

Quality Assurance

  • All text is clearly readable
  • No sensitive information exposed
  • Images demonstrate workflow accurately
  • File names match documented conventions
  • Screenshots tell coherent story
  • Alt text written for accessibility

Backup Strategy

  • Keep original high-resolution versions
  • Create web-optimized versions for blog
  • Store in version control with post
  • Document any special capture circumstances