motiscope-rebuild-site

motiscope-rebuild-site is a skill for Claude Code, Codex from KumarSashank/motiscope. It costs 107 tokens per session (2,051 once invoked), scanned B, original, MIT.

A workflow for rebuilding a complete multi-section website from a screen recording that scrolls through the page.

In plain words
What is it for?
Use it to recreate an entire landing page or website from a recording, including its sections, copy, visual system, and scroll effects.
Why use it?
It turns a visual reference into a plan for the page structure, design, assets, and scrolling animations.

Skill for Claude CodeCodex

Written for Claude Code and Codex: shipped in a Claude Code plugin, but also reads ~/.codex or $CODEX_HOME. Also seen: positional $N argument; mentions Codex; $skill-name invocation.

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

Good fit Use it to recreate an entire landing page or website from a recording, including its sections, copy, visual system, and scroll effects.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/kumarsashank/motiscope/motiscope-rebuild-site
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add KumarSashank/motiscope --skill motiscope-rebuild-site
Clone the repo
git clone --depth 1 https://github.com/KumarSashank/motiscope

Made for: Claude Code, Codex.

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 motiscope-rebuild-site

README.md
[![agentmods](https://agentmods.dev/badge/skills/kumarsashank/motiscope/motiscope-rebuild-site/github.svg)](https://agentmods.dev/skills/kumarsashank/motiscope/motiscope-rebuild-site)
Your own site
<a href="https://agentmods.dev/skills/kumarsashank/motiscope/motiscope-rebuild-site"><img src="https://agentmods.dev/badge/skills/kumarsashank/motiscope/motiscope-rebuild-site/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for motiscope-rebuild-site

Your own site · 80×15
<a href="https://agentmods.dev/skills/kumarsashank/motiscope/motiscope-rebuild-site"><img src="https://agentmods.dev/badge/skills/kumarsashank/motiscope/motiscope-rebuild-site.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 107 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,051 The whole file, excluding the scripts and references it only reads on demand.
Security scan B 1 finding. 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.00107 $0.02051
Opus 5 $0.00053 $0.01026
Sonnet 5 $0.00021 $0.00410
Haiku 4.5 $0.00011 $0.00205

Measured 12d ago against content hash 6cb04d96ef0c, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade B, and why

motiscope-rebuild-site scanned grade B with 1 finding 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 12d 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.

Reads agent configuration directoriesmediumAgent snooping

.claude/, .codex/, .gemini/ hold keys, settings and other credentials a mod has no legitimate need for.

enable `tools.view_image = true` in `~/.codex/config.toml`, or have the user relaunch with
integrations/skills/motiscope-rebuild-site/SKILL.md · 135 lines

How it starts

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

motiscope: rebuild-site

Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it. Use when the user has a recording of an ENTIRE page (not a single animation) and wants the full page recreated — layout, sections, copy, design system, and scroll animations. Orchestrates analyze (measured timing + section structure + curated frames) + asset generation + a full multi-section build. For one isolated animation, use motiscope-recreate instead.

Arguments ([path-to-video] [gsap|css|framer]): take them from the user's message. If they're missing, infer them or ask.

Running motiscope

motiscope is a shell command. If it isn't found it isn't on your PATH — see https://github.com/KumarSashank/motiscope#install. The reference guides live under $(motiscope home)/references/.

Invoking the sibling skills. In Codex, mention a skill with $motiscope-recreate. In Cursor, use /motiscope-recreate. Elsewhere, just follow that skill's SKILL.md.

Seeing the frames — do not skip this. The curated keyframes are PNG files on disk, and you must actually look at them. Codex: use the view_image tool (if it's unavailable, enable tools.view_image = true in ~/.codex/config.toml, or have the user relaunch with codex -i frame1.png,frame2.png). Cursor: the file-reading tool accepts .png and puts the image in context. If you genuinely cannot open images, say so — you can still report the measured timing, but you cannot know what is animating, and you must not guess it from the filenames.

Rebuild a whole landing page from a walkthrough recording. This is analyze + recreate applied to an entire page, and it leans on the same division of labor:

  • The numbers give you the WHEN + the structure — motiscope measures section timing, transitions, and per-section entrance easing, and curates the frames that show each section.
  • You give the WHAT — from the frames you reconstruct the sections, layout, copy, design system, and what kind of animation each uses (open vocabulary — scroll reveals, pins, masks, draws, whatever you see).
  • Imagen fills the photos — generate the photographic assets the design needs.

Read the full file on GitHub · 135 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. 12d ago First seen · 135 lines · 107 tokens per session scan B 6cb04d96ef0c

Subscribe to this mod's changes

motiscope-rebuild-site is a skill published in the GitHub repository KumarSashank/motiscope (113 stars, last pushed 1mo ago), licensed MIT. It adds 107 tokens to every session and 2,051 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it B with 1 finding (reads agent configuration directories). 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

motion

UIForge's motion layer — art-directs motion for React/Next.js + Tailwind interfaces built with Motion-Primitives (the shadcn-style copy-in registry, powered by Motion / ex Framer Motion). Use whenever you build or polish a landing page, hero, dashboard, pricing table, feature section, empty state, or any screen where…

TaewoooPark/UIForge · 164 tokens

design-director

UIForge's always-on design brain — the art director for any web UI. Use whenever you build or elevate a landing page, hero, dashboard, pricing table, marketing site, app screen, component, or design system, or when asked to make something feel premium, distinctive, high-end, polished, "not generic," or "not…

TaewoooPark/UIForge · 139 tokens

kokonutui

This skill should be used when the user asks to "add a KokonutUI component", "use kokonutui", "install a component from kokonutui.com", or asks for polished ready-made React/Tailwind UI like AI chat inputs, animated text effects (shimmer, glitch, matrix, typewriter), gradient/particle/hold buttons, card stacks, bento…

webmilmind1/claude-plugins · 108 tokens

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link…

heygen-com/hyperframes · 89 tokens

motion-graphics

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI…

heygen-com/hyperframes · 139 tokens

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