simonparisot

Deck Motion — Development skill for Claude Code

Development community

A Claude Code skill for animated web presentations that behave like slides.

How to install Deck Motion

This entry records only its repository, not the path inside it, so there is no exact command to give. Open simonparisot/deck-motion and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Deck Motion does

A Claude Code skill for animated web presentations that behave like slides. No dependencies, no build.

Alternatives in Development

HTML Ppt Skill — HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML present 8.1k ★
Petdex — A public gallery of animated pets for Codex, Claude Code, DeepSeek Harness, Hermes, OpenCode, Gemini CLI, and 4k ★
Fidelity — Measure how faithfully a clone reproduces a site — pixel-diff plus motion-fidelity into one 0-100 score, a let 3.6k ★

README

deck-motion

A [Claude Code](https://claude.com/claude-code) skill for building animated web presentations that behave like slides.

The goal: a deck with the finish of a motion design and the flexibility of slides. No dependencies, no build, one file to open. You drive it from the keyboard during a 40 minute talk, or let it run on its own on a lobby screen.

Demo

**[Open a full one-hour plenary deck](https://simonparisot.github.io/deck-motion/demo/)**

Twenty-six screens for the annual seminar of a fintech that does not exist: an animated map of France, a Sankey diagram of the underwriting funnel, speaker notes, a contents panel, a timer. Every figure comes from one file.

It was generated from [a single preparation note](docs/demo/sources/brief-seminaire.md), the kind anyone writes before a talk. That is the whole point of the skill: you write the substance, it builds the form, and it applies the editorial limits in `references/writing.md` while doing it.

The deck and the note are in French, the skill is in English. Source in [`docs/demo/`](docs/demo/).

Install

git clone https://github.com/simonparisot/deck-motion.git ~/.claude/skills/deck-motion

That is all. The skill loads itself when a request calls for it, or on `/deck-motion`.

Try it without Claude

The template stands on its own:

cp -r ~/.claude/skills/deck-motion/template my-deck
cd my-deck && open index.html

`→` moves one step then one slide, `N` opens the speaker notes, `S` the contents, `B` blacks the screen out, `F` goes full screen.

What is in it


`template/`	A deck that works, to copy and fill. All the content lives in `data.js`.
`references/writing.md`	Read this first. What goes on a slide that backs a talk, and what does not.
`references/architecture.md`	The fixed stage, a slide's lifecycle, the two modes, the tempo.
`references/slides.md`	Writing a slide, the drawing helpers, the SVG traps.
`references/talks.md