Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add krzysztofsurdy/code-virtuoso --skill motion-designgit clone --depth 1 https://github.com/krzysztofsurdy/code-virtuosoWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/krzysztofsurdy/code-virtuoso/motion-design)<a href="https://agentmods.dev/skills/krzysztofsurdy/code-virtuoso/motion-design"><img src="https://agentmods.dev/badge/skills/krzysztofsurdy/code-virtuoso/motion-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/krzysztofsurdy/code-virtuoso/motion-design"><img src="https://agentmods.dev/badge/skills/krzysztofsurdy/code-virtuoso/motion-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00065 | $0.02778 |
| Opus 5.5 | $0.00026 | $0.01111 |
| Sonnet 5.5 | $0.00013 | $0.00556 |
| Haiku 4.5 | $0.00006 | $0.00278 |
Grade A, and why
motion-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 158 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Motion design
Left alone, an agent animates by reflex: every element fades and rises, one easing curve covers everything, a slow drift runs under every scene, and nobody counts how long a viewer needs to read a headline. The result looks generated and reads like slides. This skill replaces the reflexes with decisions: what the motion is for, how long each part takes, when it must be still, and what makes it unsafe for some viewers.
It is tool-agnostic. It covers the craft of timing, sequence, text, framing and accessibility for video and UI. It holds no engine code, and the build steps live elsewhere (see the video-production playbook for the end-to-end workflow).
Using the numbers
Every number here is a default, tagged by how well it is backed:
| Tag | Meaning |
|---|---|
| std | A standard or specification (WCAG, EBU). Treat as a floor or a hard limit |
| src | Published guidance from one named source. Good starting point, check it fits the medium |
| heur | Practitioner heuristic with no source, or derived from sourced figures. Replace it when the brief, the brand or a reference video says otherwise |
The research notes list each source: research-notes. A reference video or a brand guide from the user beats every default below.
1. Decide what the motion is for
Pick the job before picking a curve. If none fits, hold still.
| Job | Motion serves it by |
|---|---|
| Direct the eye | Moving the thing to look at first, or the next thing |
| Show cause and effect | Starting a reaction on the frame of its cause |
| Show change | Moving or morphing the same object so the viewer tracks identity |
| Set mood | Speed, ease and amplitude as one consistent voice |
| Pace | Contrast between fast and still passages |
Write one line per scene: what the viewer sees first, second, third. Motion starts in that order. A scene with no such line is decoration, and decoration is the first thing to cut.
2. Turn adjectives into numbers
What ships with it
6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 3d ago First seen · 158 lines · 65 tokens per session scan A 27c1bd37ab78
motion-design is a skill published in the GitHub repository krzysztofsurdy/code-virtuoso (36 stars, last pushed 2d ago), licensed MIT. It adds 65 tokens to every session and 2,778 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-23.
Other skills, from other repositories
html-visual
Generate an interactive single-file HTML visualization — mockup, wireframe, ERD, flowchart, chart, slides, architecture diagram, dashboard, timeline, mindmap, kanban, or table. Use when the user wants something rendered rather than described: a UI mockup or wireframe, a database schema as an ERD, business logic as a…
sag
ElevenLabs text-to-speech with mac-style say UX.
claude-design
Use this skill when the user asks for design work that would normally fit Claude Design, but the agent is running in a CLI/API environment instead of the hosted Claude Design web UI.
marketing-collateral-design
Use this skill to create professional static promotional graphics whose typography, claims, and contact details must remain exact. The core production rule is hybrid, not one-shot: generate or source imagery separately, then compose real text and vector elements deterministically in HTML/CSS/SVG. Image models are art…
hermes-themes
Author a Hermes skin — one YAML file that themes the CLI, the TUI, and the desktop GUI at once. The skin engine (hermescli/skinengine.py) resolves the active skin and the gateway pushes it to every surface, so a file dropped in /.hermes/skins/ is the theme analogue of a plugin: no code, all surfaces. This skill covers…
design-an-interface
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".