Skills

Your agent can already write code. Space UI skills give it the judgement: the rules, values and hard-won lessons behind our components, written down so Claude Code, Cursor, Windsurf, Codex or Antigravity apply them on their own.

Each skill installs through the shadcn CLI into .agents/skills/, where agents discover it automatically. No Space UI code is required: the rules work with any stack and any design system.

Available Skills

Motion@spaceui/motion

Space Motion

Timing, transitions, pacing and storytelling, plus frame-perfect 4K export for launch films built in code.

View details

More skills are on the way.

Space Motion

Teaches your agent how things should move: arrivals in 350ms, text that comes into focus, scenes that arrive over the last frame instead of fading out, sound only on key actions, and exports rendered frame by frame instead of screen-recorded.

Code

npx shadcn@latest add @spaceui/motion

Timing: exact durations, easings, distances, blur and stagger, and when each one applies.
Films: scrubbable timelines, transitions, pre-mounting, driving live components, sound cues.
Storytelling: beat order, copy that sells, emoji as punctuation, layout per scene.
Rendering: 4K 60fps exports with zero dropped frames on a virtual clock.

It also points your agent to @usespaceui/emoji, @usespaceui/sounds and these docs for components to film.

Prompt to start

Paste this into your agent, swap the brackets, and it installs the skill before it starts:

Code

Hey! I want to make a [10-second] opener for my product [Product name]: [one line on what it does and who it's for].

First install the Space Motion skill and follow it for everything that moves:
npx shadcn@latest add https://www.spaceui.one/r/motion.json

Then:
1. Propose the beats and the copy, one line per scene, and wait for my OK before animating.
2. Build it as a scrubbable page with one clock (?t= jumps to a moment).
3. Use animated emoji from @usespaceui/emoji and sounds from @usespaceui/sounds on key actions only.
4. When I approve it, export it frame by frame in 4K 60fps, not by recording the screen.

System prompt

For agents and tools that take standing instructions (Claude Projects, custom GPTs, Cursor rules, CLAUDE.md):

Code

You are a motion designer who ships in code. For any animation, transition, product video or opener, follow the Space Motion skill: read .agents/skills/space-motion/SKILL.md, or fetch https://www.spaceui.one/r/motion.json and read its files if it isn't installed.

- Arrivals take ~350ms with a smooth ease-out; close faster than you open; never fade a scene out, let the next one arrive over it.
- Reveal text by focus: word by word, 12px rise, 8px blur, 40ms stagger. Swap words with a blur swap, never a jump.
- One idea per scene, two lines max, no dead air past 0.4s. Copy sells a concrete benefit, no filler adjectives.
- Film the real product and drive it; don't mock it up. Fit each component to its frame.
- No borders or shadows for depth; two tones and soft continuous corners.
- Sound only on key actions. At most one animated emoji per line.
- Everything is a function of one clock, so playback, scrubbing and export match. Warm heavy scenes up before they appear.
- Agree on the beats and copy before animating. Check your work frame by frame at specific timestamps.
- Export by rendering frames on a virtual clock, never by screen recording.

Using Skills

Skills in .agents/skills/ are picked up automatically. Describe the job and the matching skill kicks in:

Code

Make a 45-second launch video of our landing page, then export it in 4K.

To call one explicitly, name it:

Code

Review the transitions of this dialog with space-motion.

In editors that don't discover skills on their own, point to the file:

Code

Follow the rules in .agents/skills/space-motion/SKILL.md for every animation in this PR.