Motion Lexicon Skill: Motion Design for AI Coding Agents

What is the motion-lexicon skill?

The motion-lexicon skill lives in skills/motion-lexicon inside the motion-lexicon repository, which also ships a React library of 100 components, 10 Page Blocks and 44 motion primitives. The skill is versioned on its own and is currently at 4.2.0.

Its SKILL.md frames motion as a design system with two equal parts. Motion Primitives describe one precise behavior. Components combine behaviors into a complete interaction your agent can copy. Page composition then places those interactions inside a coherent product surface.

The six modes

Every request is sorted by a signal in what you ask. The agent picks one mode, loads only the reference files that mode needs, and returns the deliverable listed beside it.

Rules it applies to every motion

• Start from a product event such as a press, a selection, a route change or a status update, and say what the user sees before and after.
• One primary visual actor per beat and at most two supporting actors, each tagged as trigger, hero, status, record or environment.
• Arrival motion uses cubic-bezier(.23, 1, .32, 1) over roughly 200 to 280 ms. Leaving motion uses the same curve over roughly 110 to 180 ms.
• Move work with transform and opacity, and let a second user action interrupt, reverse or settle the first.
• Include a reduced-motion plan and keyboard and focus behavior in every composed, implemented or reviewed interaction.

Who the motion-lexicon skill is for

Best for

• Product teams that want a motion decision for a specific UI event instead of a generic fade or slide.
• React and TypeScript projects, since a greenfield page defaults to that stack and the registry sources are React.
• Reviews of existing animation where you want ranked fixes rather than a loose opinion.
• Chinese and English speakers, because the skill answers in the language of the request.

Not for

• Plain copy edits, static token changes and breakpoint tweaks. The skill description keeps those outside its scope unless a visible interaction is involved.
• Data-processing tasks with no user-visible motion decision.
• Hosts without Tailwind. Every current registry source uses Tailwind utility classes, so the skill falls back to plain semantic UI when Tailwind cannot be added.

Use it with UiChemy

Motion Lexicon produces React and Tailwind code, and WordPress does not run that directly. Use Implement mode to get portable HTML, CSS and JS, then rebuild the section in UiChemy Composer, which writes real HTML, CSS and JS inside Elementor or Gutenberg. Click Get Started on uichemy.com. For pairing ideas, see motion-system and animation-vocabulary.

How to install Motion Lexicon Skill: Motion Design for AI Coding Agents

git clone https://github.com/Ryan-yang125/motion-lexicon.git

1. Clone the repository

   Run git clone https://github.com/Ryan-yang125/motion-lexicon.git. The skill sits in the skills/motion-lexicon folder.

2. Copy the skill folder

   Copy skills/motion-lexicon to the place your AI coding agent loads skills from. Take the whole folder, because SKILL.md points to reference files and assets beside it.

3. Check Tailwind for page work

   Build Page needs a host that compiles Tailwind, since the registry sources use Tailwind classes. Without it, the skill builds plain semantic UI for that region.

4. Ask a motion question

   Describe a UI event and the feeling you want, or name a page to build, and the agent selects a mode on its own.

Check that it loaded

Ask which motion suits a successful save button. The agent should answer in Recommend format: a candidates table, a Pick line with an exact published ID, and trigger, timing and accessibility notes.

Read the official instructions on GitHub

Key features

• Six request modesBuild Page, Recommend, Compose, Implement, Review and Contribute each have a signal, a reference set and a deliverable, so the agent does not improvise the output shape.
• Deterministic mode priorityA complete page or multi-region surface uses Build Page. A request for code on one interaction uses Implement. A request only for a plan or Blueprint uses Compose.
• Actor and beat disciplineEach beat gets one primary visual actor and at most two supporting ones, with a stated purpose: orient, confirm, preserve continuity, reveal or recover.
• Default timing and easingArrival and leaving motion share one curve, cubic-bezier(.23, 1, .32, 1), at roughly 200 to 280 ms in and 110 to 180 ms out.
• Reduced motion and focus planIn reduced motion the skill keeps state, hierarchy, focus and feedback through a static state or a short opacity crossfade. Keyboard behavior is part of every design.
• Host inspection before editsBuild Page requires a Host inspection table and a compact Page Plan before any file changes. Each host value cites the inspected file path.
• Registry components, not approximationsFor a published component the agent reads the source from motion-lexicon.pages.dev/r/ID.json, installs the delivered files and dependencies, and adapts only props, labels, data and placement.
• Page acceptance tableThe handoff repeats the plan and adds observed rows: build result, 320, 390, 768 and 1440 px checks, light and dark themes, keyboard path, reduced motion and runtime errors.
• 44 px target auditInteractive nodes must measure at least 44 by 44 CSS px. The agent lists offenders at each viewport, fixes them and reruns the audit.
• Bilingual recommendationsRecommend mode returns a table of up to three candidates with exact published IDs, then a Pick line with trigger, timing and accessibility treatment.

Frequently asked questions