Initial implementation of interactor by ydaniv · Pull Request #242 · wix/interact

ydaniv · 2026-06-24T18:34:38Z

Description

Implementing the /interactor skill for adding interact to a page, either using /web or /react, or editing an existing interact integration.

github-actions · 2026-06-26T13:24:09Z

Generated `llms.txt` preview

llms.txt

# @wix/interact

> Declarative, configuration-driven interaction library — web-native, AI-ready, and framework-agnostic.

- Install: `npm install @wix/interact @wix/motion-presets`
- Three entry points: vanilla JS (`@wix/interact`), React (`@wix/interact/react`), Web Components (`@wix/interact/web`)
- Five trigger types: hover, click, viewEnter, viewProgress, pointerMove
- Effects via named presets (`@wix/motion-presets`), keyframes, CSS transitions, or custom JS callbacks
- Configs are JSON-serializable -- designed for LLM generation

## Docs

- [Full Reference](https://wix.github.io/interact/rules/full-lean.md): Declarative configuration-driven interaction library. Binds animations to triggers via JSON config. (671 lines)
- [Integration Guide](https://wix.github.io/interact/rules/integration.md): Rules for integrating `@wix/interact` into a webpage — binding animations and effects to user-driven triggers via declarative configuration. (307 lines)
- [Validation Guide](https://wix.github.io/interact/rules/validate.md): Rules for using `@wix/interact-validate` — validate an `InteractConfig` before it reaches the runtime. (271 lines)

## Optional

- [Click Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/click.md): This document contains rules for generating click-triggered interactions in `@wix/interact`. (189 lines)
- [Hover Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/hover.md): This document contains rules for generating hover-triggered interactions in `@wix/interact`. (191 lines)
- [PointerMove Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/pointermove.md): These rules help generate pointer-driven interactions using `@wix/interact`. (279 lines)
- [ViewEnter Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/viewenter.md): This document contains rules for generating interactions that respond to elements entering the viewport using the `@wix/interact`. (197 lines)
- [ViewProgress Trigger Rules for @wix/interact](https://wix.github.io/interact/rules/viewprogress.md): These rules help generate scroll-driven interactions using `@wix/interact`. (196 lines)
- [All rules in one file](https://wix.github.io/interact/llms-full.txt): Complete concatenation (2301 lines)

llms-full.txt header

# @wix/interact v2.5.1 -- AI Rules Reference
# https://wix.github.io/interact/llms.txt
# 8 files, 2301 lines

Download full files from workflow artifacts, or run node scripts/generate-llms.mjs locally.

ameerf-wix · 2026-07-02T10:27:02Z

+    {
+      "id": 1,
+      "name": "plain-html-add-entrance-and-hover",
+      "prompt": "I have a plain static HTML landing page — no build tools, no framework, I just edit index.html and open it in the browser. I want to add some motion: make the hero section fade in when it scrolls into view, and make the 'Get Started' CTA button grow a little when you hover it. I'd like to use Wix's @wix/interact library for this. Walk me through it and give me the code.",


these prompts are very detailed compared to the average-user's prompt. Maybe we should have some simpler prompts for evaluations?

I think it's fine. Yeah, not a one liner, but reasonable.

ameerf-wix · 2026-07-02T10:27:34Z

+      "id": 1,
+      "name": "plain-html-add-entrance-and-hover",
+      "prompt": "I have a plain static HTML landing page — no build tools, no framework, I just edit index.html and open it in the browser. I want to add some motion: make the hero section fade in when it scrolls into view, and make the 'Get Started' CTA button grow a little when you hover it. I'd like to use Wix's @wix/interact library for this. Walk me through it and give me the code.",
+      "expected_output": "Sets up @wix/interact via the /web (custom-element) entry point loaded from a CDN (no build step). Registers presets with Interact.registerEffects before create/generate. Hero: viewEnter trigger + FadeIn namedEffect with triggerType:'once', wrapped in <interact-element data-interact-key=...>, with FOUC handled correctly (injected generate(config, true) output). CTA hover-grow avoids the hit-area-shift pitfall (animates a child via selector, or uses a state/transition effect, or targets a separate key) rather than scaling the same hovered element. generate() called with useFirstChild=true for the web entry point. No invented preset names; no Bg*/DVD presets.",


some of these could be validated deterministically

We can try let the model see if it can use more static validation for these

ameerf-wix · 2026-07-02T10:28:39Z

+      "assertions": [
+        "Uses @wix/interact correctly: imports the Interact API and calls Interact.create(config) with a valid InteractConfig.",
+        "Registers presets before use: Interact.registerEffects(...) is called BEFORE create/generate when a namedEffect is used.",
+        "Hero entrance correct: trigger 'viewEnter' + FadeIn namedEffect with triggerType:'once'.",
+        "FOUC handled: generate() output injected.",
+        "generate() useFirstChild matches the entry point (true for /web custom elements, false for vanilla).",
+        "Hover-grow avoids hit-area shift: scales a child/separate target or uses a state/transition effect, not the same hovered element.",
+        "No invented or forbidden presets (no Bg*/ImageParallax/DVD/made-up names).",
+        "Runnable with no build step: index.html is self-contained (CDN/module import)."


Also here we could have some of those validated deterministically. Some can even be checked statically.

Also here, we can try let the model see if it can use more static validation for these

ameerf-wix · 2026-07-02T10:30:05Z

+| Package               | Role                                                                                                                         | You touch it…                                                                             |
+| :-------------------- | :--------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------- |
+| `@wix/interact`       | Declarative layer. Binds **triggers → effects** via an `InteractConfig`. Ships vanilla / React / Web-Component entry points. | Always. This is the API.                                                                  |
+| `@wix/motion-presets` | ~62 ready-made named effects (entrance, scroll, ongoing, mouse). Referenced as `namedEffect: { type: 'FadeIn' }`.            | When you want a prebuilt effect (the common case).                                        |


Let's remove the amount of presets that usually become stale fast

Suggested change

| `@wix/motion-presets` | ~62 ready-made named effects (entrance, scroll, ongoing, mouse). Referenced as `namedEffect: { type: 'FadeIn' }`. | When you want a prebuilt effect (the common case). |

| `@wix/motion-presets` | ready-made named effects (entrance, scroll, ongoing, mouse). Referenced as `namedEffect: { type: 'FadeIn' }`. | When you want a prebuilt effect (the common case). |

Accept changes

ameerf-wix · 2026-07-02T10:34:35Z

+
+1. Choose the **trigger** (see decision table below).
+2. Choose the **effect**: prefer a `namedEffect` preset (browse `references/presets.md`); fall back to inline `keyframeEffect` for custom keyframes, or `customEffect` for non-CSS (SVG/canvas/text).
+3. Set the **playback field** the trigger needs: `triggerType` for time effects on hover/click/viewEnter; `stateAction` for CSS-state (transition) effects; `rangeStart`/`rangeEnd` for `viewProgress`. Never set both `triggerType` and `stateAction` on one effect.


playback field is a weird name that does not have any references in our project and seems to be wrong here. Let's use auxiliary fields or something like that

Everything related to the effect is usually called "playback". Also in specs. This is quite common.
Regarding triggerType and stateAction, while I agree they're more about the action than playback, they're still set on the effect, so I think models will understand it

ameerf-wix · 2026-07-02T10:50:16Z

+| `triggerType`      | Behavior                                                |
+| :----------------- | :------------------------------------------------------ |
+| `'once'` (default) | Play once, the first time it enters. The entrance case. |
+| `'repeat'`         | Replay every time it re-enters.                         |
+| `'alternate'`      | Play forwards in, reverse out.                          |
+| `'state'`          | Play on enter, pause on exit.                           |


this (and only this IMO) is the kind of information that is needed in these references - translation from the type to the semantic meaning. Other than that, almost everything here can be inferred from types and validations

The schema and types don't contain descriptions. Here we have more descriptions to explain what things do for the model.

ameerf-wix · 2026-07-02T10:52:26Z

+| `'remove'`           | remove on enter                     | remove on click  |
+| `'clear'`            | clear all states on enter           | clear all states |
+
+**CRITICAL — hit-area shift:** if a hover effect changes the element's size or


again - could be added to interact-validate

ameerf-wix · 2026-07-02T11:00:01Z

@@ -0,0 +1,143 @@
+# Motion engine reference (@wix/motion) — escape hatch
+
+`@wix/motion` is the engine `@wix/interact` is built on. **On the interact-first


is this necessary? Do we actually have use-cases where we want the agent to use motion directly?

Maybe not. I thought it would be interesting to leave it out there just for kicks. WDYT?

ameerf-wix · 2026-07-02T11:05:27Z

@@ -0,0 +1,218 @@
+# Preset catalog (@wix/motion-presets)
+
+The 62 production presets, by category, with parameters and defaults — plus an


remove exact number

Yes, remove exact number

ameerf-wix · 2026-07-02T11:08:56Z

+
+---
+
+## Entrance (19) — for `viewEnter` (time-based)


please remove all the numbers that reflect amounts of presets - they give no new information (counting lines in tables is not hard) and they just become stale

Yep, let's remove all the exact number of presets

ydaniv added 6 commits June 24, 2026 21:31

Initial implementation of interactor

15d72d7

Fixed format

bfc4903

Merge branch 'master' into interactor-skill

0ac5fcf

Fixed some issues in SKILL.md

f51a6ab

More fixes to SKILL.md

46d3e21

More fixes to docs and rules

5ef149c

ydaniv added 3 commits June 29, 2026 17:21

Review interactor skill references

04b2368

Merge branch 'master' into interactor-skill

2f112f0

Cleanup

118909f

ameerf-wix reviewed Jul 2, 2026

View reviewed changes

	\| `@wix/motion-presets` \| ~62 ready-made named effects (entrance, scroll, ongoing, mouse). Referenced as `namedEffect: { type: 'FadeIn' }`. \| When you want a prebuilt effect (the common case). \|
	\| `@wix/motion-presets` \| ready-made named effects (entrance, scroll, ongoing, mouse). Referenced as `namedEffect: { type: 'FadeIn' }`. \| When you want a prebuilt effect (the common case). \|

		@@ -0,0 +1,143 @@
		# Motion engine reference (@wix/motion) — escape hatch

		`@wix/motion` is the engine `@wix/interact` is built on. **On the interact-first

		@@ -0,0 +1,218 @@
		# Preset catalog (@wix/motion-presets)

		The 62 production presets, by category, with parameters and defaults — plus an

Uh oh!

Conversation

ydaniv commented Jun 24, 2026

Description

Uh oh!

github-actions Bot commented Jun 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Generated llms.txt preview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Jun 26, 2026 •

edited

Loading

Generated `llms.txt` preview