I made an "evolving scene" presentation creation skill

Uh oh!

There was an error while loading. Please reload this page.

Notifications You must be signed in to change notification settings

Fork 0

Star 0

BranchesTags

Open more actions menu

Folders and files

NameName

Last commit message

Last commit date

Latest commit

History

56 Commits

56 Commits

.claude-plugin

.claude-plugin

.validator

.validator

docs/assets

docs/assets

openspec

openspec

public

public

scripts

scripts

skills/presentation

skills/presentation

src

src

.gitignore

.gitignore

LICENSE

LICENSE

README.md

README.md

eslint.config.js

eslint.config.js

index.html

index.html

package-lock.json

package-lock.json

package.json

package.json

tsconfig.app.json

tsconfig.app.json

tsconfig.json

tsconfig.json

tsconfig.node.json

tsconfig.node.json

vite.config.ts

vite.config.ts

vitest.config.ts

vitest.config.ts

Repository files navigation

and-scene is an Agent Skill that builds animated, morphing slide presentations directly into your project: you describe the presentation, the agent scaffolds a Vite/React app if needed, generates the steps, and verifies they render.

An evolving-scene presentation is not a stack of unrelated slides. It is one shared diagrammatic canvas where a stable set of entities morph across named steps: boxes appear, move, connect, collapse, and re-label as the presentation arc develops. The continuity between steps is the story.

This repo contains the plugin, the reusable scene kit source, and a worked reference presentation you can run locally. Plugin users do not need to clone this repo.

Demo

These are video previews. Click a preview to open the MP4.

How to make a presentation

Download the demo video

Evolution of the bicycle

This bicycle demo was made by Claude Code with Opus 4.8.

Download the bicycle demo video

Both demo videos were inspired by the original presentation. To run the bundled reference presentation locally, see Development.

Requirements

Claude Code or Codex with plugin support.

Node ^20.19.0 or >=22.12.0, plus npm, in the project where the presentation will live.

A Chromium browser for npm run verify and npm run inspect. After installing dependencies, run npx playwright install chromium if your environment does not already provide one.

Getting started

You use and-scene by installing its plugin and running its skill inside your project. The scene kit is copied into your project as source you own; see How the kit reaches your project.

1. Install the plugin

For Codex:

codex plugin marketplace add Codagent-AI/and-scene codex plugin add and-scene@and-scene

For Claude Code:

claude plugin marketplace add Codagent-AI/and-scene claude plugin install and-scene

1. Create a presentation

Invoke the skill in your project:

/and-scene:presentation

…or just ask in natural language (e.g. "create a presentation about …"). The skill interviews you one question at a time, scaffolds any missing infrastructure (stating the target and asking before it writes), generates the presentation, and self-verifies that it builds and renders.

1. Work on the result

Scaffolding gives your project a Vite + React app with the usual scripts:

npm run dev # http://localhost:5173

The dev server opens a landing page at / listing every presentation; each lives at its own route (/).

How the kit reaches your project

There is no npm install and-scene. The reusable scene kit (presentation-kit/, ~650 lines) is vendored — the skill copies it into your project as source you own and can edit, like shadcn/ui. You're meant to own its styling in your presentation or app.

Where the skill scaffolds

When your project is missing the presentation infrastructure, the skill resolves where to put a self-contained app, then states the target and asks you to confirm before writing:

Your project Scaffold location

Empty directory, or an existing standalone JS app (root package.json) Repository root (.)

Monorepo (workspaces, pnpm-workspace.yaml, or packages/ / apps/) Self-contained app under presentations/

Non-empty repo that is not a JS app (no root package.json — e.g. Python/Go/Rust) Self-contained app under presentation/

Already has the infrastructure Uses it in place; scaffolds only what's missing

Styling

The kit is BYO styles. It ships motion behavior, fixed-canvas layout plumbing, and stable DOM hooks such as data-node, data-node-part, data-accent, data-variant, and data-presentation-*; it does not ship a palette, font, card treatment, button style, or Tailwind dependency. Style each presentation with plain CSS, CSS modules, Tailwind, or whatever the host project chooses.

Controls

Each presentation lives at its own route (/). In a presentation:

→ / Space / PageDown — next step

← / PageUp — previous step

P — toggle present (title-only) ↔ browse (captions + table of contents). The step title shows at the top in both modes; browse adds the per-step caption and navigation along the bottom.

Updating

Updating has two layers: refresh the installed skill/plugin, then resync the vendored kit copy in each project that should receive kit fixes.

For Codex, refresh the marketplace snapshot:

codex plugin marketplace upgrade

For Claude Code:

claude plugin marketplace update and-scene claude plugin update and-scene@and-scene

Refreshing the plugin does not change a project's existing src/presentation-kit/ copy. The easiest way to pull kit fixes into a project is to ask the skill to "resync the scene kit".

If you prefer the raw command, run the sync script from the consuming project root. Replace with the directory that contains this skill's SKILL.md; in this repository that directory is skills/presentation/.

node /sync-kit.mjs # show what changed (exit 1 if drift) node /sync-kit.mjs --apply # rewrite the vendored copy to match

The script diffs the skill's bundled snapshot against your copy and rewrites it on --apply. Local edits show up as drift, like shadcn diff; target-only files are never deleted, so local-only additions survive. Review with git diff, re-apply any theming the update overwrote, then rebuild.

Scripts

Scaffolding adds these to your project:

Script What it does

npm run dev Vite dev server

npm run build Type-check (tsc -b) and production build

npm run preview Serve the production build

npm run verify Build + render-check every registered presentation

npm run inspect -- Capture screenshots for visual composition review

npm run test Vitest unit tests

npm run lint ESLint

verify builds the app, then launches a headless browser against a production preview and steps through every registered presentation, failing on any build error, console error, or uncaught page error. (It needs a Chromium browser — run npx playwright install chromium once.)

inspect builds the app, launches a production preview, and writes step screenshots to artifacts/presentation-inspection// so layouts can be checked for overflow, unintended overlap, and chrome collisions.

Tech

React 19 · TypeScript · Vite · motion for layoutId morph animations · lucide-react for glyphs. Styling is presentation-owned; Tailwind can be added by a host project, but it is not required by the kit.

Development

Run the reference app

npm install npm run dev # http://localhost:5173

The landing page at / lists every registered presentation. The bundled reference presentation — which itself explains how the skill builds a presentation — lives at:

http://localhost:5173/how-to-make-a-presentation

Run npm run verify to build and render-check every presentation, and npm run test for the unit tests.

Repository layout

src/ The reference app presentation-kit/ CANONICAL scene kit: Presentation, Stage, chrome, node primitives (Box, Arrow, Frame, …), navigation presentations/ index.ts Registry — one entry per presentation (slug → loader) / A self-contained presentation (entities/steps/Talk) Root.tsx, router.ts Zero-dependency pathname router + landing page scripts/verify.mjs Build + render verification (Playwright)

skills/presentation/ The agent skill SKILL.md The skill contract + procedure scaffold.ts Anchor detection + scaffold-target resolution templates/ bootstrap/ A full app shell, incl. a SNAPSHOT COPY of the kit, stamped into a fresh/empty project presentation/ A single-presentation template single-step/ A single-step template

Two copies of the kit, on purpose

src/presentation-kit/ is the canonical kit the reference app runs. skills/presentation/templates/bootstrap/src/presentation-kit/ is a snapshot the skill copies into your project. They are kept byte-identical (excluding tests) — when the canonical kit changes, the snapshot must change identically. skills/presentation/kitSnapshot.test.ts enforces this in npm run test; resync with node skills/presentation/sync-kit.mjs --apply.

About

An Agent Skill that builds animated, morphing slide presentations

Resources

Readme

License

MIT license

Uh oh!

There was an error while loading. Please reload this page.

Activity

Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks

Report repository

Releases

No releases published

Packages 0

Uh oh!

There was an error while loading. Please reload this page.

Contributors

Uh oh!

There was an error while loading. Please reload this page.

Languages

TypeScript 61.9%

JavaScript 29.6%

CSS 8.1%

HTML 0.4%