recreate

recreate is a skill for Claude Code from KumarSashank/motiscope. It costs 75 tokens per session (1,869 once invoked), scanned A, original, MIT.

A tool for turning an animation analysis into working web code. It can target GSAP, CSS animations, Framer Motion for React, or Lottie/SVG.

In plain words
What is it for?
Use it after an animation analysis to build the result for a selected web framework or format.
Why use it?
It helps convert measured animation behavior into a runnable component instead of manually estimating the timing and movement.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter. Also seen: names the AskUserQuestion tool; positional $N argument.

Runs only inside its plugin — its command needs a path that Claude Code sets for a plugin’s own hooks and for nothing else. Install the plugin, not this.

Part of the motiscope plugin — 8 skills, 1 agent, 1 hook shipped together

Good fit Use it after an animation analysis to build the result for a selected web framework or format.

Compare 6 skills from other repositories ↓
Install

Getting it into your agent

This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.

Claude Code
/plugin marketplace add KumarSashank/motiscope
Claude Code
/plugin install motiscope

Made for: Claude Code.

Or install motiscope, the plugin that ships this one along with the rest of its 8 skills, 1 agent, 1 hook.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for recreate

README.md
[![agentmods](https://agentmods.dev/badge/skills/kumarsashank/motiscope/recreate.svg)](https://agentmods.dev/skills/kumarsashank/motiscope/recreate)
Your own site
<a href="https://agentmods.dev/skills/kumarsashank/motiscope/recreate"><img src="https://agentmods.dev/badge/skills/kumarsashank/motiscope/recreate.svg" alt="Measured on agentmods" height="20"></a>
Per session 75 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,869 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00075 $0.01869
Opus 5 $0.00037 $0.00934
Sonnet 5 $0.00015 $0.00374
Haiku 4.5 $0.00007 $0.00187

Measured 9d ago against content hash 50d9d9897413, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

recreate scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/recreate/SKILL.md · 100 lines

How it starts

The opening of the file, as written. The whole thing — 100 lines — stays where its author put it; the contents beside it link to each section on GitHub.

motiscope: recreate

Translate a motiscope animation spec into real, runnable animation code for one target framework. Timing and easing come from the measured spec; you render it faithfully.

Resolve the plugin root

ROOT="${CLAUDE_PLUGIN_ROOT:-}"
[ -f "$ROOT/scripts/config.py" ] || ROOT="<absolute dir of this SKILL.md>/../.."   # skills/recreate -> plugin root

SCRIPTS="$ROOT/scripts", REFS="$ROOT/references". On Windows use python for python3.

Step 1 — load the animation spec

  • If /motiscope:analyze just produced a spec in this conversation, use it.
  • Otherwise locate the most recent analysis and read it:
    ls -t .motiscope/*/manifest.json 2>/dev/null | head -1
    
    Read that manifest.json (and its sibling motion.json for the raw energy curve / segments). If there is none, run /motiscope:analyze first.

Step 2 — choose the target

  • From $1 if given (gsap | css | framer | lottie).
  • Otherwise read the default and ask:
    python3 "$SCRIPTS/config.py"   # prints config incl. default_target
    
    Ask the user (AskUserQuestion) to confirm the target (offer all four; default from config).

Then Read the target guide and the easing map:

  • Read "$REFS/easing-map.md" — maps each neutral ease token to a concrete value in every target.
  • Read "$REFS/targets/<target>.md" — the rendering template for that target.
  • Read "$REFS/measurement-traps.md"if you are deriving any number yourself (a velocity, a parallax ratio, a period) rather than reading it from report.md.

Step 3 — generate the code

Split of responsibility (mirror the spec):

  • Timing is measured — use it exactly. start_ms, dur_ms, the bezier, stagger each_ms, loop period_ms come from motiscope's analysis; wire them verbatim (prefer the exact cubic-bezier over a named ease).
  • The effect is yours — build what the spec's animation field and the frames describe. You are not limited to opacity/translate/scale. If the animation is a mask/clip-path reveal, an SVG path draw, a morph, a 3D flip, a text split/typewriter, a blur or color shift, a parallax, a spring/physics bounce, or particles — build that directly in the target, going beyond the spec's simple props when needed. Re-Read the frames if you need to confirm the effect.

Read the full file on GitHub · 100 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 9d ago First seen · 100 lines · 75 tokens per session scan A 50d9d9897413

Subscribe to this mod's changes

recreate is a skill published in the GitHub repository KumarSashank/motiscope (112 stars, last pushed 1mo ago), licensed MIT. It adds 75 tokens to every session and 1,869 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

remotion-to-hyperframes

Port an existing Remotion (React) composition's source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear →…

heygen-com/hyperframes · 84 tokens

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4…

heygen-com/hyperframes · 139 tokens

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on…

heygen-com/hyperframes · 112 tokens

embedded-captions

A workflow for adding captions or subtitles to an existing single-person talking-head video without changing the footage. Captions can appear as ordinary subtitles, behind the speaker, or as stylized visual effects.

heygen-com/hyperframes · 120 tokens

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a…

heygen-com/hyperframes · 98 tokens

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR…

heygen-com/hyperframes · 104 tokens