New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Milestone Reveal

by charlie947 in charlie947/motion-graphics-skills

Make a 12-second looping milestone clip in code with Claude Code.

MITAuto-check passedProduct & Project Management

Install Milestone Reveal

skills CLI
$ npx skills add charlie947/motion-graphics-skills --skill milestone-reveal -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install charlie947/motion-graphics-skills milestone-reveal --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/milestone-reveal .claude/skills/milestone-reveal && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
milestone-reveal
GitHub stars
180
Token cost
~1k tokens
SKILL.md length
326 words
Files
1
Repo updated
First seen
Licence
MIT

At a glance

Make a 12-second looping milestone clip in code with Claude Code.

  • Works in 3 steps: Ask for four things, then wait → Build brief (paste into Claude Code) → Export
  • Someone says milestone video
  • SKILL.md covers Step 1: Ask for four things,…, Step 2: Build brief (paste…, What I learned the hard way and Step 3: Export
  • Calls npx

What it does

Milestone Reveal is an agent skill from charlie947/motion-graphics-skills. 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.

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Product & Project Management, covering Project management and Motion graphics. It works with LinkedIn, Instagram and HeyGen. The repository describes itself as: 13 Claude Code skills for launch-grade motion graphics. Every frame is code. No After Effects, no video generator. The licence is MIT.

When your agent uses it

  • Someone says milestone video
  • Celebrate 10k followers
  • Animate my subscriber count
  • Particle number animation

Example prompts

  • “milestone video”
  • “celebrate 10k followers”
  • “animate my subscriber count”
  • “/milestone-reveal”

Requirements

  • Node.js

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Ask for four things, then wait
  2. Build brief (paste into Claude Code)
  3. Export

What it can do on your machine

Read from SKILL.md and the folder at commit dfc4284. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Milestone Reveal loads about 1k tokens when it runs. Until then it costs about 120 tokens; SKILL.md has 326 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~120
When it runs · the whole SKILL.md, loaded when a task matches
~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from charlie947/motion-graphics-skills at commit dfc4284, republished under its MIT licence (© charlie947). 326 words, ~1,030 tokens.

Download SKILL.mdSave it as .claude/skills/milestone-reveal/SKILL.md (or your agent's skills folder).
name
milestone-reveal
description
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.

Milestone reveal, built in code

Each point is one follower, one subscriber or one customer. They gather into the number, hold, then drift apart so the loop has no jump.

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.

Step 1: Ask for four things, then wait

  1. The number, exactly as it should read, with commas. Example: "250,000".
  2. Where it comes from. A screenshot or link to the dashboard that shows it. No source, no clip.
  3. The label, word for word. Example: "LinkedIn followers".
  4. Brand and size. Background, particle and accent colours, the font file (attached), and the size. Default 1080 x 1350, 12 seconds.

The number is the user's real, sourced number. Never round it up, never add "+", never swap a target for a result. If the source shows 12,431, the clip says 12,431 or the user picks a lower round figure themselves.

Step 2: Build brief (paste into Claude Code)

Build one self-contained HTML file (canvas) for a 12-second seamless loop at [WIDTH] x [HEIGHT]. Tone: premium product launch, not a party. No bounce, overshoot, confetti or sparkle bursts.

Fixed text (real figure, do not alter, round or restyle): "[NUMBER]" and "[LABEL]". No other text on screen.

Brand: background [BG], particles and number [INK], accent line [ACCENT]. Font: the attached [FONT] files, embedded as base64. If the font file is missing, stop and ask me.

Particles: about 3,200 tiny points with varied opacity and a faint twinkle, like a night sky. Build the number's shape by drawing "[NUMBER]" in the bold weight on an offscreen canvas and sampling its filled pixels as targets. Give most points to the number so it reads crisply at feed size, comma included. The rest stay as dimmer drifting stars.

Timing:
1. 0-2s: points drift. Nothing else.
2. 2-6.5s: points pull into the number with a long, staggered ease, like gravity, not a snap.
3. 6.5-7.5s: a thin [ACCENT] line draws left to right under the number.
4. 7.5-8.5s: the label fades in and rises about 12px into place.
5. 8.5-10.5s: hold. The number only shimmers.
6. 10.5-12s: label and line fade, points drift back to their exact start. Frame 12 matches frame 0.

Build rules: a fixed random seed for every position. Add window.seek(seconds) that draws any exact frame from the time alone. Reduced-motion shows the held frame.

After the build: capture frames at 0, 2, 4.5, 6.5, 7.5, 9.5, 11 and 12s. Check the number reads exactly "[NUMBER]", nothing is cut off or overlapping, and frames 0 and 12 are identical. Keep each earlier version when you fix something.

What I learned the hard way

  • The number looked grey at feed size. Too few points covered each digit. The fix: about 2,700 of 3,200 points on the number, each 2.5px at near full opacity.
  • Chrome can draw the same frame two ways. After repeated pixel reads it switches drawing mode, so a frame came out slightly different. Create the canvas context with willReadFrequently: true and every seek gives the same pixels.
  • Seed everything. A Math.random() at render time makes every export different and breaks the loop.
  • Measure the seam, do not eyeball it. My passing build had 0 pixels different between frame 0 and frame 12.

Step 3: Export

HyperFrames (free, open source): npx skills add heygen-com/hyperframes, then npx hyperframes render. 1080 x 1350 for the LinkedIn feed. For a Reel, hand the MP4 to reel-export. Put the source of the number in the caption.

© charlie947, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/milestone-reveal of charlie947/motion-graphics-skills.

Open the folder on GitHubat commit dfc4284

Compare with similar skills

Milestone Reveal next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Milestone Reveal compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Milestone Reveal this skillcharlie947/motion-graphics-skills180—~1kAutomated safety check: PassMIT
Linkedin Launch Videocognyai/claude-code-marketing-skills104—~2.7kAutomated safety check: NotesNone
Announcement Cardmohitagw15856/pm-claude-skills1.4k—~768Automated safety check: PassMIT
Linkedin Announcement Generatornicepkg/ai-workflow285—~4.4kAutomated safety check: PassMIT
Linkedin Announcement Generatordmccreary/ibook-skills105—~5kAutomated safety check: PassCC-BY-NC-4.0
HyperFrames Animationheygen-com/hyperframes60k3 repos~2.1kAutomated safety check: PassApache-2.0

Similar skills

  • Linkedin Launch Video

    cognyai/claude-code-marketing-skills

    Produce a LinkedIn-native 1:1 (or 16:9) launch video using HyperFrames.

    104 GitHub stars~2.7k tokensUpdated 3 mo ago
    Marketing & SEOAuto-check: notes

  • Announcement Card

    mohitagw15856/pm-claude-skills

    Write a short, punchy announcement designed to be shared as an image or social card.

    1.4k GitHub stars~768 tokensUpdated 2 days ago
    Product & Project ManagementAuto-check passed

  • Linkedin Announcement Generator

    nicepkg/ai-workflow

    This skill generates professional LinkedIn announcement text for intelligent textbooks by analyzing book metrics, chapter content, and learning resources to create engaging posts with key…

    285 GitHub stars~4.4k tokensUpdated 8 mo ago
    Product & Project ManagementAuto-check passed

  • Linkedin Announcement Generator

    dmccreary/ibook-skills

    Generates a LinkedIn post announcing an intelligent textbook milestone by pulling book metrics, chapter count, and key statistics.

    105 GitHub stars~5k tokensUpdated yesterday
    Writing & ContentAuto-check passed

  • HyperFrames Animation

    heygen-com/hyperframes

    Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.

    60k GitHub starsUsed in 3 repos~2.1k tokens
    Media & CreativeAuto-check passed

  • Embedded Video Captions

    heygen-com/hyperframes

    Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.

    60k GitHub starsUsed in 3 repos~8.6k tokens
    Media & CreativeAuto-check passed

More from charlie947/motion-graphics-skills

All 9 skills in this repo

  • Motion Effects

    charlie947/motion-graphics-skills

    Build any of 16 premium motion effects from scratch in your own brand, as one 8-second looping HTML file with window.seek(seconds) so it exports frame-exact to MP4 or GIF.

    180 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • Animated Chart

    charlie947/motion-graphics-skills

    Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code.

    180 GitHub stars~710 tokensUpdated today
    Auto-check passed

  • Apple Launch Film

    charlie947/motion-graphics-skills

    Rebuild an Apple-style Mac launch film entirely in code with Claude Code.

    180 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Launch Video

    charlie947/motion-graphics-skills

    Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day.

    180 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Loop Cover

    charlie947/motion-graphics-skills

    Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps.

    180 GitHub stars~939 tokensUpdated today
    Auto-check passed

  • Model Showdown

    charlie947/motion-graphics-skills

    Give the same motion brief to three AI models, keep each first try, render all three the same way and stack them into one comparison video with model names and logos.

    180 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Milestone Reveal

What does Milestone Reveal do?

Make a 12-second looping milestone clip in code with Claude Code. Milestone Reveal is an agent skill from charlie947/motion-graphics-skills. Make a 12-second looping milestone clip in code with Claude Code.

When should I use Milestone Reveal?

Milestone Reveal fits situations like: someone says milestone video; celebrate 10k followers; animate my subscriber count; particle number animation.

How do I install Milestone Reveal in Claude Code?

Run `npx skills add charlie947/motion-graphics-skills --skill milestone-reveal -a claude-code`. Or copy the skill folder (skills/milestone-reveal in charlie947/motion-graphics-skills) into .claude/skills/milestone-reveal in your project. Claude Code loads it when a task matches its description.

How do I install Milestone Reveal in Codex?

Run `npx skills add charlie947/motion-graphics-skills --skill milestone-reveal -a codex`. Or copy the skill folder (skills/milestone-reveal in charlie947/motion-graphics-skills) into .agents/skills/milestone-reveal in your project. Codex loads it when a task matches its description.

Can I use Milestone Reveal in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add charlie947/motion-graphics-skills --skill milestone-reveal -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/milestone-reveal, .gemini/skills/milestone-reveal, .github/skills/milestone-reveal and .opencode/skills/milestone-reveal in your project.

What does Milestone Reveal need to run?

Going by SKILL.md and its folder, Milestone Reveal needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Milestone Reveal access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Milestone Reveal safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Milestone Reveal use?

Milestone Reveal is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Milestone Reveal use?

About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Milestone Reveal?

Skills that share tags, products or a category with Milestone Reveal: Linkedin Launch Video (cognyai/claude-code-marketing-skills, 104 stars), Announcement Card (mohitagw15856/pm-claude-skills, 1.4k stars), Linkedin Announcement Generator (nicepkg/ai-workflow, 285 stars) and Linkedin Announcement Generator (dmccreary/ibook-skills, 105 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Milestone Reveal?

charlie947 (a GitHub user) maintains it in charlie947/motion-graphics-skills, which has 180 GitHub stars. The repository was last updated on October 10, 2026.

Source: charlie947/motion-graphics-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.