Agent Skill

Motion Frames skill

motion-framesnexu-io/open-designdesign-templates/motion-frames/SKILL.md

A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.

103kApache-2.0

always on

91 tokname + description

once used

678 tokSKILL.md body

bundled files

18 KB

repo stars

103kGitHub

Install the Motion Frames skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/nexu-io/open-design --skill motion-frames

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -R /tmp/open-design/design-templates/motion-frames ~/.claude/skills/motion-frames

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

When	What loads	Cost
Every session	Name and description	91 tok
When the agent uses it	The SKILL.md instructions	678 tok
Only if opened	1 bundled files (8 KB)	varies

Until it is used, motion-frames costs about 15× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 150 skills from nexu-io/open-design would load 9,514 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

Motion Frames Skill
Workflow
Output contract

More skills from nexu-io/open-design

All skills in this repo

article-magazinenexu-io/open-design
Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
103k30 tok idle · 207 in use
aster-ateliernexu-io/open-design
Use this template when the user wants an artistic creative-studio website with classical imagery, cobalt skies, elegant serif typography and cinematic scrolling.
103k31 tok idle · 539 in use
audio-jinglenexu-io/open-design
Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
103k78 tok idle · 942 in use
blog-postnexu-io/open-design
A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
103k57 tok idle · 570 in use
build-testnexu-io/open-design
Run the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
103k31 tok idle · 607 in use
card-twitternexu-io/open-design
Twitter quote or data card designed to pair with a post.
103k15 tok idle · 151 in use
card-xiaohongshunexu-io/open-design
Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
103k24 tok idle · 266 in use
clinical-case-reportnexu-io/open-design
Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
103k73 tok idle · 1,806 in use