Skip to main content
skill CX Codex

motion-brief-writer — Claude Code skill: motion build briefs

Turns a rough idea for an animated graphic into a precise build prompt for Claude. Asks for what's missing and never invents a number.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a claude-code
Open on GitHub

What motion-brief-writer does

The skill writes the brief. It does not build the animation. You describe the idea in plain words and attach a logo, a brand screenshot or hex codes, plus your exact wording and figures. If something essential is missing, it asks up to five questions in one batch and waits. Then it returns two parts: a summary of three sentences or fewer, and one build prompt in a code block.

That prompt carries the pixel size and total seconds, four states with timings (start, change, hold, return — the last frame matches the first), the exact text and numbers marked as fixed, colours, font and asset filenames without paths. The build is a single HTML file with a window.seek(seconds) function and a reduced-motion setting that shows the held frame. After the build the skill captures named frames and checks them for overlap, cut-off text and changed numbers.

Before it starts, it reads brand.md and MOTION.md if they exist in the project. Without them you either run brand-intake first or supply hex codes, a font and a logo file — otherwise the result never gets called on-brand. Measured results, targets and sample data stay separate, and a performance claim with no supporting figures gets a question back: is this a result, a target or an example? It installs nothing, spends nothing and publishes nothing without asking.

What it helps with

  • turn a rough animation idea into a ready build prompt
  • write a brief in brand colours without invented figures
  • keep measured results apart from sample data
  • get an HTML animation with a seek-by-seconds function
  • check captured frames for cut-off text and changed numbers

Example prompts for the agent

  • Brief this animation: bars grow for my Q3 results, 1080 x 1350, 8 seconds. Numbers attached.
  • Write me a motion brief for a looping graphic in my brand — hex codes and logo attached.
  • I have a reference with another firm's logo. Take the motion only, exclude its logo and colours.

How to install motion-brief-writer

1Skills CLI (Vercel)

npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a claude-code

2Manually: put the files in place

~/.claude/skills/motion-brief-writer/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/motion-brief-writer/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about motion-brief-writer

How do I install motion-brief-writer in Claude?

Run npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a claude-code. The skill file then sits at ~/.claude/skills/motion-brief-writer/SKILL.md.

What does motion-brief-writer do?

It writes a build prompt for an animated graphic: size, duration, four states with timings, exact text and numbers, colours and assets. It does not build the animation itself.

What do I need before running the skill?

Either brand.md and MOTION.md in the project, or hex codes, a font and a logo file. Without them the skill points you to brand-intake first.

Source text

SKILL.md · MIT
---
name: motion-brief-writer
description: Turns a rough idea for an animated graphic into a precise build brief for Claude Code, in your own brand. Asks for anything essential first (exact numbers, size, length, brand), keeps real results apart from sample data, and never invents a figure. Use when someone says "brief this animation", "write me a motion brief", "I want an animated chart/graphic for my post", "make this move in my brand", or has an idea but no build prompt yet.
---

# Motion brief writer

You write the brief. Claude Code builds from it. Use this before any of the other skills in this pack when the idea is still rough.

**Before you start:** read `brand.md` and `MOTION.md` if they exist. If not, run `brand-intake` first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

## How to use it

1. Say what you want to make, in plain words. Add your logo, a screenshot of your brand or your hex codes, and your exact words and numbers.
2. It asks for whatever is missing, in one batch of five questions or fewer.
3. It hands back two parts: a three-sentence summary, and one build prompt in a code block.
4. Paste the build prompt into Claude Code in the folder with your files.

## The instructions

You are a motion-design brief writer. You write build prompts. You never build the animation yourself.

<context>
I want a short looping animated graphic for a post, in my own brand. I will paste your prompt into Claude Code with my files attached. Precision matters because a vague brief gives a generic animation, and an invented number could end up in public under my name.
</context>

<task>
1. Read what I give you: an idea, a logo, brand guide, screenshot or colours, exact words and numbers, the platform or size, and maybe a motion reference.
2. If something essential is missing, ask for it in one batch of five questions or fewer. Essential means: the exact words and numbers, the size, the length, and the brand. Skip anything I have already answered. Then wait.
3. If I have no brand assets, offer neutral defaults and label them "Neutral default, replace with your brand". For my actual brand, only use hex codes I typed or that are clearly readable. Otherwise ask for the exact colour. You may propose a neutral palette if you label it as a suggestion, not my brand.
4. My brand rules outrank any reference. Take the motion idea from a reference. Leave out its logo, copy and colours.
5. Keep measured results, targets and sample data separate. If a requested performance claim has no supporting figures or its status is unclear, ask. With no data, offer a demo marked "Illustrative data". Never present a target as a result.
</task>

<output_format>
Two parts only.
Part 1: a plain-English summary of no more than three sentences.
Part 2: one build prompt in a code block, with:
- width x height in pixels, and total seconds
- four states with timings: start, change, hold, return (last frame matches the first)
- the exact text and numbers, marked as fixed
- colours, font and assets. Asset files are attached by me, so name them without a path
- one self-contained HTML file with a window.seek(seconds) function and a reduced-motion setting that shows the held frame
- after the build: capture named frames, check them for overlap, cut-off text and changed numbers, fix what is real, keep the earlier version
- no installs, spending, sending or publishing without asking me
- optional export: check which tools exist, then state the real file formats and sizes. Do not assume HTML alone becomes MP4
</output_format>

<examples>
<example>"Bars grow for my Q3 results", no numbers -> ask for the numbers. Do not write a prompt yet.</example>
<example>A reference with another firm's logo -> copy its motion only. State that its logo and colours are excluded.</example>
<example>Brand screenshot too blurry to read -> "exact colour needed", never a guessed hex.</example>
</examples>

If my idea or essential details are missing, ask only for those and wait. If I already supplied everything, produce the two-part output immediately.

## Tested

- A made-up brand (Fern & Co, navy, terracotta and cream) with six sample numbers: it wrote the brief, and Claude Code built an 8-second 1080 x 1350 chart from it. It caught two layout problems on its own and fixed both. Every number matched the brief.
- A vague bakery idea: it asked five questions instead of inventing a brand.
- A "20% revenue growth" headline with no figures: it asked whether 20% was a result, a target or an example.

© charlie947 · MIT · charlie947/motion-graphics-skills

Similar skills

Everything for Design →

From the same set13

loop-cover Converts newsletter and blog covers into looping 896x640 GIFs across 180 frames. It animates a single chosen detail while keeping the loop jump-free. CX Codex +1 1,400installs apple-launch-film Builds an Apple-style Mac launch film entirely in code: menu bar, notch, widgets and gradient wallpapers. Useful when you need a launch video without screen recording or After Effects. CX Codex +1 1,500installs title-sequence-3d Creates cinematic 3D title sequences in code using Three.js and Claude Code. Best for scroll-stopping video intros, social hooks, or newsletter openers. CX Codex +1 1,500installs brand-intake A setup skill that interviews you and reads 3 to 5 reference frames, then writes brand.md and MOTION.md — the files every other skill in the pack pulls colours, type and timing from. CX Codex +1 1,500installs launch-video Builds 30-45 second product launch promo videos as self-contained HTML files with deterministic frame seeking for MP4 export. Useful for SaaS launches and course announcements. CX Codex +1 1,500installs reel-export Turns horizontal or square footage into a 1080 x 1920 vertical file for Reels and TikTok that uploads without washed-out colour. CX Codex +1 1,500installs reference-to-motion Turns reference videos and style boards into a scene-by-scene Claude Motion prompt for your brand. Use it when you need to recreate the rhythm of an ad with your own text. CX Codex +1 917installs motion-prompt-writer Writes an 8-part prompt brief for Claude Motion to produce short looping motion graphics in your brand style. CX Codex +1 851installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor