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

Rebuild Site

by KumarSashank in KumarSashank/motiscope

Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it.

MITAuto-check: notesFrontend & Design

Install Rebuild Site

skills CLI
$ npx skills add KumarSashank/motiscope --skill rebuild-site -a claude-code

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

GitHub CLI
$ gh skill install KumarSashank/motiscope rebuild-site --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/KumarSashank/motiscope.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/rebuild-site .claude/skills/rebuild-site && 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
rebuild-site
GitHub stars
122
Token cost
~1.8k tokens
SKILL.md length
756 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it.

  • Works in 5 steps: analyze the whole walkthrough → build the site plan (from the frames) → assets → …
  • The user has a recording of an ENTIRE page (not a single animation) and wants the full page recreated — layout
  • SKILL.md covers Resolve scripts + preflight, Preflight, Step 1 — analyze the whole… and Step 2 — build the site plan…, plus 3 more sections
  • Calls python3

What it does

Rebuild Site is an agent skill from KumarSashank/motiscope. 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.

Its SKILL.md is about 1.8k 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 Frontend & Design, covering Web animation and motion, Landing pages and Game assets and audio. The repository describes itself as: Recreate any web animation from a screen recording. A motion-design plugin: analyzes motion (timing, easing, stagger, loops) and rebuilds it as GSAP / CSS / Framer Motion /… The licence is MIT.

When your agent uses it

  • The user has a recording of an ENTIRE page (not a single animation) and wants the full page recreated — layout
  • Scroll animations

Example prompts

  • “/rebuild-site”

Requirements

  • Python 3
  • Pre-approved tools (allowed-tools): Bash, Read, Write, Edit, AskUserQuestion

Workflow steps

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

  1. analyze the whole walkthrough
  2. build the site plan (from the frames)
  3. assets
  4. build the page
  5. output, preview, credit

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash
    • Read
    • Write
    • Edit
    • AskUserQuestion

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • python3

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

  • Network

    Links to these hosts (documentation or services it may open):

    • kumarsashank.github.io

    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

Rebuild Site loads about 1.8k tokens when it runs. Until then it costs about 121 tokens; SKILL.md has 756 words of instructions outside code blocks.

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

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Bash, Read, Write, Edit, AskUserQuestion

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 KumarSashank/motiscope at commit c0ce3dd, republished under its MIT licence (© KumarSashank). 756 words, ~1,760 tokens.

Download SKILL.mdSave it as .claude/skills/rebuild-site/SKILL.md (or your agent's skills folder).
name
rebuild-site
description
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.
allowed-tools
Bash, Read, Write, Edit, AskUserQuestion
argument-hint
[path-to-video] [gsap|css|framer]
user-invocable
true

motiscope: rebuild-site

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.

It's a team effort: measured timing + curated frames + your vision + generated assets → a full page. Be honest about which is which in the final summary.

<!-- motiscope:preamble:start -->

Resolve scripts + preflight

bash
SCRIPTS="${CLAUDE_PLUGIN_ROOT:-}/scripts"; REFS="${CLAUDE_PLUGIN_ROOT:-}/references"
[ -f "$SCRIPTS/ingest.py" ] || { SCRIPTS="<abs dir of this SKILL.md>/../../scripts"; REFS="<...>/../../references"; }

(Windows: python.)

<!-- motiscope:preamble:end -->

Preflight

bash
python3 "$SCRIPTS/mvsetup.py" --check   # exit 0 = ready; else hand to /motiscope:doctor

Resolve the video from $1, else scan animations/ (as in analyze).

Step 1 — analyze the whole walkthrough

bash
python3 "$SCRIPTS/ingest.py" "<video>" --preset landing

landing gives readable 1280px frames and auto-decomposes onto the motion. The result:

  • hold segments = the sections the walkthrough paused on.
  • fade-out/cut segments = the transitions between sections.
  • per-section entrance timing/easing (the move beats + their cubic-bezier), the stagger timing, and curated frames covering each section.

For a long clip, note it may exceed one pass; you can also re-run focused on a range (--start/--end) to get denser frames for a specific section.

Step 2 — build the site plan (from the frames)

Read report.md (the measured timeline) and every curated frame (parallel Reads). Then reconstruct — this is your vision doing the work — and present a site plan to the user:

  1. Design system: palette (hexes), typography (name the actual fonts if you can — e.g. Martian Mono), spacing/scale, brand/logo, light/dark.
  2. Sections in order: for each — a name (hero / features / how-it-works / pricing / FAQ / footer / …), its layout, its copy transcribed verbatim from the frames, and the imagery it contains.
  3. Motion per section: what animates and how (scroll-reveal, pin+scrub, stagger, mask, draw, parallax — name what you see), wired to the measured timing (durations, bezier, stagger each_ms) from the segment table. Landing walkthroughs are almost always scroll-driven — assume ScrollTrigger unless the frames say otherwise.

Show the plan and let the user correct it before building.

Step 3 — assets

List the photographic assets the design needs (hero shots, feature photos, backgrounds — anything that isn't UI you can build in CSS/SVG). Then ask the user (AskUserQuestion): (a) point at their own files, (b) generate, or (c) placeholders. For (b), generate with the real provider:

bash
python3 "$SCRIPTS/assetgen.py" --check   # confirm a key (gemini) is set
python3 "$SCRIPTS/assetgen.py" generate --type image --provider gemini \
  --prompt "<match the shot + the design's grade>" --out assets/hero.png --aspect-ratio 16:9
# then shrink for the web: ffmpeg -i assets/hero.png -vf scale=1200:-2 -q:v 5 assets/hero.jpg

Match each prompt to what the frame shows and the design's color grade. If no key, hand to /motiscope:doctor. Never write keys into output or commit them.

Show full SKILL.md (330 more words)Show less

Step 4 — build the page

Default target GSAP + ScrollTrigger ($2 overrides: css | framer). Read "$REFS/easing-map.md" and "$REFS/targets/<target>.md".

<!-- motiscope:claude-only:gsap-skills:start -->

For GSAP, defer to the official gsap- skills* (gsap-timeline, gsap-core, gsap-scrolltrigger for the scroll reveals/pins, gsap-react if the project is React, gsap-utils for stagger).

<!-- motiscope:claude-only:gsap-skills:end -->

Build one standalone page (index.html + assets/) with:

  • the design system (tokens for palette/type; embed or link the identified fonts),
  • a nav + every section in order, copy verbatim, assets wired in,
  • scroll-driven motion per the plan, using the measured durations / cubic-bezier / stagger — not guessed values,
  • the section transitions you saw (fades, mask wipes, pinned zooms),
  • responsive layout and a prefers-reduced-motion: reduce guard (elements resolve to final state).

Keep the timing measured; build the effects from what you saw.

Step 5 — output, preview, credit

Write to ./motiscope-output/site/. Then:

  • tell the user how to preview (open motiscope-output/site/index.html),
  • give an honest breakdown: timing = measured; layout/copy/design = reconstructed from frames; photos = generated (Imagen); fonts = identified. Flag what to fine-tune.
  • Attribution & rights: if the source is someone else's design (a Dribbble shot, another company's site), add a prominent credit in the footer (link the original), frame it as a design-to-code study, and confirm the user has the right to publish before it goes public. Don't publish a clone of a third party's brand without their say-so.

Two worked examples:

  • Cadence — an original page, walked through and measured. Every scroll boundary lands on the authored millisecond, and the two things motiscope gets wrong are published with the reason.
  • Alterfx — a real Dribbble concept rebuilt from a 10s recording, credited on the page and framed as a design-to-code study. This is what the rights step below looks like when the answer is "yes, with attribution".

Rights come first. If the recording is of someone else's site or concept, say so before you build: offer to recreate it as a study with visible attribution, or to rebuild the structure and motion under the user's own art and copy. Do not publish a clone of someone else's design.

© KumarSashank, 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/rebuild-site of KumarSashank/motiscope.

Open the folder on GitHubat commit c0ce3dd

Compare with similar skills

Rebuild Site 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.

Rebuild Site compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Rebuild Site this skillKumarSashank/motiscope122—~1.8kAutomated safety check: NotesMIT
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Auteuragiwhitelist/auteur1k—~5kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2641 repos~5.7kAutomated safety check: PassCustom licence
Claude Designjiji262/claude-design-skill204—~3.6kAutomated safety check: PassMIT
Oma Designfirst-fluke/oh-my-agent1.3k—~2.9kAutomated safety check: PassMIT

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Auteur

    agiwhitelist/auteur

    Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…

    1k GitHub stars~5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    264 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Claude Design

    jiji262/claude-design-skill

    Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations.

    204 GitHub stars~3.6k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Oma Design

    first-fluke/oh-my-agent

    AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.

    1.3k GitHub stars~2.9k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Cinematic Scroll Storytelling

    nirholas/three.ws

    Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds…

    229 GitHub starsUsed in 1 repo~3k tokens
    Frontend & DesignAuto-check passed

More from KumarSashank/motiscope

All 8 skills in this repo

  • Analyze

    KumarSashank/motiscope

    Analyze a screen recording of an animation to characterize its motion — timing, easing, transforms, and sequencing — so it can be recreated as web code.

    122 GitHub stars~3.1k tokensUpdated 2 mo ago
    Auto-check: notes

  • Doctor

    KumarSashank/motiscope

    Check and configure motiscope — verify ffmpeg/ffprobe are installed and scaffold the API-key config used for optional (stubbed) asset generation.

    122 GitHub stars~736 tokensUpdated 2 mo ago
    Auto-check: notes

  • Motiscope Analyze

    KumarSashank/motiscope

    Analyze a screen recording of an animation to characterize its motion — timing, easing, transforms, and sequencing — so it can be recreated as web code.

    122 GitHub stars~3.3k tokensUpdated 2 mo ago
    Auto-check passed

  • Motiscope Doctor

    KumarSashank/motiscope

    Check and configure motiscope — verify ffmpeg/ffprobe are installed and scaffold the API-key config used for optional (stubbed) asset generation.

    122 GitHub stars~936 tokensUpdated 2 mo ago
    Auto-check: notes

  • Motiscope Rebuild Site

    KumarSashank/motiscope

    Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it.

    122 GitHub stars~2.1k tokensUpdated 2 mo ago
    Auto-check passed

  • Motiscope Recreate

    KumarSashank/motiscope

    Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

    122 GitHub stars~2k tokensUpdated 2 mo ago
    Auto-check passed

Categories

Questions about Rebuild Site

What does Rebuild Site do?

Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it. Rebuild Site is an agent skill from KumarSashank/motiscope. Rebuild a whole landing page / multi-section website from a screen recording that scrolls or walks through it.

When should I use Rebuild Site?

Rebuild Site fits situations like: the user has a recording of an ENTIRE page (not a single animation) and wants the full page recreated — layout; scroll animations.

How do I install Rebuild Site in Claude Code?

Run `npx skills add KumarSashank/motiscope --skill rebuild-site -a claude-code`. Or copy the skill folder (skills/rebuild-site in KumarSashank/motiscope) into .claude/skills/rebuild-site in your project. Claude Code loads it when a task matches its description.

How do I install Rebuild Site in Codex?

Run `npx skills add KumarSashank/motiscope --skill rebuild-site -a codex`. Or copy the skill folder (skills/rebuild-site in KumarSashank/motiscope) into .agents/skills/rebuild-site in your project. Codex loads it when a task matches its description.

Can I use Rebuild Site 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 KumarSashank/motiscope --skill rebuild-site -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/rebuild-site, .gemini/skills/rebuild-site, .github/skills/rebuild-site and .opencode/skills/rebuild-site in your project.

What does Rebuild Site need to run?

Going by SKILL.md and its folder, Rebuild Site needs the command-line tools its instructions call (python3). Our summary lists: Python 3. Its frontmatter pre-approves these tools: Bash, Read, Write, Edit, AskUserQuestion.

Does Rebuild Site access the network?

SKILL.md names 1 domain. As links in the text: kumarsashank.github.io. This is read from the text; nothing was executed.

Is Rebuild Site safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Rebuild Site use?

Rebuild Site 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 Rebuild Site use?

About 1.8k tokens (SKILL.md is roughly 7k 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 Rebuild Site?

Skills that share tags, products or a category with Rebuild Site: Impeccable (bestofjs/bestofjs, 3.1k stars), Auteur (agiwhitelist/auteur, 1k stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 264 stars) and Claude Design (jiji262/claude-design-skill, 204 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Rebuild Site?

KumarSashank (a GitHub user) maintains it in KumarSashank/motiscope, which has 122 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on July 28, 2026.

Source: KumarSashank/motiscope on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.