slidewright

Name: slidewright
Author: tronghieu

37stars20forks

How to install slidewright?

tronghieu/agent-skills/slidewright

$npx -y skills add tronghieu/agent-skills --skill slidewright

Installs into the current project.

Summary

Build interactive presentation websites — slide decks projected to a room, controlled by one presenter. Use this skill WHENEVER the user wants to create, build, or design a presentation, slide deck, talk, or "bài thuyết trình / slide / trình chiếu", and also when they ask to add/

Files · 1

View on GitHub

SKILL.md

1	# Interactive presentation builder
2
3	Build slide decks that run as a website and are projected to a room. The deck is the
4	visual half of a talk; the presenter does the talking. Two ways to build, one shared
5	design language.
6
7	## First, the mental model (read before writing any code)
8
9	There is one operator (the presenter) on one machine. Slides go on a big screen;
10	the audience only looks — they never click, type, or interact. Everything below
11	follows from this. Two failure modes to avoid:
12
13	- Text too small. Slides are read from across a room, not on a laptop. Never use
14	web-reading sizes (`text-sm`, `16px`). Honour the typography floor (body ≥ ~40px on a
15	1080p canvas). See `references/design-system.md`.
16	- Building an app. No input fields, no "Submit", no login, no data collection — there
17	is no backend and nowhere for data to go. Interaction is only the presenter clicking to
18	reveal/advance content. If a component asks "where does this data go?", it's wrong.
19
20	`references/design-system.md` is the heart of this skill — the typography floor, allowed
21	interaction, layout recipes, motion, and palette. Read it whenever you design or restyle
22	slide content.
23
24	## Workflow
25
26	1. Understand the talk. Topic, audience, speaker (name/role for the title slide), tone,
27	rough number of slides, and any brand colours/logo. For Vietnamese content the default
28	voice is plain, honest, direct — no marketing hype.
29	2. Pick a track (below). If unsure, ask once; otherwise default to plain HTML for
30	small/quick decks and React for substantial, maintained talks.
31	3. Scaffold with the matching script — don't hand-assemble the boilerplate.
32	4. Build slides following `references/design-system.md`: one idea per slide, few
33	words, real visuals, projection-legible type, presenter-only interaction.
34	5. Keep the required chrome: a visible bottom navigation slider (dot strip) and slide
35	number. Both scaffolds include it — don't remove it.
36	6. Write speaker notes in the `<deck-name>-notes.md` file the scaffold creates (never
37	on the slides themselves).
38	7. Export to PDF if asked — see `references/export-pdf.md`.
39
40	Put each deck in its own folder. Keep any live-demo app as a separate project, not inside
41	the deck.
42
43	## Choosing a track
44
45	\| Pick \| When \| Reference \|
46	\| --- \| --- \| --- \|
47	\| Plain HTML \| Zero setup wanted; runs by opening a file; quick deck; shareable anywhere; no toolchain. Gets unwieldy past ~15–20 rich slides. \| `references/html-track.md` \|
48	\| Vite + React \| Many slides, reusable components, state-driven interactions, TypeScript, Framer Motion, maintained/re-run talks. \| `references/react-track.md` \|
49
50	Both produce the same projected experience and obey the same design system; they differ
51	only in implementation.
52
53	## Scaffolding
54
55	Plain HTML — single self-contained `index.html`, Tailwind via CDN, no build:
56
57	```bash
58	bash scripts/new-html-deck.sh <deck-name> [target-dir] [--title "Deck title"]
59	```
60
61	Vite + React — scaffolds with the official Vite tool and installs the latest
62	React, Tailwind, Framer Motion, and Lucide (versions are intentionally not pinned, so
63	each deck starts on current tooling), then layers the `App → Deck → Slide` architecture:
64
65	```bash
66	bash scripts/new-react-deck.sh <deck-name> [target-dir] [--no-install]
67	cd <deck-name> && npm run dev
68	```
69
70	After scaffolding, read the matching track reference for how slides are structured and how
71	to add/reorder them, then build the content.
72
73	## Files in this skill
74
75	- `references/design-system.md` — projection rules, typography floor, layout recipes,
76	motion, palette. The core; consult for any content/design work.
77	- `references/html-track.md` — plain-HTML deck structure, template internals, adding slides.
78	- `references/react-track.md` — Vite+React architecture, slide ordering, Tailwind wiring.
79	- `references/export-pdf.md` — PDF export options and speaker-notes convention.
80	- `scripts/new-html-deck.sh` — scaffold a plain-HTML deck.
81	- `scripts/new-react-deck.sh` — scaffold a Vite + React deck.
82	- `scripts/export-deck-pdf.py` — export a deck to a content-comp

People who liked this also viewed

6 picks

Type

slidewright

37stars20forks

View on GitHub

How to install slidewright?

tronghieu/agent-skills/slidewright

$npx -y skills add tronghieu/agent-skills --skill slidewright

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Interactive presentation builder
2
3	Build slide decks that run as a website and are projected to a room. The deck is the
4	visual half of a talk; the presenter does the talking. Two ways to build, one shared
5	design language.
6
7	## First, the mental model (read before writing any code)
8
9	There is one operator (the presenter) on one machine. Slides go on a big screen;
10	the audience only looks — they never click, type, or interact. Everything below
11	follows from this. Two failure modes to avoid:
12
13	- Text too small. Slides are read from across a room, not on a laptop. Never use
14	web-reading sizes (`text-sm`, `16px`). Honour the typography floor (body ≥ ~40px on a
15	1080p canvas). See `references/design-system.md`.
16	- Building an app. No input fields, no "Submit", no login, no data collection — there
17	is no backend and nowhere for data to go. Interaction is only the presenter clicking to
18	reveal/advance content. If a component asks "where does this data go?", it's wrong.
19
20	`references/design-system.md` is the heart of this skill — the typography floor, allowed
21	interaction, layout recipes, motion, and palette. Read it whenever you design or restyle
22	slide content.
23
24	## Workflow
25
26	1. Understand the talk. Topic, audience, speaker (name/role for the title slide), tone,
27	rough number of slides, and any brand colours/logo. For Vietnamese content the default
28	voice is plain, honest, direct — no marketing hype.
29	2. Pick a track (below). If unsure, ask once; otherwise default to plain HTML for
30	small/quick decks and React for substantial, maintained talks.
31	3. Scaffold with the matching script — don't hand-assemble the boilerplate.
32	4. Build slides following `references/design-system.md`: one idea per slide, few
33	words, real visuals, projection-legible type, presenter-only interaction.
34	5. Keep the required chrome: a visible bottom navigation slider (dot strip) and slide
35	number. Both scaffolds include it — don't remove it.
36	6. Write speaker notes in the `<deck-name>-notes.md` file the scaffold creates (never
37	on the slides themselves).
38	7. Export to PDF if asked — see `references/export-pdf.md`.
39
40	Put each deck in its own folder. Keep any live-demo app as a separate project, not inside
41	the deck.
42
43	## Choosing a track
44
45	\| Pick \| When \| Reference \|
46	\| --- \| --- \| --- \|
47	\| Plain HTML \| Zero setup wanted; runs by opening a file; quick deck; shareable anywhere; no toolchain. Gets unwieldy past ~15–20 rich slides. \| `references/html-track.md` \|
48	\| Vite + React \| Many slides, reusable components, state-driven interactions, TypeScript, Framer Motion, maintained/re-run talks. \| `references/react-track.md` \|
49
50	Both produce the same projected experience and obey the same design system; they differ
51	only in implementation.
52
53	## Scaffolding
54
55	Plain HTML — single self-contained `index.html`, Tailwind via CDN, no build:
56
57	```bash
58	bash scripts/new-html-deck.sh <deck-name> [target-dir] [--title "Deck title"]
59	```
60
61	Vite + React — scaffolds with the official Vite tool and installs the latest
62	React, Tailwind, Framer Motion, and Lucide (versions are intentionally not pinned, so
63	each deck starts on current tooling), then layers the `App → Deck → Slide` architecture:
64
65	```bash
66	bash scripts/new-react-deck.sh <deck-name> [target-dir] [--no-install]
67	cd <deck-name> && npm run dev
68	```
69
70	After scaffolding, read the matching track reference for how slides are structured and how
71	to add/reorder them, then build the content.
72
73	## Files in this skill
74
75	- `references/design-system.md` — projection rules, typography floor, layout recipes,
76	motion, palette. The core; consult for any content/design work.
77	- `references/html-track.md` — plain-HTML deck structure, template internals, adding slides.
78	- `references/react-track.md` — Vite+React architecture, slide ordering, Tailwind wiring.
79	- `references/export-pdf.md` — PDF export options and speaker-notes convention.
80	- `scripts/new-html-deck.sh` — scaffold a plain-HTML deck.
81	- `scripts/new-react-deck.sh` — scaffold a Vite + React deck.
82	- `scripts/export-deck-pdf.py` — export a deck to a content-comp

People who liked this also viewed

6 picks

Type