Guide · Agent skill
How to use the Motion Frames design agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Motion Frames is an agent skill that tells an AI agent to build one animated web page that works like a looping motion-graphics poster. It is aimed at designers, marketers and teams who need an animated hero banner or title card concept they can later export to video. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what to check before you use the output.
Motion Frames Designnexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the motion-frames ZIP from the page where you found this guide.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project folder.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Prepare a design system. Have a DESIGN.md file available so the agent can pull typography and colour tokens from it.
- 5Ask for a motion poster. Describe the headline, mood and loop length, and mention HyperFrames if you plan to export to video.
- 6Check the first frame. Open the returned HTML in a browser and confirm it reads as a poster with motion paused.
- 7Export if needed. Pass the HTML to HyperFrames or another keyframe-based exporter to capture it as video.
What the motion-frames skill makes the agent produce
An agent skill is a folder of instructions that an AI agent loads when your request matches it. The motion-frames skill gives the agent a specific design brief: a single widescreen composition, with all motion written in plain CSS rather than JavaScript.
The composition is laid out in layers. It has a full-bleed stage with a subtle dotted grid, two or three thin concentric rings rotating at different speeds, a focal mark such as a wireframe globe drawn in SVG, short words placed around one ring, a headline with an italic accent word that fades in once on load, and static corner labels. The page is meant to be captured frame by frame by a tool such as HyperFrames or another keyframe-based exporter.
- Rotating rings, with the words on one ring kept upright
- A spinning globe-style focal graphic
- A pulsing focal dot
- A headline that reveals once on load
- Static frame chrome such as corner tags and a baseline rule
Install the motion-frames skill
Download the ZIP for the motion-frames skill from the page where you found this guide. Then choose one of the two install routes below.
For a personal setup, unzip the download into your ~/.claude/skills/ folder. For a single project, unzip it into the .claude/skills/ folder inside that project. The skill files are example.html and SKILL.md.
If you use the Claude apps instead of a local folder, open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal use: unzip into ~/.claude/skills/
- Project use: unzip into .claude/skills/ in the project folder
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. The skill loads when your request uses language it is built for, such as motion design, animated hero, loop animation, video poster, title card, kinetic typography, or HyperFrames. Describe the headline, the mood and the loop length, and mention HyperFrames if you plan to export to video.
The skill also expects a design system file called DESIGN.md to take typography and colour from. Without one, the agent has less to work with, so keep it in the environment you are working in.
- Name the headline text you want on the poster
- Say how long the loop should be
- Mention HyperFrames if you plan to export the result to video
- Mention a title card or video poster if that is the format you need
Example request and what to expect
The skill's own example prompt asks for an animated hero with a rotating type ring around a wireframe globe, the headline 'Reach every country.', and a 12 second loop ready for HyperFrames export. You can adapt that wording to your own brand and message.
The agent returns a single HTML document between artifact tags, with one sentence of text before it. The skill's output format is shown below. Open the result in a browser to check it. The layout should still read as a poster when the motion is paused at its first frame.
<artifact identifier="motion-slug" type="text/html" title="Motion — Title"> <!doctype html> <html>...</html> </artifact>Safety notes: scripts and network access
The skill runs no scripts and uses no network access, according to its listing. It is built to avoid JavaScript on purpose, so the page can be captured deterministically by an exporter.
Because the skill forbids scripts by design, it is not suited to projects that need interactive behaviour or JavaScript-driven animation. It also produces one composition, not a full video project with timeline editing.
- Runs scripts: no
- Uses network: no
- Output is one HTML composition, not a timeline-based video project
Tips for better results
Give the agent a clear headline and a loop length. Check the output with motion paused, because the design should still work as a poster frame. Count the moving layers: the skill's own check asks for at least three layers moving at different speeds to create depth.
If you want a video, export the HTML with HyperFrames or a similar keyframe-based tool. The skill names Lottie as one example of an exporter it can work with.
- Pick a clear, short headline
- Check the first frame with motion paused
- Confirm at least three layers move at different speeds
- Keep one accent, usually the italic word in the headline
What people use it for
- An animated hero banner concept for a landing page
- A looping video poster for a product launch
- A title card for a presentation or video intro
- An HTML starting point to export into video with HyperFrames
Frequently asked questions
How do I install the motion-frames skill?
Download the ZIP from the page, then unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project folder. In the Claude apps, you can instead upload it under Settings, Capabilities, Skills.
What does the motion-frames skill need to run?
It needs an Open Design environment with a DESIGN.md design system to pull typography and colour from. If you want video output, you also need HyperFrames or another keyframe-based exporter.
Is the motion-frames skill free?
The listing states the licence is Apache-2.0. Read the licence terms yourself before commercial use, as this guide does not add any further pricing information.
Does the motion-frames skill run scripts or use the network?
According to its listing, it runs no scripts and uses no network access. The animation is written in plain CSS with no JavaScript.
Can motion-frames make an interactive animation?
No. The skill forbids scripts by design, so it is not suitable for JavaScript-driven or interactive animation. It is designed for a single looping poster composition.
How is this different from a full video editor?
The skill outputs one HTML composition, not a timeline-based video project. For timeline control, use a production video editor and treat this skill as a starting point.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use motion-frames if you need a quick looping hero banner or title card concept that you can export to video with HyperFrames. Pick something else if you need interactive animation, JavaScript behaviour, or full timeline-based video editing.
Download the skill