Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions bolt-slides/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# Bolt slides skill

A Bolt skill that builds a premium, **responsive React presentation deck** — classic
paged slides you present one at a time, with a Slidev-style floating dock + thumbnail
rail, click-builds, auto-play, annotation, and presenter mode — but each slide is a
responsive web layout (no fixed canvas, no clipping) built from a rich component
library.

## The skill

This repo **is** the running app. The authoring guide lives at
[`.bolt/skills/slides.md`](./.bolt/skills/slides.md); the app itself sits at the repo
root — a complete Vite + React deck: the paged engine + chrome (`src/deck/`), ~14
components (`src/components/`: Bento, Split, StatGrid, Comparison, Tabs, Accordion,
Timeline, CodeWindow, BrowserFrame, SpotlightCard, charts, CountUp, TiltCard,
Marquee, …), and the token-driven theme (`src/styles/`). The engine is left as-is;
only the `:root` token block and the slides in `src/App.tsx` are authored per deck.

## Add it in Bolt

1. In Bolt's **Add skill from GitHub**, paste this repo's URL —
`https://github.com/inkko44/bolt-slides-skill`.
2. The `slides` skill auto-discovers at `.bolt/skills/slides.md`.
3. Tell Bolt to use the `slides` skill and build a deck about your topic/brand.

## Run it locally

```bash
npm install
npm run dev
```

`npm run dev` opens the deck at `/`. Re-theme everything by editing one `:root` block
in `src/styles/tokens.css`.
13 changes: 13 additions & 0 deletions bolt-slides/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Replace — your deck title</title>
<meta name="theme-color" content="#05070a" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading
Loading