Product Specification: Cursor for Slides

📄 Product Specification: Cursor for Slides

🚀 Overview

Cursor for Slides is a slide presentation IDE that allows users to design, build, and deploy stunning, interactive, and data-rich slide decks using code (Markdown, JSX, or a custom DSL), while benefiting from Cursor’s AI-native developer experience — including autocomplete, AI refactoring, and live preview.

---

🧩 Key Features

1. Code-First Slide Authoring

• Users write slides using a Markdown-like syntax or JSX/React-style components.

• Live AI suggestions help build content, transitions, styles, and animations.

• Supports themes, layouts, reusable components.

// Example syntax:
# Slide 1
Welcome to Cursor for Slides

---

# Slide 2
## Live coding preview
```js
const greet = (name) => `Hello, ${name}!`

#### 2. **Live Slide Preview**
- Right pane renders slide deck live as user types.
- Edits reflect in milliseconds — supports embedded charts, code, and AI-generated diagrams.

#### 3. **AI Assistance Built-In**
- Generate slide content based on outline.
- Rewrite, shorten, or expand slides via prompts.
- “Make it more visual”, “Add an animation here”, “Split into two slides”, etc.

#### 4. **Theme + Component System**
- Slide components: `<TitleSlide />`, `<CodeSlide />`, `<ChartSlide data={} />`
- Theming support with Tailwind, ShadCN, or custom CSS.
- Exportable design tokens.

#### 5. **Export + Sharing Options**
- Export to:
  - PDF
  - HTML
  - Notion
  - Reveal.js-compatible format
- Live shareable link (like Vercel Preview or Codesandbox Live)

#### 6. **Collaboration + Versioning**
- Git-backed.
- Real-time multiplayer with commenting.
- Branching, commits, history, rollback.

#### 7. **Embed + Interactivity**
- Live interactive components: quizzes, polls, charts, code runners.
- Embed YouTube, Figma, Twitter, CodePen.
- AI Q&A box built-in per slide.

---

## 🛠️ Tech Stack + How to Build It in Cursor

### 👨‍💻 Step-by-Step Using Cursor

#### Step 1: **Set Up Monorepo**
- Use Cursor's Next.js + Vite template.
- Two packages:
  - `slides-engine`: compiles Markdown/JSX to HTML.
  - `slides-editor`: frontend editor interface.

#### Step 2: **Editor Interface**
- File: `app/slides-editor/page.tsx`
- Use Monaco or CodeMirror as code editor.
- Set up live preview in adjacent pane using React hooks and `dangerouslySetInnerHTML` or a secure renderer.

```tsx
const [source, setSource] = useState<string>("")
const rendered = useMemo(() => renderSlides(source), [source])

Step 3: Rendering Engine

• Use remark, rehype, MDX, or @mdx-js/react to parse code.

• Custom slide renderer breaks content by ---.

Step 4: AI Commands

• Integrate Cursor Copilot commands:

  • /summarize slides

  • /generate slide on climate change with bullet points

  • /convert to bullet points + chart

const generateSlide = async (prompt: string) => {
  const response = await callOpenAI(prompt)
  return updateEditorContent(response)
}

Step 5: Export Engine

• PDF: Puppeteer to print HTML.

• HTML: Export as SPA.

• GitHub Action for build + deploy to Vercel.

Step 6: Themes + Components

• Tailwind CSS + shadcn/ui.

• Theme toggle: light/dark/custom.

Step 7: Embed + Interactivity

• Embed React Live to allow users to insert <LiveCode> blocks.

• Integrate with charting libs like react-chartjs-2 or echarts.

---

🧠 AI Prompts Examples

• “Create a slide deck on AI agents with 5 slides”

• “Refactor this into an interactive coding presentation”

• “Add illustrations on slides 2 and 4”

• “Summarize this long text into 3 key bullet points for a slide”

---

🧾 Deliverables & Output

Output Type	Format	Notes
Slide Deck	.html, .pdf	Downloadable
Code	.mdx, .tsx	Editable
Live URL	Vercel/Netlify	Shareable
Git History	Git repo	Revisions

---

🧭 Future Additions

• Plugin Marketplace (animations, chart types, integrations)

• Speaker mode + presenter notes

• Real-time audience Q&A powered by AI

• Voice-over slide generation