slides-generator

# Slides Generator Generate professional, interactive presentation slides with React + Tailwind. ## Project Structure Each slide project is organized in a dedicated folder: ``` <project-folder>/ ├── context.md ← Collected knowledge and context from user ├── researches/ ← Research documents (when topic requires research) │ └── YYYY-MM-DD-topic.md ├── slides.md ← Markdown slides for preview/discussion ├── source/ ← React source code (from template) │ ├── package.json │ ├── vite.config.js │ ├── vite.standalone.config.js │ ├── tailwind.config.js │ ├── index.html │ └── src/ │ ├── App.jsx │ ├── index.css │ └── slides/ │ ├── 01-hero.jsx │ ├── 02-content.jsx │ └── ... ├── verify/ ← Verification screenshots (from browser testing) └── slide.html ← Final standalone HTML (auto-generated) ``` ## Workflow Overview ``` Step 1: Initialize Project Folder ↓ Step 2: Collect Requirements (Progressive Disclosure) Phase 1: Topic → Phase 2: Audience → Phase 3: Style → Phase 4: Content ↓ Step 2.5: Research Checkpoint "Would you like me to research [topic]?" → User confirms ↓ Step 3: Create context.md + slides.md ↓ Step 4: Confirm Outline with User ↓ Step 5: Create Source Code → source/ ↓ Step 6: Generate Slides (parallel subagents) ↓ Step 7: Dev Mode + Browser Verification (REQUIRED) ↓ Step 8: Build & Export → slide.html ``` ## Step 1: Initialize Project Folder **Ask user for project folder if not provided:** ``` Where would you like to save this presentation? Default: ./presentation-name ``` **Create folder structure:** ```bash mkdir -p <project-folder>/source <project-folder>/researches <project-folder>/verify ``` ## Step 2: Collect Requirements (Progressive Disclosure) Use progressive disclosure: ask 3-5 questions at a time, reveal more based on answers. See [context-guide.md](references/context-guide.md) for detailed question flow. ### Question Flow **Phase 1 - Quick Start** (Always): ``` "What's the presentation about?" "Any content or notes to include?" (optional) ``` **Phase 2 - Audience & Purpose** (Always): ``` "Who will view this?" - Executives / Decision makers - Technical team / Developers - General audience / Mixed - Customers / External "What's the goal?" - Inform / Persuade / Demo / Report ``` **Phase 3 - Style Discovery** (Always): **Step 1**: Get keywords from user ``` "Describe the vibe in a few words" Examples: "tech, modern, dark" or "professional, clean, corporate" ``` **Step 2**: Use **ui-ux-pro-max** skill for comprehensive design recommendations ```bash python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "<topic> <keywords> presentation" --design-system -p "<Presentation Name>" ``` This provides: - Style recommendations with reasoning - Color palette suggestions - Typography pairings - Animation guidelines **Step 3**: Combine with [palettes.md](references/palettes.md) to present 5 options Example prompt to user: ``` Based on your description and design analysis, here are 5 style options: 1. **Dark Sapphire Blue** (glass) - Recommended by ui-ux-pro-max Dark tech with blue accents, gradient glows Typography: Sora + Source Sans 3 Best for: Tech products, developer tools 2. **Electric City Nights** (glass) Urban dark with vibrant blue highlights Typography: DM Sans + Work Sans Best for: Modern SaaS, tech startups 3. **Cyberpunk** (glass) Neon colors, futuristic sci-fi feel Typography: Outfit + Nunito Sans Best for: Gaming, AI/ML, futuristic topics 4. **Minimal Modern Light** (flat) Clean light theme with blue accents Typography: DM Sans + Work Sans Best for: Corporate, professional presentations 5. **Hacker News** (glass) Dark with orange accents, geek aesthetic Typography: Sora + Source Sans 3 Best for: Developer content, technical demos Which style? (1-5) ``` **Selection is captured in context.md** under Style section. **Phase 4 - Content Depth** (Conditional): ``` "What are 3-5 key points to cover?" "Any specific data to include?" - Yes, I have data → [Get details] - Research needed → [Trigger Step 2.5] - No data needed → [Skip] ``` ### Drill-Down for Abstract Terms When users give vague terms, clarify: | User Says | Ask | |-----------|-----| | "Professional" | "Clean/minimal, or rich/detailed?" | | "Modern" | "Can you point to an example?" | | "Engaging" | "Animations, or compelling content?" | ### Save to context.md After questions, create `context.md` capturing: - Topic, purpose, audience from Phase 1-2 - **Selected style** (palette ID, name, style type) from Phase 3 - Key points and data needs from Phase 4 ```markdown ## Style (User Selected) - **Palette ID**: dark-sapphire-blue - **Palette Name**: Dark Sapphire Blue - **Mode**: dark - **Style**: glass - **Typography**: - Display: Sora - Body: Source Sans 3 - **User Keywords**: "tech, modern, dark" - **Design Source**: ui-ux-pro-max + palettes.md ``` ## Step 2.5: Research Checkpoint **Always ask before researching** - apply Just-In-Time research pattern. ### When to Offer Research Offer research when: - Topic involves comparisons (A vs B) - User mentions data/statistics/benchmarks - Topic is current events or recent technology - User needs facts they don't have Skip research when: - User provides their own data - Topic is personal/internal - User explicitly declines ### Research Prompt ``` "This topic would benefit from research. Would you like me to: [ ] Research current data/statistics [ ] Find competitive comparisons [ ] Gather industry trends [ ] Skip research - I'll provide content" ``` ### Research Workflow ``` 1. User confirms research needed ↓ 2. Conduct targeted web search ↓ 3. Document in researches/ folder ↓ 4. Present summary to user: "I found: [key findings]. Does this look accurate?" ↓ 5. User confirms → Update context.md ``` ### Research Templates See [research-templates.md](references/research-templates.md) for: - **Statistics & Data** - Metrics, benchmarks, numbers - **Competitive Analysis** - A vs B comparisons - **Trends & Forecasts** - Industry outlook - **Quick Facts** - Simple fact lookup ### File Organization ``` researches/ ├── YYYY-MM-DD-statistics.md # Data and numbers ├── YYYY-MM-DD-comparison.md # A vs B analysis └── YYYY-MM-DD-trends.md # Industry trends ``` ### Quality Checklist Before using researched data: - [ ] Source is authoritative - [ ] Data is recent (<6 months for fast fields) - [ ] Cross-referenced with another source - [ ] User has confirmed accuracy **After research, update context.md** with verified data and sources. ## Step 3: Create Markdown Slides Create `slides.md` with complete design system and content structure. See [slides-design.md](references/slides-design.md) for detailed patterns. ### 3.1 Generate Design System (Optional but Recommended) Use **ui-ux-pro-max** skill to get comprehensive design recommendations: ```bash python3 skills/ui-ux-pro-max/scripts/search.py "<topic> <style keywords>" --design-system -p "<Presentation Name>" ``` **Example:** ```bash python3 skills/ui-ux-pro-max/scripts/search.py "tech benchmark modern dark glass" --design-system -p "Claude Benchmark" ``` ### 3.2 slides.md Template ```markdown # [Presentation Title] ## Design System ### Theme - **Palette**: [theme-id from palettes.md] - **Mode**: dark / light - **Style**: glass / flat ### Colors | Token | Hex | Usage | |-------|-----|-------| | bg-base | #0f1c2e | Main background | | primary-500 | #4d648d | Primary accent | | accent-500 | #3d5a80 | Contrast accent | | text-primary | #ffffff | Main text | | text-secondary | #cee8ff | Secondary text | ### Typography - **Display**: Sora (headings) - **Body**: Source Sans 3 (content) ### Effects - **Cards**: glass with border-white/20 - **Animations**: stagger reveal (0.1s delay) - **Background**: gradient glow + grid pattern --- ## Slide 1: Hero **Type**: Hero **Layout**: centered **Title**: Main Title Here **Subtitle**: Supporting tagline **Background**: gradient glow (primary top-left, accent bottom-right) **Animation**: fade-in + scale (0.6s) --- ## Slide 2: Overview **Type**: Content **Layout**: three-column **Title**: What We'll Cover **Cards**: 3 cards, glass style **Points**: - [icon: Zap] First key point - [icon: Shield] Second key point - [icon: Rocket] Third key point **Animation**: stagger reveal (0.1s) --- ## Slide 3: Details **Type**: Data **Layout**: stat-cards **Title**: Key Metrics **Stats**: | Metric | Value | Trend | Context | |--------|-------|-------|---------| | Users | 10K+ | +25% | Monthly active | | Growth | 40% | +15% | Year over year | | NPS | 72 | +8 | Industry avg: 45 | **Animation**: count-up numbers --- ## Slide 4: Comparison **Type**: Comparison **Layout**: versus **Title**: Head to Head **Comparison**: | Feature | Option A | Option B | |---------|----------|----------| | Speed | ✓ Fast | ○ Medium | | Cost | $99/mo | $149/mo | | Support | 24/7 | Business | **Highlight**: Option A for performance --- ## Slide 5: Summary **Type**: Summary **Layout**: takeaways **Title**: Key Takeaways **Takeaways**: 1. First key insight 2. Second key insight 3. Third key insight **CTA**: "Get Started" → [link] **Animation**: fade-in sequential ``` ### 3.3 Slide Types Reference | Type | Use For | Layouts | |------|---------|---------| | Hero | Opening slide | centered, split, asymmetric | | Content | Information, bullets | single-column, two-column, icon-list | | Data | Statistics, metrics | stat-cards, chart-focus, dashboard | | Comparison | Side-by-side analysis | versus, feature-matrix, ranking | | Timeline | Process, roadmap | horizontal, vertical, milestone | | Grid | Multiple cards | 2x2, 2x3, bento | | Quote | Testimonials | centered, with-avatar | | Summary | Closing, CTA | takeaways, cta-focused | ### 3.4 Design Patterns by Scenario | Scenario | Theme | Style | Typography | |----------|-------|-------|------------| | Tech/Product | dark-sapphire-blue | glass | Sora + Source Sans 3 | | Professional | banking-website | flat | DM Sans + Work Sans | | Creative | cyberpunk or neon | glass | Outfit + Nunito Sans | | Nature | summer-meadow | flat | Manrope + Source Sans 3 | | Minimal | black-and-white | flat | DM Sans + Work Sans | ## Step 4: Confirm with User Present the outline for confirmation: ```markdown ## Presentation Outline **Title**: [Title] **Theme**: [theme-id] ([glass/flat] style) **Folder**: [project-folder] **Slides**: 1. Hero - Title and overview 2. Content - Key points 3. Data - Metrics/charts 4. Summary - Conclusions **Files to create:** - context.md ✓ - slides.md ✓ - source/ (React project) - slide.html (final output) **Confirm to generate?** ``` ## Step 5: Create Source Code Copy template and configure: ```bash # 1. Copy template