How to use the Video to Superprompt agent skill

What an agent skill is and what this one does

An agent skill is a folder of instructions and optional scripts that an AI agent loads when a request matches the skill's description. This skill is triggered when you provide, mention, upload, link or point to a video and ask about its design, UI, animations, transitions, scroll interactions, typography, colours, assets, WebGL or Three.js, or section-by-section behaviour.

The skill works from video frames sampled with standard tools, so the result is a written specification rather than a copy of the original. By default it produces one long prompt that describes how to rebuild the interaction without seeing the video. It can also produce an article, an asset list or an implementation plan.

• Analyses the timeline, layout, animations, colours and typography of the video
• Describes motion mechanisms such as pinned sections, scroll scrubbing, parallax, masks and reveals
• Lists the assets needed, using exact URLs or placeholder names
• Adds mobile and reduced-motion behaviour to the prompt

What you need before you start

The skill's workflow depends on command-line tools and a video input. Check these before installing so you are not stuck partway through.

• ffmpeg and ffprobe installed on the machine, used for local video inspection
• A local video file, an uploaded file, or an accessible URL
• An agent environment that can load skills, such as Claude with skills enabled or a Codex-style setup that reads a skills folder

Install the video-to-superprompt skill

Download the ZIP for this skill from this page and unzip it. You can install it for yourself across all projects or for one project only.

For a personal install, place the unzipped video-to-superprompt folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder. In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/video-to-superprompt/
• Project install: .claude/skills/video-to-superprompt/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload the skill

Trigger the skill with a natural request

You do not need a special command. Attach or point to the video and say what you want made. The skill's description covers requests to analyse a video, recreate a page or interaction, or write a prompt or article about it.

Name the video explicitly, state the output you want (a prompt, an article, an asset list or an implementation brief), and say whether you want an exact recreation or an inspired adaptation. If the video is referenced but cannot be accessed, the skill is designed to ask for the exact file or URL rather than invent details.

• "Analyse this screen recording of a scroll-driven landing page and write a superprompt to rebuild it."
• "Here is a video of a product page at https://example.com/demo.mp4. Describe the motion system as a build prompt."
• "Write an article breaking down the card-stacking interaction in this video, with an asset list."

What the skill does with your video

The skill first checks the video technically. For local files it runs ffprobe to read duration, dimensions, frame rate, codec and size, then extracts representative frames with ffmpeg, favouring timeline beats over evenly spaced thumbnails. For long or scroll-heavy videos it also extracts the start, middle, end and transition moments.

It then analyses the video in layers (story, layout, motion, visual design, technical rebuild, and accessibility and performance) and writes the prompt. The prompt names the asset map, global design system, motion system, section-by-section anatomy, responsive rules, and anti-patterns to avoid.

• Story: page purpose, emotional arc and section order
• Layout: grids, sticky zones, cards, navigation and footer
• Motion: reveal timing, easing, scroll behaviour and hover states
• Visual design: typography, palette, surfaces and image treatment
• Accessibility and performance: reduced motion, lazy loading and static fallbacks

Safety notes: scripts and network access

This skill runs scripts and uses the network. The frame extraction step runs ffprobe and ffmpeg on the video you provide, and a URL input means the skill fetches the video over the network. Review the skill files before installing, and only point it at videos you are allowed to use.

The skill describes a design and does not extract source files. It is not a way to copy a site's code or assets, and reusing someone else's visuals may infringe copyright. Because the prompt may reproduce the look of a video closely, avoid using videos you have no right to use as a reference.

• Runs scripts: yes, ffprobe and ffmpeg
• Uses network: yes, when you supply a URL
• Does not extract source HTML, CSS, JavaScript or media files from the video
• Check the licence for reuse; the skill is published under the MIT licence

Tips for better superprompts

The quality of the prompt depends on the reference you give. Short, clearly paced videos with visible scroll positions produce more useful timelines than long, cluttered recordings. If you have the source HTML, CSS or JavaScript for the page, share it, because the skill inspects connected source before writing an exact recreation.

Decide up front whether you want exact recreation or inspired adaptation, since the prompt's boundary depends on it. Ask for a separate asset-generation pack if you plan to create images, clips or WebGL elements with other tools.

• Use a clean screen recording with the interaction clearly visible
• Provide the source page code if you want a close rebuild
• State whether the output should be a prompt, article, asset pack or implementation brief
• Ask for the mobile and reduced-motion behaviour explicitly if your project needs it