Skip to content
cccskills
FreePublished on GitHub

motion-brief-writer

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.

The English summary is being prepared. Showing the original description.

charlie947/motion-graphics-skills428 stars(GitHub 428 + cccskills 0)

Run score Not tested

See how to install

Files included (1)

  • SKILL.md4.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code. Bars that become a line, a number that counts up, a before and after. Every value stays exactly as given. Use when someone says "animate my chart", "animated graph", "make my results move", "stat animation" or wants a data graphic that loops.

The English summary is being prepared. Showing the original description.

charlie947/motion-graphics-skills428Updated Oct 11, 2026

Rebuild an Apple-style Mac launch film entirely in code with Claude Code. A thin menu bar, the black notch growing into widgets one scene at a time, full-screen gradient wallpapers and one short caption per scene. No screen recording, no After Effects. Use when someone says "Apple-style launch", "Mac launch video", "notch animation", "make it look like an Apple keynote", "macOS UI launch film" or wants a product launch that looks like native Mac interface.

The English summary is being prepared. Showing the original description.

charlie947/motion-graphics-skills428Updated Oct 11, 2026

The setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your project, brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), plus a rule in CLAUDE.md so Claude reads them before it animates anything. Use at the start of any motion project, or when someone says "set up my brand", "brand intake", "build my motion design system", "make it look like my brand", "onboard me", "write my MOTION.md" or drops a batch of brand frames into chat.

The English summary is being prepared. Showing the original description.

charlie947/motion-graphics-skills428Updated Oct 11, 2026

Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. One sentence split across scenes, real product screens with slow camera moves, a typed prompt, a proof beat and a clear call to action. Use when someone says "launch video", "promo video for my product", "announce my course/cohort/offer", "make a launch reel" or "trailer for my product".

The English summary is being prepared. Showing the original description.

charlie947/motion-graphics-skills428Updated Oct 11, 2026

Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps. Only the one element you name moves, the loop is rotated so frame 1 shows the finished picture, and the seam is measured, not eyeballed. Use when someone says "animated cover", "make my cover move", "looping GIF cover", "newsletter cover GIF", "animate my thumbnail" or wants a cover that moves in the inbox without looking busy.

The English summary is being prepared. Showing the original description.

charlie947/motion-graphics-skills428Updated Oct 11, 2026

Make a 12-second looping milestone clip in code with Claude Code. Thousands of tiny points drift like a night sky, pull together into your real number (followers, subscribers, revenue, customers), a line draws underneath and the label settles in. Premium, not a party. Use when someone says "milestone video", "celebrate 10k followers", "animate my subscriber count", "number reveal", "particle number animation" or wants to mark a result on LinkedIn or Instagram.

The English summary is being prepared. Showing the original description.

charlie947/motion-graphics-skills428Updated Oct 11, 2026

See all skills by charlie947

Report a problem with this skill