agentleFS
Sign inStart free
memi-designmemi-design/design-skills/skills/website-to-video/SKILL.md

website-to-video

Skill7 starsChanged 4 months agoMITView on GitHub

Website-to-video capture pack for turning product pages, flows, and browser states into structured video scenes.

10 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use pose-library-design, video-toolkit and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • LinHao-citySkill

    pose-library-design

    Design reusable 2D character pose libraries, action cycles, and expression states for data-driven animation.

    Also in 4 projects that use this

  • LinHao-citySkill

    video-toolkit

    Create professional videos autonomously using claude-code-video-toolkit — AI voiceovers, image generation, music, talking heads, and Remotion rendering.

    Also in 4 projects that use this

  • GopyrSkill

    azure-speech-to-text

    Also in 3 projects that use this

  • GopyrSkill

    dashscope

    Also in 3 projects that use this

  • anton-abyzovSkill

    hyperframes-media

    Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio/video transcription (Whisper), and background removal for transparent overlays (u2net). Use when generating voiceover from text, transcribing speech for captions, removing the background from a video or image to use as a transparent overlay, choosing a TTS voice or whisper model, or chaining these (TTS → transcribe → captions). Each command downloads its own model on first run.

    Also in 7 projects that use this

  • dAAAbSkill

    heygen

    Also in 4 projects that use this

  • +5 more from LinHao-city

The file

We split this skill into the rules it gives an agent

4 rules. 0 are common, 4 are distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 9 edited versions we read keep these.

  • 4

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use this Note when Studio needs to turn a website, app route, or browser flow into a video.

    line 8
  2. Distinctive:

    Create scene beats: first impression, interaction proof, outcome, CTA.

    line 17
  3. Distinctive:

    Avoid dark blurred atmospheric captures when the product UI needs inspection.

    line 24
  4. Distinctive:

    Use local screenshots/assets for render determinism when possible.

    line 26

“Common” is measured: kept by at least 6 in 10 of the 9 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Website To Video

Use this Note when Studio needs to turn a website, app route, or browser flow into a video. The output should be a storyboard plus a runnable Remotion or Hyperframes project, not a pile of screenshots.

Workflow

  1. Capture the target route state, dimensions, and critical interactions.
  2. Choose Hyperframes for static/HTML explainers and Remotion for timeline-heavy React composition.
  3. Create scene beats: first impression, interaction proof, outcome, CTA.
  4. Store source URLs and captured assets in the video project folder.
  5. Prepare preview/render commands and a download path for the rendered artifact.

Capture Rules

  • Record the exact URL, viewport, and feature state used for every scene.
  • Avoid dark blurred atmospheric captures when the product UI needs inspection.
  • Crop only after preserving an uncropped source artifact.
  • Use local screenshots/assets for render determinism when possible.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free