Interaction Motion

Keep the next interaction predictable.

A dismissed panel returns, results lag behind the query, or long content is clipped. Repair one concrete problem in an existing web interface, recording the failure and replaying the same actions after the fix.

Editable source repairs and a cause explanation, preserving the existing page and business meaning.
Before/after HTML and JSON reports, screenshots and a reusable plan for the same interaction sequence.
Recorded coverage of rapid input, keyboard use, mobile widths and reduced motion.

Available now · v1.0.0

USD 9.99 · Single purchase, or get access through Pro.

What would you like to make?

Rapid overlay toggles

A dismissed detail panel returns or shows the previous selection.

The latest intent wins; stale responses do not replace current content, and dismissal restores a sensible focus.

Stale query results

Results no longer match the query after rapid typing or filtering.

Preserved input and checks for stale responses, empty results, errors and retries.

Expansion and long content

Expansion flashes or longer content is clipped on a phone-width layout.

Interruptible state changes, complete content and reduced-motion checks.

Close and reopen a schedule before it settles

Actual output · original fictional example

The input

An original fictional notification settings page with times, longer notes and language switching.

The work

Check the final expanded state after interruption, preserved notes and keyboard focus; retain each outcome in the report.

Browse all output examples

English interaction · actual runtime — Rapidly close and reopen while retaining times and notes; original fictional scenario.
Chinese long content · actual runtime — Inspect longer Chinese content and editable fields.
Check report · actual output — Per-check results for a declared plan; failures and unverified outcomes are not passes.

From your material to the finished files

Reproduce and define
Identify the trigger and what must persist: content, focus and selection. Define how a new intent supersedes an earlier one.
Repair within your design
Correct state ownership and stale responses before adjusting necessary motion. Keep the existing technology and visual system.
Replay and retain evidence
Compare the same plan before and after. Exercise relevant languages, widths and edge cases, distinguishing automated checks from real-use validation.

Bring this task into your Agent

Prepare these materials

Provide editable source, the local startup command if known, and the interaction problem. The Agent inspects source, selects targets and writes the check plan; you do not hand-write JSON.

Sign in to acquire the package.
Extract the entire folder into your project: .agents/skills/interaction-motion/SKILL.md (Codex) or .claude/skills/interaction-motion/SKILL.md (Claude Code).
Open a new chat in that project, attach your materials and replace the bracketed fields in the brief below. Ask the Agent to check package instructions and dependencies first.

Use interaction-motion and read SKILL.md first. Source: [project path]. Startup: [command or discover from project]. Page: [local URL / route]. Reproduce stale content or returning overlays during rapid open, close and reselection. Define the latest intent, request ownership and focus after dismissal; preserve current input and design.Record the failure and expected behavior, apply a minimal repair, then compare the same check plan before and after. Cover relevant languages, desktop/mobile widths and keyboard input. Deliver source edits, state notes and HTML/JSON/screenshot evidence, stating unverified scope. Identify missing inputs instead of substituting the bundled example.

Installation & troubleshooting guide

The first result can be revised

After changing text or timing, preserve prior evidence and rerun affected checks. Recapture the baseline when behavior or selectors change.

What the package includes

Editable source repairs and a cause explanation, preserving the existing page and business meaning.
Before/after HTML and JSON reports, screenshots and a reusable plan for the same interaction sequence.
Recorded coverage of rapid input, keyboard use, mobile widths and reduced motion.

What you provide separately

Node 24, Playwright 1.58.2, Chromium or existing Chrome, and a runnable local project.
Your own Codex/model access. Dependency setup needs a network connection; project dependencies are separate.

Before you start

How does this differ from page design or video Skills?

It repairs actual behavior in an existing web interface and delivers source edits and retest evidence. Its output is a working repair, with your existing design retained.

Can it repair from a screenshot alone?

A screenshot can illustrate a symptom. Repair needs editable source and a working local preview; missing inputs are called out rather than replaced with the bundled example.

What environment and costs are required?

Bring Codex, Node 24, the project runtime and Playwright with Chromium or existing Chrome. Dependency installation needs internet access. Model and Agent fees are separate; no paid API is required.

Do passing checks certify smoothness?

No. Checks establish outcomes for the recorded actions and settings; motion still needs visual review. Mobile-width emulation is not a real phone test, and this version has no real-user benefit or cross-browser certification.

How do I purchase and use it?

Purchase individually or download with an active Pro membership. Extract the complete folder to .agents/skills/interaction-motion/ in your project and ask Codex to read SKILL.md. Provide editable source, a startup command and a concrete symptom; the Agent reproduces, repairs and records before/after checks.

One related interaction cluster on a local page at a time, requiring source and preview. Not a universal automatic fixer, native-app or video tool; no business-lift, device-performance or accessibility certification.

More to make

Waitlist Landing Page — Create a responsive prelaunch page with a product story, FAQ and clearly labeled local demo form. Includes editable source and desktop/mobile previews.
SaaS Landing Page — Create a full SaaS marketing prototype with positioning, features, workflow, billing-period controls, FAQ and an implementation handoff.
Editorial SaaS Design — For writing and knowledge products. Upright editorial serif, generous paper margins, deep green actions, asymmetric manuscript composition. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.
Industrial Catalog Design — For hardware, furniture and industrial products. Ruled catalogue grid, square geometry, product-first imagery and compact model annotations. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.