slideshare/USERFLOWS.md
Michael Mainguy 1008bd4bca Implement slide preview and fix import standards project-wide
## New Feature: Full Screen Slide Preview
- Add SlidePreviewModal component for full screen slide preview in SlideEditor
- ESC key support and temporary hint for user guidance
- Proper aspect ratio handling with theme CSS inheritance
- Modal follows existing UI patterns for consistency

## Import Standards Compliance (31 files updated)
- Fix all imports to use explicit .tsx/.ts extensions per IMPORT_STANDARDS.md
- Eliminate barrel imports in App.tsx for better Vite tree shaking
- Add direct imports with explicit paths across entire codebase
- Preserve CSS imports and external library imports unchanged

## Code Architecture Improvements
- Add comprehensive CSS & Component Architecture Guidelines to CLAUDE.md
- Document modal patterns, aspect ratio handling, and CSS reuse principles
- Reference all coding standards files for consistent development workflow
- Prevent future CSS overcomplication and component duplication

## Performance Optimizations
- Enable Vite tree shaking with proper import structure
- Improve module resolution speed with explicit extensions
- Optimize build performance through direct imports

## Files Changed
- 31 TypeScript/React files with import fixes
- 2 new SlidePreviewModal files (component + CSS)
- Updated project documentation and coding guidelines
- Fixed aspect ratio CSS patterns across components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-21 06:52:56 -05:00

2.4 KiB

User Flows I want the solution to support

Flow #1 - Presentation Management

Adding, removing, and editing existing presentations

Create New Presentation

  • User navigates to create new presentation
  • User enters presentation details (title, description)
  • User selects aspect ratio (16:9, 4:3, 16:10) for presentation
  • User selects a theme from available options
  • User creates presentation and is taken to editor

View All Presentations

  • User can view list of all saved presentations
  • User can see presentation metadata (name, description, theme, slide count)
  • User can access presentations from navigation

Edit Existing Presentation

  • User can open existing presentation for editing
  • User can navigate between slides in editor
  • User can access presentation settings and metadata

Delete Presentation

  • User can delete presentation from list view
  • User gets confirmation dialog before deletion
  • Presentation is removed from storage

Flow #2 - Slide Management

Adding, removing, and editing individual slides within presentations

Add New Slide

  • User clicks "Add Slide" from presentation editor
  • User can select layout for new slide (with themed previews)
  • User can add content to slide slots (text, images)
  • User can add presentation notes to slide
  • User can see miniature preview of slide live while editing
  • User can save slide (auto-saves presentation)
  • User can duplicate an existing slide copying it's layout and content.

Edit Existing Slide

  • User can click on existing slide to edit
  • User can modify slide content in all slots
  • User cannot change slide layout once saved
  • User can exit slide editing mode without saving changes in an obvious way
  • User can edit presentation notes
  • Changes auto-save to presentation
  • User can edit slide content without preview if desired by clicking inside content slot areas

Remove Slide

  • User can delete slides from presentation
  • User gets confirmation before slide deletion
  • Slide order adjusts automatically

Preview Slides

  • User can preview individual slides
  • User can view slides in presentation mode
  • User can navigate between slides in preview

Slide Order Management

  • User can reorder slides via drag-and-drop
  • User can see slide order visually in editor
  • Slide order automatically saves when changed