@atom63/slides 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -3
- package/package.json +10 -6
package/README.md
CHANGED
|
@@ -1,13 +1,33 @@
|
|
|
1
1
|
# @atom63/slides
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Write presentations as MDX — and let a coding agent draft them.**
|
|
4
|
+
|
|
5
|
+
A deck is a `.mdx` file: `---`-separated slides built from ~20 templates. Describe your talk to your coding agent; it writes the MDX. Then steer it in the browser — edit any slide as a form, switch its template, restyle with a one-line theme. The MDX stays the source of truth the whole way.
|
|
6
|
+
|
|
7
|
+
The same host-agnostic engine powers the Slides app in [OS63](https://os.atom63.io) and runs standalone anywhere React + Vite + Tailwind v4 do.
|
|
8
|
+
|
|
9
|
+
### The workflow
|
|
10
|
+
|
|
11
|
+
1. **Scaffold** — `npm create @atom63/deck my-talk` lays down a standalone deck project.
|
|
12
|
+
2. **Author with your agent** — point your coding agent at `src/deck.mdx` and the [deck-authoring skill](#author-with-a-coding-agent), describe the talk; it writes the MDX.
|
|
13
|
+
3. **Steer in the browser** — `npm run dev`, then Edit mode: tune any slide as a Form, switch its template.
|
|
14
|
+
4. **Theme in one line** — set `theme:` in frontmatter or pick one from the picker.
|
|
15
|
+
5. **Present** — keyboard nav, grid overview, presenter PiP.
|
|
16
|
+
|
|
17
|
+
Because a deck is just code, the parts machines are good at — layout, alignment, template choice — are an agent's job; the parts you care about — the argument, the words — stay yours.
|
|
4
18
|
|
|
5
19
|
- **Templates, not div soup** — ~20 composable slide templates (`CoverSlide`, `StatBento`, `HeroBento`, `SplitHalf`, `QuoteSlide`, `FullBleedSlide`, …) plus low-level primitives.
|
|
6
20
|
- **Token theming** — every surface reads `--theme-slide-*` (and base) custom properties; swap a token set to restyle a whole deck.
|
|
7
21
|
- **Batteries-included player** — keyboard nav, grid overview, presenter PiP, mobile layout, optional source view and password gate.
|
|
8
|
-
- **Introspectable** — a machine-readable `templateRegistry` describes every template's content slots
|
|
22
|
+
- **Introspectable** — a machine-readable `templateRegistry` describes every template's content slots, so coding agents, editors, and tooling know exactly what each slide accepts.
|
|
23
|
+
|
|
24
|
+
> Status: `0.4.x`, extracted from a monorepo. The API may shift before `1.0`.
|
|
25
|
+
|
|
26
|
+
## Author with a coding agent
|
|
27
|
+
|
|
28
|
+
Step 2 of the workflow is the point of the whole toolchain: **you don't hand-write JSX, you describe the talk.** A deck is plain MDX — `---`-separated slides importing templates from `@atom63/slides` — which is exactly the shape a coding agent (Claude Code, Cursor, …) writes well.
|
|
9
29
|
|
|
10
|
-
|
|
30
|
+
The **[deck-authoring skill](https://github.com/atom63/slides/tree/main/skill)** ([`skill/SKILL.md`](https://github.com/atom63/slides/tree/main/skill/SKILL.md)) packages everything the agent needs: the deck-file anatomy, the full template catalog with every prop and slot, the Swiss-design voice, and the anti-patterns to avoid. Point your agent at it (copy `SKILL.md` + `TEMPLATES.md` into your skills folder, or reference it directly), describe your talk, and it drafts `src/deck.mdx`. Then open the dev server and steer the result — every slide is editable as a Form, every template is swappable, every theme is one line.
|
|
11
31
|
|
|
12
32
|
## Install
|
|
13
33
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atom63/slides",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
},
|
|
13
13
|
"homepage": "https://github.com/atom63/slides/tree/main/packages/slides#readme",
|
|
14
14
|
"type": "module",
|
|
15
|
-
"description": "
|
|
15
|
+
"description": "Write presentations as MDX — a template grammar + token theming designed for coding agents to author decks, with a browser GUI to steer them.",
|
|
16
16
|
"keywords": [
|
|
17
17
|
"slides",
|
|
18
18
|
"presentation",
|
|
@@ -21,7 +21,11 @@
|
|
|
21
21
|
"deck",
|
|
22
22
|
"slideshow",
|
|
23
23
|
"tailwind",
|
|
24
|
-
"design-system"
|
|
24
|
+
"design-system",
|
|
25
|
+
"ai",
|
|
26
|
+
"agent",
|
|
27
|
+
"coding-agent",
|
|
28
|
+
"claude"
|
|
25
29
|
],
|
|
26
30
|
"publishConfig": {
|
|
27
31
|
"access": "public",
|
|
@@ -140,11 +144,11 @@
|
|
|
140
144
|
"typescript": "~5.8.3",
|
|
141
145
|
"vite": "^7.1.5",
|
|
142
146
|
"vitest": "^4.1.8",
|
|
143
|
-
"@atom63/
|
|
144
|
-
"@atom63/
|
|
147
|
+
"@atom63/tsconfig": "0.1.0",
|
|
148
|
+
"@atom63/biome-config": "0.1.0"
|
|
145
149
|
},
|
|
146
150
|
"scripts": {
|
|
147
|
-
"build": "node
|
|
151
|
+
"build": "node scripts/gen-theme-bundle.mjs && tsup",
|
|
148
152
|
"dev": "tsup --watch",
|
|
149
153
|
"test": "vitest run",
|
|
150
154
|
"typecheck": "tsc --noEmit",
|