Skip to main content
skill CX Codex

motion-prompt-writer — Claude Code skill: how to install

Writes an 8-part prompt brief for Claude Motion to produce short looping motion graphics in your brand style.

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

What motion-prompt-writer does

The skill does not render animation files directly. Instead, it generates a complete 8-part prompt for Claude Motion: the bar, format, the one rule, look, motion, never, before you finish, and the scene. Parts 1 through 7 serve as a reusable brand brief, while part 8 defines the specific scene.

Input requires your brand assets, such as a website screenshot, a logo, or hex codes, alongside a plain-language description of one on-screen moment. If no brand details are supplied, the skill applies an Apple-style default with #F5F5F7 backgrounds and frosted glass panels. Hex codes are never guessed; they are extracted only from explicit text or readable images.

Missing essential values halt prompt generation. The skill will pause and ask up to 4 clarifying questions to verify numbers, exact copy, or dimensions before producing output.

What it helps with

  • generate an 8-part Claude Motion brief from brand assets
  • standardize reusable motion design rules across video clips
  • extract precise hex codes from screenshots without guesswork
  • define clean single-moment looping scenes with spring physics

Example prompts for the agent

  • write me a Motion prompt for a button that turns into a checkmark
  • turn this idea into a motion graphic using the colors from my website screenshot
  • make my motion brief for an interface counter update

How to install motion-prompt-writer

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about motion-prompt-writer

How to install motion-prompt-writer in Claude Code?

Run npx skills add charlie947/motion-graphics-skills --skill motion-prompt-writer -a claude-code. Alternatively, place the file at ~/.claude/skills/motion-prompt-writer/SKILL.md.

What does motion-prompt-writer do?

It translates video concepts into a structured 8-part Claude Motion brief. It organizes physics, format, and layout rules into a single code block ready for generation.

What happens if brand assets are missing?

The skill falls back to an Apple-style default featuring #F5F5F7 light backgrounds, frosted glass surfaces, and system typography.

Source text

SKILL.md · MIT
---
name: motion-prompt-writer
description: Write a complete 8-part Claude Motion prompt (The bar, Format, The one rule, Look, Motion, Never, Before you finish, The scene) for one short looping motion graphic, in your own brand. Takes your brand (a website screenshot, a logo, hex codes, or nothing for the Apple-style default) and one moment you want to show, in plain words. Use when someone says "write me a Motion prompt", "turn this idea into a motion graphic", "fill in the 8 parts" or "make my motion brief". Outputs parts 1 to 7 as a reusable brief and part 8 as the scene, in one paste-ready code block.
---

You write Claude Motion prompts in 8 parts. You never build the video yourself.

Parts 1 to 7 are the brief. They stay the same for every video in one brand.
Part 8 is the scene. It is the only part that changes.

<task>
1. Read what I give you: my brand (a website screenshot, a logo, hex codes or a brand guide), the moment I want to show, and maybe a size and length.
2. If something essential is missing, ask in one batch of four questions or fewer, then wait:
   - The moment: what changes on screen? (one thing, before and after)
   - The exact words and numbers on screen (they must be real, never invented).
   - The size: 1080x960 (newsletter or tile), 1080x1350 (LinkedIn 4:5), 1080x1920 (9:16 reel) or 1920x1080 (16:9).
   - The brand, only if I gave none. If I have none, use the Apple-style default below and say so.
   Skip anything I already answered.
3. Brand: take hex codes only from what I typed or what is clearly readable in my files. Never guess a hex code. If a colour is unclear, ask for it.
4. Write the scene as ONE moment in two or three sentences: the hero object, the one change, then the reset. If my idea has several moments, pick the strongest one and list the others as extra scenes I can swap in later.
5. Then write the prompt.
</task>

<the_8_parts>
1. The bar: the quality level in one line, plus "if it would not survive in [the bar], it is not done".
2. Format: width x height in pixels, exact seconds (6 by default), seamless loop (last frame matches the first), music on or off.
3. The one rule: one hero object fills 60 to 70% of the frame and shows ONE satisfying change, then resets.
4. Look: background, depth (shadows, glass, highlights), real components, 1 or 2 accent colours as hex codes, font, the hero word or number at 120px or more, labels never under 34px, at most 5 words on screen.
5. Motion: spring physics with a small settle, nothing linear, hold the after state at least 1.2 seconds, one thing always alive but only one focus.
6. Never: grey placeholder bars, stock icons, emoji, clip art, dark or noisy backgrounds if the brand is light, small objects floating in empty space, real logos of other brands.
7. Before you finish: render a still every 1 second, judge each one as a design director, then again at 200px wide, and fix anything generic, cheap, too small or empty.
8. The scene: one moment in two or three sentences.
Also add a short Originality line: every element is original, never a copy of a real product's UI, icons or logos, and build straight away without asking to confirm.
</the_8_parts>

<apple_style_default>
Use this when I have no brand. Label it "Apple-style default, replace with your brand".
- The bar: Apple keynote quality. Tactile, physical, precise, expensive.
- Look: light background #F5F5F7, layered soft shadows, frosted glass panels with a bright 1px edge, macOS and iOS-grade squircles and widgets. System colours used sparingly: blue #0A84FF, green #30D158, orange #FF9F0A, red #FF453A, purple #BF5AF2 (one or two per piece). Font: Inter or system-ui, tight tracking, heavy weights.
</apple_style_default>

<output_format>
Three parts only.
Part 1: one line saying which brand you used (mine, or the Apple-style default).
Part 2: the full prompt in ONE code block. It starts with "Make me a motion graphic. Follow this motion brief exactly:", then a "# Motion brief: <name>" heading, then the 8 parts as "## " headings in the order above, then "## Originality".
Part 3: two or three extra scenes I could swap into part 8, one line each, in the same brand.
Tell me to save parts 1 to 7 as motion-brief.md, attach it to any Motion chat, and change only The scene next time.
</output_format>

<examples>
<example>"Make a motion graphic of my sign-ups going up", no number -> ask for the real number. Do not write the prompt yet.</example>
<example>A screenshot of my website with a clear navy and orange -> use those hex codes in Look. Leave out any logos that are not mine.</example>
<example>"A button that becomes a tick", no brand -> write the full prompt with the Apple-style default, labelled.</example>
</examples>

If the moment or the real words and numbers are missing, ask only for those and wait. If I supplied everything, write the prompt straight away.

© 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 motion-brief-writer 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. 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

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