Michael Mainguy
6e6c09b5ba
- Add React Router with theme browser, theme detail, and layout detail pages - Implement manifest-based theme discovery for better performance - Add Welcome component as home page with feature overview - Fix layout and styling issues with proper CSS centering - Implement introspective theme browsing (dynamically discover colors/variables) - Add layout preview system with iframe scaling - Create comprehensive theme detail page with color palette display - Fix TypeScript errors and build issues - Remove hardcoded theme assumptions in favor of dynamic discovery 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
67 lines
3.5 KiB
Markdown
67 lines
3.5 KiB
Markdown
# 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
|
|
- [x] build themeing system creating initial default theme
|
|
- [x] 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
|
|
- [x] it should be flexible and allow for custom themes to be created using only html templates and css
|
|
- [x] 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](REACT19.md)
|
|
- We should refer to [VITEBESTPRACTICES.md](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 |