The /brag skill, the exact setup, and a separate Claude motion-design example

Built a website or app with an AI coding agent? /brag is an open-source skill that reads your project and creates a short launch video with motion, music, and share copy. It is meant to help you show what you built, not replace your actual website or guarantee that every output will look like a professional motion designer’s work.

Start here: Brag on GitHub

Important distinction: This motion-design post by Stephan Livera describes a direct prompt to Claude Opus 5.5.

What you need

• A website or app project on your computer. A project with strong visuals and a clear feature gives the skill more to work with.
• Claude Code, or another coding agent that supports Agent Skills.
• For the classic /brag workflow: Node.js 22+, FFmpeg on your PATH, and the Hyperframes CLI. The newer /brag-slim route used automatically with Claude Opus 5.5 does not use Hyperframes. Source: repository README.

The skill is open source. Do not assume that running a coding model or rendering the video is free; that depends on your own setup.

Step 1 — Install the skill in Claude Code

Open Claude Code. Enter these inside Claude Code, one at a time:

/plugin marketplace add latent-spaces/brag
/plugin install brag@brag

Then open the local project you want to make a video for. The skill’s normal workflow reads the project files directly, so you do not need to paste a live URL or supply screenshots for a local project. Source: /brag instructions.

Using another agent? The repository also documents this installer:

npx skills add <https://github.com/latent-spaces/brag> --skill brag

Source: installation instructions.

Step 2 — Decide what the video should show

Before running the skill, identify one feature people can understand immediately. For example: a product splitting apart as someone scrolls, a music website playing a song, or a before-and-after design transformation.

Write one sentence for each: