Teaching slide decks authored as React components, built on the open-slide framework (@open-slide/core). Each slide lives under slides/<id>/index.tsx and default-exports an array of page components — the runtime handles layout, scaling, navigation, thumbnails, and fullscreen play mode, so you just write the pages.
pnpm install
pnpm devThen open the dev server and edit slides/getting-started/index.tsx, or create a new slide at slides/<your-slide>/index.tsx.
| Command | Description |
|---|---|
pnpm dev |
Start the dev server with hot reload. |
pnpm build |
Build a static bundle you can deploy. |
pnpm preview |
Preview the built bundle locally. |
pnpm new:deck <id> |
Scaffold a new deck on the fhsh-isiphs-universal theme (see the new-deck skill). |
// slides/my-slide/index.tsx
import type { Page, SlideMeta } from '@open-slide/core';
const Cover: Page = () => (
<div style={{ width: '100%', height: '100%' }}>Hello</div>
);
export const meta: SlideMeta = { title: 'My slide' };
export default [Cover] satisfies Page[];Every page renders into a fixed 1920 × 1080 canvas — design with absolute pixel values. Put images, videos, and fonts under slides/<id>/assets/ and import them directly.
See CLAUDE.md for the full authoring guide.
- Arrow keys / PageUp / PageDown move between pages.
Fenters fullscreen play mode; Esc exits.- In play mode: Space / → next, ← prev.
This workspace ships with Claude Code skills preconfigured under .claude/skills/ and .agents/skills/. Ask Claude Code to "make slides about X" and the create-slide skill takes over. To quickly scaffold a new deck on the fhsh-isiphs-universal theme, use the local new-deck skill (or run pnpm new:deck <id>). Use apply-comments to iterate via inspector-style markers inside your source.
Optional open-slide.config.ts at the workspace root:
import type { OpenSlideConfig } from '@open-slide/core';
const openSlideConfig: OpenSlideConfig = {
port: 5173,
};
export default openSlideConfig;Supported fields: slidesDir, port.