npm package: @reactslides/cli
Description: CLI tools for creating and managing ReactSlides presentations
Latest version: 0.0.11

# @reactslides/cli

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

## Installation

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

## Commands

### Create a new presentation

```bash
# 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:

```bash
# 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](./src/template-generator/README.md) for detailed usage.

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

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

```bash
# 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](./COMPONENT_ANALYZER_IMPROVEMENTS.md) for detailed information about improvements.

### Development server

```bash
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

```bash
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:

```bash
# 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:

```bash
# 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:

```bash
# 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

```bash
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)

```bash
# 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

```bash
# 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

```bash
# 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:**

```bash
# 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:**

```bash
# 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:

```bash
# 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