Motion and Microinteractions Skill for Codex

Plan short, interruptible transitions for menus, toggles, and overlays. It helps clarify what changed and check behavior under both standard and reduced-motion preferences.

中文

Install in Codex

Use a Codex environment that can discover project skills. The example can be tested in a local project.

In a temporary directory, run git clone https://github.com/Eldergenix/Codex-Design.git. Enter the clone, run git checkout --detach 99b4b08ff62b8dd3a7a112438c1460fd6a02d09c, and review the pinned SKILL.md.
Copy the entire skills/motion-and-microinteractions folder to .agents/skills/motion-and-microinteractions in your own project, keeping its scripts, templates, and references together.
Open Codex in that project. Choose the skill with /skills or mention $motion-and-microinteractions, then run the example below. Restart Codex if the list does not refresh.

Example task

Review a sample settings page where the menu slides in and a toggle label fades out and back in. Ask for clear state feedback, a reduced-motion behavior, and a test that opens and immediately closes the menu.

What to check

The end state remains clear for the menu and toggle. Rapid actions can interrupt the transition. Text remains visible and controls remain usable with reduced motion enabled.

Original SKILL.md on GitHub · Updated 2026-11-11

Frequently asked question

Which interactions benefit from animation?

Start with changes that need to communicate position, selection, or hierarchy. Test the timing, interruption, and reduced-motion behavior on a small component first.