@honeydeck/honeydeck 0.2.0 → 0.3.0

package/Readme.md

@@ -30,6 +30,7 @@ Decks are plain MDX files separated into slides with `---`; see the first deck e
 - [Presenter mode](docs/presenter-mode.md) - notes, presenter window, sync, and mobile behavior
 - [PDF export](docs/pdf-export.md) - options, color modes, and step handling
 - [Local development](docs/local-development.md) - running Honeydeck from this repository
+- [Skills](docs/skills.md) - optional agent skills for authoring, writing, and migration help
 - [Slidev migration](docs/slidev-migration.md) - moving from Slidev with the bundled agent skill
 
 ## Common commands

package/docs/deeper-dive.md

@@ -362,18 +362,11 @@ type LayoutProps<F = Record<string, unknown>> = {
 
 ## Agent skills
 
-Honeydeck ships optional agent skills:
-
-- `honeydeck` for Honeydeck-specific MDX and CLI guidance
-- `presentation-writing` for help writing strong slide narratives
-- `slidev-migration` for moving decks from Slidev to Honeydeck
-
-`honeydeck init` can open the same interactive skills installer as `honeydeck skill`.
+Honeydeck ships optional agent skills for Honeydeck authoring, presentation writing, and Slidev migration. `honeydeck init` can open the same interactive skills installer as `honeydeck skill`.
 
 ```bash
 honeydeck skill
-npx skills add <honeydeck-repo-url> --copy
-npx skills add <honeydeck-repo-url> --copy --skill slidev-migration
 ```
 
+See [Skills](skills.md) for installation options and bundled skill details.
 Coming from Slidev? See the [Slidev migration guide](slidev-migration.md).

package/docs/getting-started.md

@@ -109,6 +109,7 @@ honeydeck skill               # install optional Honeydeck agent skills
 - [Presenter mode](presenter-mode.md) - notes, presenter window, sync, and mobile behavior
 - [PDF export](pdf-export.md) - options, color modes, and step handling
 - [Local development](local-development.md) - running Honeydeck from this repository
+- [Skills](skills.md) - optional agent skills for authoring, writing, and migration help
 - [Slidev migration](slidev-migration.md) - moving from Slidev with the bundled agent skill
 
 ## Learn inside a running deck

package/docs/skills.md

@@ -0,0 +1,65 @@
+# Skills
+
+Honeydeck ships optional agent skills that help AI coding agents work with presentations more reliably. They are plain skill files bundled with the `@honeydeck/honeydeck` package, so you can install them into a deck project or into your global agent setup.
+
+## Install skills
+
+New projects can open the skills installer during init:
+
+```bash
+npx @honeydeck/honeydeck init --name my-talk --install-skill
+```
+
+Existing projects can run:
+
+```bash
+honeydeck skill
+```
+
+Both commands open the same `skills` CLI flow, where you choose which Honeydeck skills to install, whether to install them for the project or globally, and which agents should receive them.
+
+You can also install from the Honeydeck repository:
+
+```bash
+npx skills add <honeydeck-repo-url> --copy
+npx skills add <honeydeck-repo-url> --copy --skill honeydeck
+npx skills add <honeydeck-repo-url> --copy --skill presentation-writing
+npx skills add <honeydeck-repo-url> --copy --skill slidev-migration
+```
+
+## Bundled skills
+
+| Skill | Use it for |
+| --- | --- |
+| `honeydeck` | Honeydeck-specific guidance for MDX decks, layouts, CSS imports, presenter notes, reveals, code steps, PDF export, and package docs. |
+| `presentation-writing` | Framework-agnostic help with audience, storyline, slide headlines, speaker notes, timing, and review heuristics. |
+| `slidev-migration` | Migrating Slidev decks to Honeydeck while preserving source files until you approve cleanup. |
+
+The `honeydeck` and `presentation-writing` skills work well together: one keeps the agent inside Honeydeck conventions, while the other improves the story and delivery. Add `slidev-migration` when you are converting an existing Slidev project.
+
+## How agents use them
+
+Skills do not change Honeydeck runtime behavior. They give your agent a focused local instruction file before it edits your deck.
+
+For example, an agent with the `honeydeck` skill should prefer:
+
+- `deck.mdx` as the entry file
+- exact `---` slide separators
+- slide frontmatter for layouts
+- explicit imports from `@honeydeck/honeydeck`
+- `<Notes>` for speaker notes
+- `<Reveal>`, `<RevealGroup>`, and code metadata for steps
+- `honeydeck pdf` for PDF export
+
+The skills also point agents back to the packaged docs and specs, so generated deck changes can stay aligned with the installed Honeydeck version.
+
+## Updating skills
+
+Skills are copied into the target scope when you install them. Re-run the installer after upgrading Honeydeck if you want the latest bundled instructions:
+
+```bash
+npm update @honeydeck/honeydeck
+honeydeck skill
+```
+
+Coming from Slidev? See the [Slidev migration guide](slidev-migration.md) for the migration-specific workflow.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@honeydeck/honeydeck",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"description": "MDX and React-based presentation framework for AI-friendly slide decks.",
 	"license": "MIT",
 	"publishConfig": {

package/skills/SPEC.md

@@ -19,3 +19,4 @@ Expected behavior:
 - The `slidev-migration` skill instructs agents to inspect existing Slidev projects, preserve source files until the user approves cleanup, initialize or merge Honeydeck starter files, migrate common Slidev syntax to Honeydeck MDX/React, and document unsupported or approximated features.
 - `honeydeck init` should offer to open the interactive skills installer for the generated project and make clear that accepting runs `npx skills add`.
 - `honeydeck init` and `honeydeck skill` should delegate bundled skill selection, scope selection, and agent selection to the same `npx skills add <honeydeck-package-source> --copy` flow.
+- `docs/skills.md` should document why and how to install the bundled skills, list the `honeydeck`, `presentation-writing`, and `slidev-migration` skills, and link to the Slidev migration guide for migration-specific details.

package/src/runtime/SPEC.md

@@ -121,10 +121,11 @@ Reference page routes intentionally do not encode slide or step. During one brow
 
 Shown in normal slide view only (not presenter/reference views).
 
-- Positioned bottom-left
+- Positioned bottom-center on narrow mobile screens and bottom-left from wider breakpoints
 - **Hidden by default** on desktop — appears on cursor hover near bottom edge
 - **Always visible** on mobile/tablet portrait
 - **Hidden by default** on mobile/tablet landscape — appears when the center tap zone is tapped, fades after roughly 3 seconds of idle time, and stays visible while being interacted with
+- On narrow mobile screens, stays within the viewport by wrapping controls into compact groups instead of extending past the screen edge
 - Contains:
   - Current slide number
   - Navigation arrows (step left/right)

package/src/runtime/components/NavBar.tsx

@@ -118,105 +118,117 @@ export function NavBar({
 	const canPrev = getPreviousStepRoute(route, navigationOptions) !== null;
 	const canNext = getNextStepRoute(route, navigationOptions) !== null;
 	const FullscreenIcon = isFullscreen ? MinimizeIcon : MaximizeIcon;
+	const groupClass =
+		"flex items-center gap-0.5 rounded-md bg-white/[0.04] px-0.5 py-0.5 sm:bg-transparent sm:p-0";
 
 	return (
 		// Hover zone — transparent, occupies the bottom strip
 		<div
-			className="honeydeck-nav-zone fixed bottom-0 left-0 right-0 h-20 z-50 flex items-end pointer-events-none"
+			className="honeydeck-nav-zone fixed bottom-0 left-0 right-0 h-28 z-50 flex items-end justify-center pointer-events-none sm:h-20 sm:justify-start"
 			data-honeydeck-no-swipe="true"
 		>
 			{/* Actual bar */}
-			<div className="honeydeck-nav-bar pointer-events-auto flex items-center gap-1 px-2 py-1.5 ml-6 mb-6 bg-black/70 backdrop-blur rounded-lg border border-white/10 shadow-[0_4px_24px_rgba(0,0,0,0.4)]">
-				{/* Prev step */}
-				<NavBarButton
-					onClick={goPrev}
-					label="Previous step (←)"
-					disabled={!canPrev}
-				>
-					<ChevronLeftIcon aria-hidden="true" size={16} />
-				</NavBarButton>
-
-				{/* Slide number */}
-				<span className="min-w-6 px-1 text-center font-sans text-sm tabular-nums text-white/60">
-					{route.slide}
-				</span>
-
-				{/* Next step */}
-				<NavBarButton
-					onClick={goNext}
-					label="Next step (→)"
-					disabled={!canNext}
-				>
-					<ChevronRightIcon aria-hidden="true" size={16} />
-				</NavBarButton>
-
-				<NavBarDivider />
-
-				{/* Overview */}
-				<NavBarButton
-					onClick={onToggleOverview}
-					label="Overview (o)"
-					active={isOverview}
-				>
-					<LayoutGridIcon aria-hidden="true" size={14} />
-				</NavBarButton>
-
-				{/* Layouts reference */}
-				<NavBarButton
-					onClick={() => openReference(route)}
-					label="Layouts reference"
-				>
-					<BookOpenTextIcon aria-hidden="true" size={16} />
-				</NavBarButton>
-
-				{/* Docs website */}
-				<NavBarButton onClick={openDocsWebsite} label="Docs website">
-					<ExternalLinkIcon aria-hidden="true" size={15} />
-				</NavBarButton>
-
-				{/* Presenter mode */}
-				{route.view !== "presenter" && (
+			<div className="honeydeck-nav-bar pointer-events-auto mx-2 mb-2 flex max-w-[calc(100vw-1rem)] flex-wrap items-center justify-center gap-1 rounded-lg border border-white/10 bg-black/70 px-1.5 py-1.5 shadow-[0_4px_24px_rgba(0,0,0,0.4)] backdrop-blur sm:mx-0 sm:ml-6 sm:mb-6 sm:max-w-none sm:flex-nowrap sm:justify-start sm:gap-1 sm:px-2">
+				<div className={groupClass}>
+					{/* Prev step */}
 					<NavBarButton
-						onClick={() => openPresenter(route)}
-						label="Presenter mode (p)"
+						onClick={goPrev}
+						label="Previous step (←)"
+						disabled={!canPrev}
 					>
-						<PresentationIcon aria-hidden="true" size={16} />
+						<ChevronLeftIcon aria-hidden="true" size={16} />
 					</NavBarButton>
-				)}
 
-				{/* Fullscreen */}
-				<NavBarButton onClick={toggleFullscreen} label="Fullscreen (f)">
-					<FullscreenIcon aria-hidden="true" size={16} />
-				</NavBarButton>
+					{/* Slide number */}
+					<span className="min-w-6 px-1 text-center font-sans text-sm tabular-nums text-white/60">
+						{route.slide}
+					</span>
 
-				{showTextSelectionToggle && onToggleTextSelection && (
+					{/* Next step */}
 					<NavBarButton
-						onClick={onToggleTextSelection}
-						label={
-							isTextSelectionEnabled
-								? "Disable slide text selection"
-								: "Enable slide text selection"
-						}
-						active={isTextSelectionEnabled}
+						onClick={goNext}
+						label="Next step (→)"
+						disabled={!canNext}
 					>
-						<TextSelectIcon aria-hidden="true" size={16} />
+						<ChevronRightIcon aria-hidden="true" size={16} />
 					</NavBarButton>
-				)}
+				</div>
 
-				<NavBarDivider />
+				<div className="hidden sm:block">
+					<NavBarDivider />
+				</div>
 
-				{isZoomed && onResetZoom && (
-					<NavBarButton onClick={onResetZoom} label="Reset zoom">
-						<RotateCcwIcon aria-hidden="true" size={16} />
+				<div className={groupClass}>
+					{/* Overview */}
+					<NavBarButton
+						onClick={onToggleOverview}
+						label="Overview (o)"
+						active={isOverview}
+					>
+						<LayoutGridIcon aria-hidden="true" size={14} />
+					</NavBarButton>
+
+					{/* Layouts reference */}
+					<NavBarButton
+						onClick={() => openReference(route)}
+						label="Layouts reference"
+					>
+						<BookOpenTextIcon aria-hidden="true" size={16} />
 					</NavBarButton>
-				)}
-
-				{/* Color mode */}
-				<ColorModeCycleButton
-					colorMode={colorMode}
-					onSetColorMode={onSetColorMode}
-					className={navBarButtonClass()}
-				/>
+
+					{/* Docs website */}
+					<NavBarButton onClick={openDocsWebsite} label="Docs website">
+						<ExternalLinkIcon aria-hidden="true" size={15} />
+					</NavBarButton>
+
+					{/* Presenter mode */}
+					{route.view !== "presenter" && (
+						<NavBarButton
+							onClick={() => openPresenter(route)}
+							label="Presenter mode (p)"
+						>
+							<PresentationIcon aria-hidden="true" size={16} />
+						</NavBarButton>
+					)}
+				</div>
+
+				<div className="hidden sm:block">
+					<NavBarDivider />
+				</div>
+
+				<div className={groupClass}>
+					{/* Fullscreen */}
+					<NavBarButton onClick={toggleFullscreen} label="Fullscreen (f)">
+						<FullscreenIcon aria-hidden="true" size={16} />
+					</NavBarButton>
+
+					{showTextSelectionToggle && onToggleTextSelection && (
+						<NavBarButton
+							onClick={onToggleTextSelection}
+							label={
+								isTextSelectionEnabled
+									? "Disable slide text selection"
+									: "Enable slide text selection"
+							}
+							active={isTextSelectionEnabled}
+						>
+							<TextSelectIcon aria-hidden="true" size={16} />
+						</NavBarButton>
+					)}
+
+					{isZoomed && onResetZoom && (
+						<NavBarButton onClick={onResetZoom} label="Reset zoom">
+							<RotateCcwIcon aria-hidden="true" size={16} />
+						</NavBarButton>
+					)}
+
+					{/* Color mode */}
+					<ColorModeCycleButton
+						colorMode={colorMode}
+						onSetColorMode={onSetColorMode}
+						className={navBarButtonClass()}
+					/>
+				</div>
 			</div>
 		</div>
 	);