@reactslides/cli

Command-line interface for ReactSlides - scaffolding and development tools.

Installation

npm install -g @reactslides/cli
# or
npx @reactslides/cli

Commands

Create a new presentation

# Interactive mode
npx @reactslides/cli create

# With project name
npx @reactslides/cli create my-presentation

# With template
npx @reactslides/cli create my-presentation --template corporate

Available templates:

• minimal - Simple starter template
• corporate - Professional business presentations
• developer - Code-heavy technical presentations
• creative - Bold, visually rich presentations

Generate template from screenshots (AI-Powered)

Create custom templates automatically from presentation screenshots:

# Interactive mode
npx reactslides create-template-from-screenshots

# With screenshots
npx reactslides create-template-from-screenshots my-template \
  --screenshots slide1.png slide2.png slide3.png

# Using Claude instead of OpenAI
npx reactslides create-template-from-screenshots my-template \
  --screenshots slide.png \
  --provider claude

Requirements:

• API key: OPENAI_API_KEY or ANTHROPIC_API_KEY
• Screenshot images (PNG/JPG, 1920x1080+ recommended)

The command will analyze your screenshots and generate:

• Color palette extraction
• Typography sizing (Tailwind classes)
• Layout structure detection
• SVG placeholder assets
• Complete template package

See Template Generator README for detailed usage.

Analyze slides for component needs (AI-Powered, Internal)

Analyze presentation slides to identify what shared-ui components are needed:

# From a directory of screenshots
npx reactslides analyze-slides-for-components \
  --screenshots-dir ./my-slides

# From specific files
npx reactslides analyze-slides-for-components \
  --screenshots slide1.png slide2.png slide3.png \
  --output component-spec.md

# Using Claude
npx reactslides analyze-slides-for-components \
  --screenshots-dir ./slides \
  --provider claude

Requirements:

• API key: OPENAI_API_KEY or ANTHROPIC_API_KEY
• Screenshot images (PNG/JPG)

The command will:

• Analyze slides to identify needed UI components
• Generate a detailed markdown file with component specifications
• Provide comprehensive implementation instructions for Copilot
• Include for each component:
  • Detailed visual specifications: Exact colors (hex codes), spacing, borders, shadows
  • TypeScript prop definitions: Specific types (no generic "array"), validation rules, defaults
  • Tailwind CSS classes: Suggested classes for styling
  • HTML structure: Recommended semantic markup
  • Implementation examples: Sample JSX code with realistic props
  • Accessibility guidance: ARIA attributes, keyboard navigation requirements
  • Responsive considerations: Mobile/tablet/desktop behavior
  • Theme configuration: Required theme extensions
  • Use cases: Specific scenarios where component is needed

Output: A markdown file ready to use with GitHub Copilot to implement the components in packages/shared-ui.

Recent Improvements (2025-12-12):

• Enhanced AI prompt for more detailed component analysis
• Added specific TypeScript type requirements (eliminates generic "array" types)
• Included Tailwind CSS class suggestions for each component
• Added HTML structure recommendations
• Included implementation examples with realistic props
• Added accessibility and responsive design sections
• Enhanced visual details with exact values (colors, spacing, shadows)

See COMPONENT_ANALYZER_IMPROVEMENTS.md for detailed information about improvements.

Development server

reactslides dev              # Start dev server on port 3000
reactslides dev --port 5000  # Custom port
reactslides dev --host       # Expose to network
reactslides dev --open       # Open browser on startup

Build for production

reactslides build              # Build to ./dist
reactslides build --outDir out # Custom output directory
reactslides build --base /app/ # Custom base path for deployment

Import presentations

Import from PowerPoint or Google Slides:

# Import from PowerPoint
reactslides import --from pptx presentation.pptx

# Import with custom output directory
reactslides import --from pptx presentation.pptx --output-dir my-presentation

# Import from Google Slides (requires Google API credentials)
reactslides import --from google-slides <presentation-id>
reactslides import --from google-slides https://docs.google.com/presentation/d/...

# With style preservation
reactslides import --from pptx presentation.pptx --preserve-styles

The import command will:

1. Parse the presentation file
2. Extract slides, content, and media
3. Generate a ReactSlides project with exact dependencies
4. Create positioned elements matching the original layout

Export presentation

Export your presentation to various formats:

# Export to static HTML
reactslides export

# Export to PDF (requires Playwright)
reactslides export --pdf

# Export slides as PNG images (requires Playwright)
reactslides export --png

# Export to both PDF and PNG
reactslides export --pdf --png

# Export with custom output directory
reactslides export --pdf --outDir build

PDF/PNG Export Requirements:

The PDF and PNG export features use Playwright for headless browser rendering. To use these features:

# Install Playwright (optional dependency)
npm install -D playwright

# Install browser binaries
npx playwright install chromium

How it works:

1. Builds your presentation to static HTML
2. Starts a temporary local server
3. Launches a headless browser
4. Navigates through each slide
5. For PDF: Generates a multi-page PDF document
6. For PNG: Exports each slide as a numbered image (slide-001.png, slide-002.png, etc.)

Output:

• PDF: dist/presentation.pdf
• PNG: dist/slides/slide-001.png, slide-002.png, etc.

Preview built presentation

reactslides preview              # Preview on port 4173
reactslides preview --port 5000  # Custom port
reactslides preview --host       # Expose to network

Testing Unpublished Packages

When testing changes from a PR without publishing to npm:

Option 1: Using pnpm link (Recommended for monorepo)

# In the monorepo root (after building)
cd /path/to/reactslides-monorepo
pnpm build

# Link the packages globally
cd packages/reactslides
pnpm link --global

cd ../shared-ui
pnpm link --global

cd ../../apps/cli
pnpm link --global

# In your test project
cd /path/to/test-project
pnpm link --global @reactslides/core
pnpm link --global @reactslides/shared-ui
pnpm link --global @reactslides/cli

Option 2: Using local file dependencies

# In your test project's package.json
{
  "dependencies": {
    "@reactslides/core": "file:../monorepo/packages/reactslides",
    "@reactslides/shared-ui": "file:../monorepo/packages/shared-ui"
  }
}

Option 3: Testing CLI directly

# In the monorepo root
cd /path/to/reactslides-monorepo
pnpm build

# Run CLI commands directly using npm scripts
cd apps/cli
pnpm cli import --from pptx presentation.pptx
pnpm cli create-template-from-screenshots my-template --screenshots slide.png
pnpm cli analyze-slides-for-components --screenshots-dir ./slides

# Or run directly with node
node dist/index.js import --from pptx presentation.pptx
node dist/index.js create-template-from-screenshots my-template --screenshots slide.png
node dist/index.js analyze-slides-for-components --screenshots-dir ./slides

# Or make it executable
chmod +x dist/index.js
./dist/index.js import --from pptx presentation.pptx

For AI template generation from the monorepo:

# Set your API key
export OPENAI_API_KEY=your-key-here
# or
export ANTHROPIC_API_KEY=your-key-here

# Build the CLI first
cd /path/to/reactslides-monorepo
pnpm build --filter @reactslides/cli

# Run from the CLI package directory
cd apps/cli
pnpm cli create-template-from-screenshots test-template \
  --screenshots ../../tmp/pptx/simple/reactslides1.png \
  --output /tmp/test-templates \
  --provider openai \
  --model gpt-4o

# The generated template will be in /tmp/test-templates/test-template/

For AI component analysis from the monorepo:

# Set your API key
export OPENAI_API_KEY=your-key-here
# or
export ANTHROPIC_API_KEY=your-key-here

# Build the CLI first
cd /path/to/reactslides-monorepo
pnpm build --filter @reactslides/cli

# Run from the CLI package directory
cd apps/cli
pnpm cli analyze-slides-for-components \
  --screenshots-dir ../../tmp/pptx/simple \
  --output /tmp/component-spec.md \
  --provider openai

# The generated markdown will be in /tmp/component-spec.md
# Use this file with GitHub Copilot to implement the components

Option 4: Using the import generated project

After importing a presentation:

# The generated project will have exact version dependencies
cd imported-presentation

# Update package.json to use local packages
# Replace version numbers with file paths:
# "@reactslides/core": "file:../monorepo/packages/reactslides"

# Then install and run
pnpm install
pnpm dev

Template Structure

Each template includes:

my-presentation/
├── src/
│   ├── App.tsx        # Main presentation component
│   ├── main.tsx       # Entry point
│   └── index.css      # Styles with Tailwind
├── public/            # Static assets
├── index.html         # HTML entry
├── package.json
├── tsconfig.json
└── vite.config.ts

License

MIT