slideshare/CLAUDE.md

Slide authoring and presentation tool

• Should run with no backend server required
• Data should be stored in indexdb in the browser
• leverage existing react and npm libraries

Features

• Create new presentation
• Select theme for presentation
• Add slides to presentation and select layout for each slide based on the selected theme and it's layouts
• Add text to slide in theme layout "slots"
• Add images to slide in theme layout "slots"
• Add presentation notes to slide
• Present slides in a full screen mode

Themes

• Themes should be baked into the app, but should be customizable
• Themes should be selectable when creating a new presentation
• Themes should be applied to all slides in the presentation
• Themes should be able to be updated after the presentation is created and presentations will be updated to reflect the new theme
• Themes should allow multiple layouts for slides that are selectable when creating a new slide
• Themes should allow for custom CSS to be applied to the presentation
• Themes should allow for custom fonts to be applied to the presentation
• Themes should allow for custom colors to be applied to the presentation
• Themes should allow for custom images to be applied to the presentation
• Themes should allow for "master slides" that have content that slide authors cannot override or change

ROADMAP

• build themeing system creating initial default theme
• build theme selection system
• build theme browsing module
• build presentation creation system
• build slide creation system
• build slide authoring system
• build presentation system

CURRENT FOCUS

determine structure and approach for theming system

• it should be flexible and allow for custom themes to be created using only html templates and css
• themes and templates should be very close to native html and css so that they can be easily created and modified

Code Standards

• Strongly prefer convention over configuration versus configuration over convention
• Use React for the UI, but allow for other libraries if needed and try to keep as close to html/js/css as possible
• Use functional components and hooks
• Use TypeScript for type safety, but allow for JavaScript in some cases
• No inline styles - All styling should be in CSS files with semantic class names
• Theme structure should be simple and easy to understand for someone familiar with html and ccss
• Theme structure should not repeat the same information in multiple places
• Theme structure should be flexible and allow for custom themes to be created using only html templates and css
• Metadata for themes should be stored as comments in the html and css files
• React compoonents and code should be modular and reusable and abide by REACT19.md
• We should refer to VITEBESTPRACTICES.md for best practices in Vite

General Claude Guidelines

• Don't run npm commands, just tell me what to run and I'll run them myself
• When building componentns, refer to https://www.vite.dev

Architecture

Themes

• Themes should be stored in a directory structure under public directory that allows for easy access and modification by browser

• Themes should be stored in a directory structure that allows for easy access

• don't try to run command to restart, just tell me the command when necessary

• Add to memory. Just tell me to run build, I'll paste in results, don't try to run the command

• Add to memory. I want to make sure this approach is generally followed

• remember to always use introspection when browsing themes and details