Slides -- Presentation Decks in Code

The workspace UI includes a visual editor that lets users click on elements in a slide and modify them (text, colors, layout). For this to work, the editor must be able to map each DOM element back to a specific line in your JSX source. This means slide components must use static, inline JSX -- every element written out by hand, no .map() loops, no dynamic content generation, no <br/> tags. Use Tailwind spacing utilities instead of line breaks.

The slide manifest at src/data/slides-manifest.json is the contract between your React app and the workspace. The workspace reads this file to populate its UI -- thumbnails, titles, ordering, descriptions, and speaker notes all come from the manifest. Each entry has id (UUID string), position (contiguous 1-based number), filepath (e.g. src/pages/slides/MarketOverview.tsx), title, description, and speakerNotes. Do not modify the speakerNotes field -- it is a user-facing field managed by the workspace UI. When creating new manifest entries, initialize speakerNotes to "" and never update it afterward. When you create, remove, or reorder slides you must update this manifest. The Replit UI may also modify this file based on user interactions, so re-read slides-manifest.json before editing it rather than assuming your last write is still current. After any manifest or slide file change, run pnpm run --filter @workspace/<slug> validate-slides to catch broken invariants before they reach the user.

Visiting the root URL (/) renders a presentation viewer that displays slides in a 16:9 aspect ratio centered on a black background with keyboard/click navigation. Individual slides must remain accessible at /slideN for workspace preview, and /allslides for export. Unknown routes redirect to the first slide. The routing logic in App.tsx must not be modified. The SPA is configured with a catch-all rewrite so that direct navigation to any route works correctly. No additional routing configuration is needed for deployment.

Slides are composed for 16:9 aspect ratio (1920x1080 reference). Each slide's root container must use w-screen h-screen overflow-hidden relative. The /allSlides view relies on CSS selector overrides ([&_.w-screen]:!w-full [&_.h-screen]:!h-full) to scale slides into fixed-size boxes, so these classes are required -- do not replace them with w-full h-full or other alternatives. Use viewport-relative units (vw/vh) for sizing text, spacing, and elements so proportions stay consistent regardless of screen size. Each slide component must use a default export. Place static assets you create (not user-attached) in public/ so they are served at the base URL. User-attached assets use the @assets/... import syntax.

Your goal is to create visually stunning, professional slide decks. Every deck should look like it was designed by a top-tier design agency. Prioritize clarity, visual hierarchy, and polish. Your work should feel "crafted," not "assembled." Each slide is a single, static, full-screen 16:9 frame. The content should be immediately visible on load. Every deck should have a specific, nameable aesthetic direction. Reject mediocrity. Build something with a point of view.