wehub-resource-sync
74 lines
2.2 KiB
Plaintext
74 lines
2.2 KiB
Plaintext
---
|
|
title: Getting started
|
|
description: Spin up your first deck in under a minute.
|
|
---
|
|
|
|
## Install
|
|
|
|
```npm
|
|
npx @open-slide/cli init my-deck
|
|
cd my-deck
|
|
npm run dev
|
|
```
|
|
|
|
The scaffolder generates a minimal workspace:
|
|
|
|
```text
|
|
my-deck/
|
|
├── slides/
|
|
│ └── getting-started/
|
|
│ └── index.tsx # your first slide
|
|
├── themes/ # optional, shared design systems
|
|
├── open-slide.config.ts # framework config
|
|
├── CLAUDE.md # mirrors AGENTS.md
|
|
├── AGENTS.md # agent rules
|
|
└── package.json
|
|
```
|
|
|
|
`npm run dev` boots the dev server on `http://localhost:5173` (or the next
|
|
free port) with hot module reload, the inspector, and the assets panel.
|
|
|
|
## Author with an agent
|
|
|
|
Open the workspace in any agent-aware editor — Claude Code, Codex, Cursor,
|
|
Windsurf, Zed, etc. From the agent prompt:
|
|
|
|
```text
|
|
/create-slide for "Q2 launch — 3 chapters, mixed text density, subtle motion, dark aesthetic"
|
|
```
|
|
|
|
The skill walks the agent through scoping (topic & aesthetic, page count,
|
|
density, motion), picks an id, plans the structure, and writes the pages
|
|
under `slides/<id>/index.tsx`.
|
|
|
|
## Iterate visually
|
|
|
|
1. Click any element in the browser preview.
|
|
2. Pick **Comment** and type a note — *"use the accent colour on this
|
|
title"*, *"shrink to 88px"*, *"swap to assets/cover.png"*.
|
|
3. Save. Comments are persisted as `@slide-comment` markers in the source.
|
|
4. Run `/apply-comments` in your agent. It rewrites exactly the flagged
|
|
regions and clears the markers.
|
|
|
|
You can also edit text, font, weight, and colour directly from the inspector
|
|
property panel — all edits buffer in memory until you press **Save**, so a
|
|
batch lands as a single HMR write.
|
|
|
|
## Build & deploy
|
|
|
|
```npm
|
|
npm run build # static build to dist/
|
|
npm run preview # preview the static build locally
|
|
```
|
|
|
|
The output is a plain static site — deploy to Vercel, Cloudflare Pages,
|
|
Zeabur, Netlify, or any static host.
|
|
|
|
## What's next
|
|
|
|
<Cards>
|
|
<Card title="Create a slide" href="/docs/flow/create-slide" />
|
|
<Card title="Present mode" href="/docs/core-feature/present-mode" />
|
|
<Card title="Agent skills" href="/docs/skills/overview" />
|
|
</Cards>
|