@open-slide/core 0.0.11 → 0.0.12

package/dist/design-CROQh0AA.js

@@ -0,0 +1,35 @@
+//#region src/design.ts
+function designToCssVars(d) {
+	return {
+		"--osd-bg": d.palette.bg,
+		"--osd-text": d.palette.text,
+		"--osd-accent": d.palette.accent,
+		"--osd-font-display": d.fonts.display,
+		"--osd-font-body": d.fonts.body,
+		"--osd-size-hero": `${d.typeScale.hero}px`,
+		"--osd-size-body": `${d.typeScale.body}px`,
+		"--osd-radius-md": `${d.radius.md}px`
+	};
+}
+function cssVarsToString(vars) {
+	return Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`).join("\n");
+}
+const defaultDesign = {
+	palette: {
+		bg: "#f7f5f0",
+		text: "#1a1814",
+		accent: "#6d4cff"
+	},
+	fonts: {
+		display: "Georgia, \"Times New Roman\", serif",
+		body: "-apple-system, BlinkMacSystemFont, \"Inter\", system-ui, sans-serif"
+	},
+	typeScale: {
+		hero: 168,
+		body: 36
+	},
+	radius: { md: 12 }
+};
+
+//#endregion
+export { cssVarsToString, defaultDesign, designToCssVars };

package/dist/{dev-B3JzCYn7.js → dev-R2we2iaF.js}

@@ -1,4 +1,5 @@
-import { createViteConfig } from "./config-LZM903FE.js";
+import "./design-CROQh0AA.js";
+import { createViteConfig } from "./config-CVqRAagl.js";
 import { createServer, mergeConfig } from "vite";
 
 //#region src/cli/dev.ts

package/dist/index.d.ts

@@ -1,6 +1,53 @@
-import { OpenSlideConfig } from "./config-SXL5qIl6.js";
-import { ComponentType } from "react";
+import { OpenSlideConfig } from "./config-DweCbRkQ.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CSSProperties, ComponentType, HTMLAttributes } from "react";
 
+//#region src/app/components/image-placeholder.d.ts
+type ImagePlaceholderProps = {
+  hint: string;
+  width?: number;
+  height?: number;
+  style?: CSSProperties;
+  className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'>;
+declare function ImagePlaceholder({
+  hint,
+  width,
+  height,
+  style,
+  className,
+  ...rest
+}: ImagePlaceholderProps): react_jsx_runtime0.JSX.Element;
+
+//#endregion
+//#region src/design.d.ts
+type DesignPalette = {
+  bg: string;
+  text: string;
+  accent: string;
+};
+type DesignFonts = {
+  display: string;
+  body: string;
+};
+type DesignTypeScale = {
+  hero: number;
+  body: number;
+};
+type DesignRadius = {
+  md: number;
+};
+type DesignSystem = {
+  palette: DesignPalette;
+  fonts: DesignFonts;
+  typeScale: DesignTypeScale;
+  radius: DesignRadius;
+};
+declare function designToCssVars(d: DesignSystem): Record<string, string>;
+declare function cssVarsToString(vars: Record<string, string>): string;
+declare const defaultDesign: DesignSystem;
+
+//#endregion
 //#region src/app/lib/sdk.d.ts
 type Page = ComponentType;
 type SlideMeta = {
@@ -9,7 +56,11 @@ type SlideMeta = {
 type SlideModule = {
   default: Page[];
   meta?: SlideMeta;
+  design?: DesignSystem;
+  notes?: (string | undefined)[];
 };
 declare const CANVAS_WIDTH = 1920;
-declare const CANVAS_HEIGHT = 1080; //#endregion
-export { CANVAS_HEIGHT, CANVAS_WIDTH, OpenSlideConfig, Page, SlideMeta, SlideModule };
+declare const CANVAS_HEIGHT = 1080;
+
+//#endregion
+export { CANVAS_HEIGHT, CANVAS_WIDTH, DesignFonts, DesignPalette, DesignRadius, DesignSystem, DesignTypeScale, ImagePlaceholder, ImagePlaceholderProps, OpenSlideConfig, Page, SlideMeta, SlideModule, cssVarsToString, defaultDesign, designToCssVars };

package/dist/index.js

@@ -1,6 +1,115 @@
+import { cssVarsToString, defaultDesign, designToCssVars } from "./design-CROQh0AA.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/app/components/image-placeholder.tsx
+function ImagePlaceholder({ hint, width, height, style, className,...rest }) {
+	const dims = width && height ? `${width} × ${height}` : null;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-slide-placeholder": hint,
+		"data-placeholder-w": width,
+		"data-placeholder-h": height,
+		role: "img",
+		"aria-label": hint,
+		style: {
+			position: "relative",
+			width: width ?? "100%",
+			height: height ?? "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexDirection: "column",
+			gap: 14,
+			border: "1px dashed rgba(120, 120, 130, 0.35)",
+			borderRadius: 12,
+			background: "linear-gradient(135deg, rgba(120,120,130,0.06) 0%, rgba(120,120,130,0.02) 50%, rgba(120,120,130,0.06) 100%)",
+			color: "rgba(90, 90, 100, 0.7)",
+			fontFamily: "-apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", system-ui, sans-serif",
+			textAlign: "center",
+			padding: 24,
+			boxSizing: "border-box",
+			overflow: "hidden",
+			...style
+		},
+		className,
+		children: [/* @__PURE__ */ jsx(PlaceholderIcon, {}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				gap: 6,
+				maxWidth: "85%"
+			},
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 11,
+						fontWeight: 600,
+						letterSpacing: "0.14em",
+						textTransform: "uppercase",
+						opacity: .55
+					},
+					children: "Image"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 16,
+						fontWeight: 500,
+						lineHeight: 1.4,
+						color: "rgba(60, 60, 70, 0.85)"
+					},
+					children: hint
+				}),
+				dims && /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 11,
+						fontVariantNumeric: "tabular-nums",
+						fontFamily: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
+						opacity: .5,
+						marginTop: 2
+					},
+					children: dims
+				})
+			]
+		})]
+	});
+}
+function PlaceholderIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "32",
+		height: "32",
+		viewBox: "0 0 32 32",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		style: { opacity: .55 },
+		role: "img",
+		"aria-label": "image placeholder",
+		children: [
+			/* @__PURE__ */ jsx("title", { children: "image placeholder" }),
+			/* @__PURE__ */ jsx("rect", {
+				x: "4",
+				y: "6",
+				width: "24",
+				height: "20",
+				rx: "2.5"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "11",
+				cy: "13",
+				r: "2"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M4 22l7-7 6 6 4-4 7 7" })
+		]
+	});
+}
+
+//#endregion
 //#region src/app/lib/sdk.ts
 const CANVAS_WIDTH = 1920;
 const CANVAS_HEIGHT = 1080;
 
 //#endregion
-export { CANVAS_HEIGHT, CANVAS_WIDTH };
+export { CANVAS_HEIGHT, CANVAS_WIDTH, ImagePlaceholder, cssVarsToString, defaultDesign, designToCssVars };

package/dist/{preview-UikovHEt.js → preview-CU4zSyGp.js}

@@ -1,4 +1,5 @@
-import { createViteConfig } from "./config-LZM903FE.js";
+import "./design-CROQh0AA.js";
+import { createViteConfig } from "./config-CVqRAagl.js";
 import { mergeConfig, preview as preview$1 } from "vite";
 
 //#region src/cli/preview.ts

package/dist/sync-3oqN1WyK.js

@@ -0,0 +1,139 @@
+import chalk from "chalk";
+import { cp, lstat, mkdir, readFile, readdir, readlink, rm, symlink } from "node:fs/promises";
+import path from "node:path";
+import { createHash } from "node:crypto";
+import { existsSync } from "node:fs";
+
+//#region src/cli/sync.ts
+async function detectSkillsDrift(skillsDir) {
+	if (!existsSync(skillsDir)) return [];
+	const cwd = process.cwd();
+	const agentsSkillsDir = path.join(cwd, ".agents", "skills");
+	const skillNames = (await readdir(skillsDir, { withFileTypes: true })).filter((e) => e.isDirectory()).map((e) => e.name).sort();
+	const results = [];
+	for (const name of skillNames) {
+		const src = path.join(skillsDir, name);
+		const dst = path.join(agentsSkillsDir, name);
+		const srcHash = await hashDir(src);
+		const dstHash = existsSync(dst) ? await hashDir(dst) : null;
+		let status;
+		if (dstHash === null) status = "added";
+		else if (dstHash !== srcHash) status = "updated";
+		else status = "unchanged";
+		results.push({
+			name,
+			status
+		});
+	}
+	return results;
+}
+async function syncSkills(skillsDir, opts = {}) {
+	const { dryRun = false } = opts;
+	if (!existsSync(skillsDir)) throw new Error(`Built-in skills directory missing at ${skillsDir}. The @open-slide/core package may be corrupt — try reinstalling.`);
+	const cwd = process.cwd();
+	const agentsSkillsDir = path.join(cwd, ".agents", "skills");
+	const claudeSkillsDir = path.join(cwd, ".claude", "skills");
+	const results = await detectSkillsDrift(skillsDir);
+	if (results.length === 0) {
+		process.stdout.write(chalk.yellow("No skills found to sync.\n"));
+		return;
+	}
+	for (const { name, status } of results) {
+		const src = path.join(skillsDir, name);
+		const dst = path.join(agentsSkillsDir, name);
+		if (dryRun) continue;
+		if (status === "unchanged") {
+			await ensureClaudeSymlink(claudeSkillsDir, name);
+			continue;
+		}
+		await mkdir(path.dirname(dst), { recursive: true });
+		if (existsSync(dst)) await rm(dst, {
+			recursive: true,
+			force: true
+		});
+		await cp(src, dst, { recursive: true });
+		await ensureClaudeSymlink(claudeSkillsDir, name);
+	}
+	printSummary(results, dryRun);
+}
+async function ensureClaudeSymlink(claudeSkillsDir, name) {
+	await mkdir(claudeSkillsDir, { recursive: true });
+	const linkPath = path.join(claudeSkillsDir, name);
+	const target = path.join("..", "..", ".agents", "skills", name);
+	if (existsSync(linkPath)) try {
+		const stat = await lstat(linkPath);
+		if (stat.isSymbolicLink()) {
+			const current = await readlink(linkPath);
+			if (current === target) return;
+		}
+		await rm(linkPath, {
+			recursive: true,
+			force: true
+		});
+	} catch {
+		await rm(linkPath, {
+			recursive: true,
+			force: true
+		});
+	}
+	try {
+		await symlink(target, linkPath, "dir");
+	} catch (err) {
+		const code = err.code;
+		if (code === "EPERM" || code === "EEXIST") {
+			const absoluteTarget = path.resolve(claudeSkillsDir, target);
+			await cp(absoluteTarget, linkPath, { recursive: true });
+		} else throw err;
+	}
+}
+async function hashDir(dir) {
+	const hash = createHash("sha256");
+	const files = await collectFiles(dir);
+	files.sort();
+	for (const rel of files) {
+		const abs = path.join(dir, rel);
+		const data = await readFile(abs);
+		hash.update(rel);
+		hash.update("\0");
+		hash.update(data);
+		hash.update("\0");
+	}
+	return hash.digest("hex");
+}
+async function collectFiles(dir, prefix = "") {
+	const out = [];
+	const entries = await readdir(dir, { withFileTypes: true });
+	for (const entry of entries) {
+		const rel = prefix ? path.join(prefix, entry.name) : entry.name;
+		if (entry.isDirectory()) out.push(...await collectFiles(path.join(dir, entry.name), rel));
+		else if (entry.isFile()) out.push(rel);
+	}
+	return out;
+}
+function printSummary(results, dryRun) {
+	const symbols = {
+		added: chalk.green("+"),
+		updated: chalk.yellow("~"),
+		unchanged: chalk.dim("=")
+	};
+	const labels = {
+		added: chalk.green("added"),
+		updated: chalk.yellow("updated"),
+		unchanged: chalk.dim("unchanged")
+	};
+	const header = dryRun ? chalk.bold("Dry run — no files written:") : chalk.bold("Synced built-in skills:");
+	process.stdout.write(`${header}\n`);
+	for (const { name, status } of results) process.stdout.write(`  ${symbols[status]} ${name} ${chalk.dim(`(${labels[status]})`)}\n`);
+	const counts = results.reduce((acc, { status }) => {
+		acc[status] += 1;
+		return acc;
+	}, {
+		added: 0,
+		updated: 0,
+		unchanged: 0
+	});
+	process.stdout.write(chalk.dim(`\n${counts.added} added, ${counts.updated} updated, ${counts.unchanged} unchanged.\n`));
+}
+
+//#endregion
+export { detectSkillsDrift, syncSkills };

package/dist/sync-B4eLo2H6.js

@@ -0,0 +1,3 @@
+import { detectSkillsDrift, syncSkills } from "./sync-3oqN1WyK.js";
+
+export { syncSkills };

package/dist/vite/index.d.ts

@@ -1,4 +1,4 @@
-import { OpenSlideConfig } from "../config-SXL5qIl6.js";
+import { OpenSlideConfig } from "../config-DweCbRkQ.js";
 import { InlineConfig } from "vite";
 
 //#region src/vite/config.d.ts

package/dist/vite/index.js

@@ -1,3 +1,4 @@
-import { createViteConfig } from "../config-LZM903FE.js";
+import "../design-CROQh0AA.js";
+import { createViteConfig } from "../config-CVqRAagl.js";
 
 export { createViteConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-slide/core",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Runtime and CLI for open-slide — write slides in slides/, we handle the rest.",
   "type": "module",
   "exports": {
@@ -20,6 +20,7 @@
     "bin.js",
     "dist",
     "src/app",
+    "skills",
     "README.md"
   ],
   "scripts": {

package/skills/apply-comments/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: apply-comments
+description: Apply pending @slide-comment markers written by the open-slide inspector tool. Use when the user asks to "apply comments", "process slide comments", "apply the inspector comments", or references markers left inside `slides/<id>/index.tsx`.
+---
+
+# Apply slide comments
+
+The open-slide editor has an inspector tool that lets the user click on a rendered page element and attach a textual comment (e.g. *"make this red"*, *"change to 'Open Slide Rocks'"*). Each comment is persisted as an in-source JSX marker inside `slides/<slideId>/index.tsx`.
+
+Your job: read those markers, perform the described edits, and delete the markers.
+
+> **Before making any page edit**, consult the **`slide-authoring`** skill — it is the technical reference for how `slides/<id>/index.tsx` is structured (canvas, type scale, palette, assets, file contract). A comment like *"make this bigger"* or *"change the accent colour"* should be applied in a way that stays consistent with those rules.
+
+## Marker format
+
+```
+{/* @slide-comment id="c-<8hex>" ts="<ISO>" text="<base64url(JSON)>" */}
+```
+
+- Always sits on its own line as the **first child inside** the JSX element it refers to (i.e. between that element's opening `>` and its other children). The marker is dropped *into* its target, not floated above it.
+- `text` is base64url-encoded JSON: `{"note": "...", "hint"?: "..."}`.
+- Detection regex (authoritative — use exactly this):
+
+  ```
+  /\{\/\*\s*@slide-comment\s+id="(c-[a-f0-9]+)"\s+ts="([^"]+)"\s+text="([A-Za-z0-9_\-]+={0,2})"\s*\*\/\}/g
+  ```
+
+## Procedure
+
+1. **Identify the target slide(s).**
+   - If the user names one (`example-slide`, `youbike-3-survey`, etc.), work on that single `slides/<slideId>/index.tsx`.
+   - If they say "all" or don't specify, scan every `slides/*/index.tsx`. Process each slide one at a time.
+
+2. **Read the file and find all markers.**
+   - Run the regex above against the whole file.
+   - For each match, base64url-decode `text` and `JSON.parse` it to get `{ note, hint? }`.
+   - Record each hit as `{ id, lineIndex (0-based), indent, note, hint }`.
+   - If there are no markers, tell the user and stop.
+
+3. **Understand each comment in context.**
+   - The targeted JSX element is the **enclosing** element of the marker — i.e. read upward from the marker line until you reach the unclosed JSX opening tag whose body the marker lives in. That element is the target. (For self-closing elements like `<img />`, the inspector hoists the marker to the nearest non-self-closing ancestor; in that case the comment usually refers to a child of the enclosing element rather than the enclosing element itself — use the `note` text to disambiguate.)
+   - Read enough surrounding code (parent element, sibling elements, inline styles) to apply the change faithfully. A comment inside a `<div>` with an inline `background` style usually refers to that element's styling, for example.
+   - If the `note` is ambiguous, do the smallest reasonable interpretation and mention the assumption in your summary.
+
+4. **Apply edits in reverse line order.**
+   - Sort markers by descending `lineIndex` and process one at a time, using the `Edit` tool.
+   - Processing top-down would invalidate line numbers for later markers as the file shrinks/grows.
+
+5. **Remove each marker after applying its edit.**
+   - Delete the entire marker line including its trailing `\n`.
+   - Never leave a marker behind. An un-removed marker signals a failure.
+
+6. **Verify.**
+   - After all edits, re-read the file and confirm zero remaining markers.
+   - Run `pnpm tsc --noEmit` and `pnpm biome check` (or `pnpm lint`). Fix any introduced errors.
+
+7. **Report.**
+   - Summarise: `N applied, 0 remaining` plus a one-line description of each change (including the slide id).
+
+## base64url decoding helper
+
+```js
+function decode(s) {
+  const pad = s.length % 4 === 0 ? '' : '='.repeat(4 - (s.length % 4));
+  return Buffer.from(s.replace(/-/g, '+').replace(/_/g, '/') + pad, 'base64').toString('utf8');
+}
+```
+
+You can run this inline via `node -e '...'` if you need to inspect a payload; otherwise just reason about the decoded string.
+
+## Edge cases
+
+- **Marker with no enclosing JSX element** (shouldn't happen — the inspector won't write one — but if you find one): delete it and note as orphan.
+- **Multiple markers stacked on consecutive lines inside the same element**: they all refer to that enclosing element. Apply them in source order but still delete each line individually.
+- **`_debugSource` used SWC instead of Babel**: not your problem — the marker line is authoritative.
+- **Comment asks for something outside the target element's scope** (e.g. "add a new page"): do the closest-reasonable edit and mention the scope expansion in your summary.
+- **Can't resolve the comment** (e.g. truly ambiguous, or the file changed shape such that the target element doesn't exist): leave the marker in place and report it as skipped. Don't guess.
+
+## Do not
+
+- Do not touch `package.json`, `open-slide.config.ts`, or files outside `slides/`.
+- Do not add dependencies.
+- Do not re-introduce markers or leave `TODO` breadcrumbs — the user already has a record in git.

package/skills/create-slide/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: create-slide
+description: Use this skill when the user wants to create, draft, author, or generate new slides / a presentation in this open-slide repo. Triggers on phrases like "make slides about X", "create a presentation", "draft slides for", "new slide", or when the user asks to add content under `slides/`. Do NOT use for editing the framework itself — only for authoring content inside `slides/<id>/`.
+---
+
+# Create a slide in open-slide
+
+This skill owns the **workflow** for drafting a new deck. The technical reference — file contract, 1920×1080 canvas, type scale, palette, layout, assets — lives in the **`slide-authoring`** skill. Read that skill whenever you need details on *how* a page is structured. This skill assumes you'll consult it before writing code.
+
+You only write files under `slides/<id>/`. Never modify `package.json`, `open-slide.config.ts`, or existing slides.
+
+## Step 1 — Pick a theme
+
+List files under `themes/`. If any theme markdown files exist (anything other than `README.md`), call `AskUserQuestion` with each theme id as an option plus a final **"no theme — design from scratch"** option.
+
+- If the user picks a theme: read `themes/<id>.md` end-to-end. The theme's palette, typography, layout, and Title/Footer components are now authoritative — copy them directly into the slide. In Step 2, you can skip the **topic & aesthetic** question (the theme already commits to one direction); still ask about page count, text density, and motion since those are independent of theme.
+- If the user picks "no theme", or `themes/` is empty (or contains only `README.md`): proceed to Step 2 unchanged.
+
+If you skip the aesthetic question because a theme was picked, restate the theme name in Step 2 so the user can correct course before you start writing.
+
+## Step 2 — Clarify requirements (MUST ask before writing code)
+
+**Before doing anything else, call `AskUserQuestion` to confirm the four key style decisions below.** These shape every downstream choice (layout, type scale, asset needs, motion code), so locking them in up front avoids rework. Only skip a question when the user's original message already gave an unambiguous answer for it — and if you skip, restate your assumption so they can correct it.
+
+Ask these four in a single `AskUserQuestion` call (multi-question form):
+
+1. **Topic & aesthetic** — what is this slide about, and what visual direction? Offer options like: minimal editorial, playful, corporate-clean, retro, brutalist, soft/pastel, dark neon. If they have no preference, propose one.
+2. **Page count** — rough length. Offer brackets: 3–5 (short), 6–10 (standard), 11–20 (deep dive), custom.
+3. **Text density per page** — how much copy lives on each page? Offer: minimal (one line / big number), light (heading + 2–3 bullets), standard (heading + 4–5 bullets or short paragraph), dense (multi-column / detailed). This directly drives type scale and layout.
+4. **Motion** — does the user want CSS/React animations and transitions, or a fully static deck? Offer: static (no motion), subtle (fades / entrance only), rich (keyframes, staggered reveals, looping visuals). If animated, plan to use CSS `@keyframes` / inline `style` + `useEffect`; no extra libraries.
+
+After those four, ask follow-ups **only if still unclear**: audience, any drafted outline/content, brand colors, required assets. Don't pad the conversation with questions already answered.
+
+## Step 3 — Pick a slide id
+
+Use **kebab-case**, short, descriptive. Examples: `rust-intro`, `q2-roadmap`, `team-offsite-2026`. Check `slides/` to avoid collisions.
+
+## Step 4 — Plan the structure
+
+Sketch the slide as a list of page roles before writing code. Common page types:
+
+| Role             | Purpose                                       |
+| ---------------- | --------------------------------------------- |
+| Cover            | Title + subtitle, strong visual               |
+| Agenda           | What's coming (3–5 items)                     |
+| Section divider  | Big label between chapters                    |
+| Content          | Heading + 2–5 bullets OR heading + one visual |
+| Big number       | One statistic the size of the canvas          |
+| Quote            | Pull-quote with attribution                   |
+| Comparison       | Two-column before/after or A vs B             |
+| Closing          | CTA, thanks, contact                          |
+
+**Rule of thumb**: one idea per page. If you're tempted to put two, split them.
+
+If the deck topic naturally calls for specific real images the user must supply (product screenshots, team photos, customer dashboards), plan where those go and use `<ImagePlaceholder>` from `@open-slide/core` — see the **Image placeholders** section in `slide-authoring`. Default is **no placeholders**: only insert one when a real image is genuinely required.
+
+## Step 5 — Commit to a visual direction
+
+Pick one coherent palette / type scale / aesthetic and hold it across every page. The full set of constraints (palette structure, type scale, padding, aesthetic options) lives in `slide-authoring` — apply it.
+
+If the user wants the slide to remain tweakable from the Design panel afterwards, declare a top-level `const design: DesignSystem = { … }` at the top of `index.tsx` (after imports) using the chosen palette / type scale, and reference `design.X` from inline styles. The "Design system" section of `slide-authoring` covers the format and available tokens.
+
+Consult the `frontend-design` skill for deeper aesthetic guidance if the user wants something bold.
+
+## Step 6 — Write `slides/<id>/index.tsx`
+
+Read the **`slide-authoring`** skill before writing — it covers the file contract, canvas rules, type scale, spacing, and asset imports, and it includes a starter template you can copy. Don't duplicate that knowledge here; use it.
+
+## Step 7 — Self-review
+
+Run the checklist in `slide-authoring` ("Self-review before finishing"). It covers structural correctness, layout discipline, and asset existence.
+
+## Step 8 — Hand off to the user
+
+Tell the user:
+
+- The slide id and file path you created.
+- That the dev server will hot-reload — they can open `http://localhost:5173/s/<id>` (or refresh the home page).
+- If dev isn't running: `pnpm dev` from the repo root.
+
+Don't run the dev server yourself unless asked.