Motion Feature — Design skill for Claude Code

motion-feature

A Claude Code skill that makes short product feature announcement videos: the product's own interface recreated in HTML/CSS and put in motion, a scripted cursor performing the gesture, camera moves, an end card, rendered to MP4 with its own soundtrack.

Nothing is screen-captured. That is what lets you fix one shot without reshooting, re-render in another format, and remake the film months later when the product has moved on.

Install

Clone it straight into the skills directory of the project where you want to use it:

git clone https://github.com/Saucemathis/motion-feature.git \
  /.claude/skills/motion-feature

From a downloaded zip, unzip it into that same place. Either way the folder must be named `motion-feature`.

Then ask Claude for a video on a feature, or type `/motion-feature`.

It can also live in `~/.claude/skills/` to be available in every project. The setup it writes stays per project, so one install can serve several products.

What it asks for, once

The first run holds a short intake and writes `.motion-feature/setup.md` in the project. After that it reads that file and never asks again. Run `/motion-feature setup`, or just say something changed, to reopen it.

1. Where the feature is explained. The written explanation, screenshots of the real screens, the exact labels, and a screen recording of the gesture when the feature is a tool. The recording is the piece people forget and the one that changes the film most: it shows what moves under the hand and everything that moves with it.
2. The design system. Tokens, the font files, the logo and wordmark as SVG. The film has to look like the product, not like a template.
3. The background the recreated window floats on, and the end card's ground.

Requirements

You do not have to work these out. On its first run the skill checks the machine, tells you what is missing and offers to install it for you. To see for yourself: