agentsclimarketplace

Interaction design

Skill Suraj787/motif/skills/interaction-design

Open-source interaction-design intelligence for AI coding agents - securely discover, select, adapt and validate UI motion, effects and interaction patterns.

Install
npx -y skills add Suraj787/motif --skill interaction-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when product context is known and you need to convert the user's need into a precise interaction objective and select the UI pattern that satisfies it before any effect is chosen.

SKILL.md

1.4 KB, as published. Nobody here has run it

Interaction Design

Responsibility: Translate context into an interaction objective and a pattern. This is the PATTERN-before-EFFECT gate.

When to invoke

  • After product-context-analysis (steps 5-7 of the root workflow).
  • Whenever someone proposes an effect without a stated objective.

Inputs

  • Product type, page/screen type, user + primary task.
  • The interaction problem statement.

Outputs

  • A single-sentence interaction objective: what the user must understand, feel, or accomplish.
  • A chosen pattern (e.g. progressive disclosure, optimistic feedback, focus guidance, state transition, affordance hint) with rationale.
  • A constraint set passed to effect-discovery (attention budget, density, frequency of use, criticality).

How it connects

  • Reads intelligence/ pattern catalogues and objective→pattern mappings.
  • Produces the query that effect-discovery runs against registry/.
  • Never selects a concrete effect, that is effect-selection's job.

Notes

If the objective can be met with no motion at all (layout, copy, color, spacing), say so and stop. The strongest interaction is often the absence of an effect.

Gives 0 of the 12 instructions most design frontend skills give

Counted across 1,170 of the 1,878 authors here whose files we hold, read 2026-08-06

  • use css variables for color consistencyin 73 of 1170, across 24 files
  • match implementation complexity to the aesthetic visionin 70 of 1170, across 20 files
  • commit to one bold aesthetic direction before codingin 70 of 1170, across 25 files
  • add atmospheric background effects and texturesin 58 of 1170, across 10 files
  • use unexpected spatial compositions and layoutsin 55 of 1170, across 7 files
  • implement real working codein 55 of 1170, across 7 files
  • vary themes and aesthetics across different designsin 48 of 1170, across 7 files
  • launch chromium in headless modein 47 of 1170, across 4 files
  • close the browser when donein 47 of 1170, across 4 files
  • run provided scripts with help flag firstin 47 of 1170, across 4 files
  • use descriptive selectors for elementsin 47 of 1170, across 4 files
  • wait for network idle statein 46 of 1170, across 3 files

Said here and by no other author read

  • define a single-sentence interaction objective
  • choose a pattern with rationale
  • pass a constraint set to effect discovery
  • read pattern catalogues and mappings
  • stop if no motion is required

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.