106.9K+Download
Skip to the usage guide
Interfaces That Feelby owl-listener

Interfaces That Feel Skill.

Connect interface copy and motion to the user's emotional state.

  • Interaction Design
  • Emotional States
Download OpenDesignView Usage Guide
Source Review · interfaces-that-feelSKILL.md
Task Connect interface copy and motion to the user's emotional state. Produces A description of the user's likely felt state at selected interface moments. Before You Start Bring the actual loading, error or completion state, including its copy and timing. Include audience research where available so inferred emotions can be separated from observed user behavior.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Connect interface copy and motion to the user's emotional state

Review emotional timing, error recovery and feedback, then translate user states into concrete copy and motion decisions.

Source-based workflowNot an execution benchmark

The Working Approach

Interfaces That Feel reviews a product moment through the state of the person using it. Waiting for a result, recovering from an error and completing a task require different signals. The skill maps those moments to concrete choices in copy, timing, easing and interaction behavior.

The source uses a translation process: name the felt state, find a physical analogy, extract a behavioral quality and apply it to the interface. It also checks whether motion has a reason to exist and whether the experience still works with reduced motion. This makes the skill suitable for a targeted pass on interfaces that function correctly but communicate poorly.

Expected Deliverables

  • A description of the user's likely felt state at selected interface moments.
  • Specific copy and timing recommendations linked to those moments.
  • A before-and-after review of emotional signals and reduced-motion behavior.
See the Example Brief

From Brief to Review

  1. 01
    Identify the moment

    Choose a loading, empty, error, success or onboarding state. Describe what the person may be experiencing and distinguish that assessment from directly observed user evidence.

  2. 02
    Translate feeling into behavior

    Find a useful physical analogy, such as resistance or settling. Extract the relevant quality and connect it to an easing, duration, spacing or copy decision.

  3. 03
    Revise the interface signal

    Make error recovery clear and blame-free, keep success acknowledgment proportionate and give loading copy a purposeful tone. Remove motion that only fills time.

  4. 04
    Review the result

    Compare the before and after experience, including reduced-motion preferences. Ask whether the emotional signal still survives when color and imagery are removed.

02 When to Use It

When to Use It

Bring the actual loading, error or completion state, including its copy and timing. Include audience research where available so inferred emotions can be separated from observed user behavior.

A Good Fit

  • Cold feedback statesA technically correct screen gives users little acknowledgment during waiting or recovery.
  • Copy and motion refinementThe team needs a reasoned treatment of error, success or onboarding moments.

Limits to Check

  • Interpretation needs contextThe skill's emotional reading is a design assessment, not proof of how every user feels.
  • Motion restraintThe source recommends reducing motion before adding it and testing reduced-motion preferences.
  • Guidance rather than outcome proofTiming recommendations do not establish improved satisfaction without user evidence.

Bring These Inputs

  • Selected statesProvide the loading, error, success or other moments to review.
  • User contextExplain the task, stakes and known research about the audience.
  • Existing implementationSupply current copy, timing and motion behavior.

03 Decisions That Matter

Decisions That Matter

  1. Reasoned timing

    Duration and easing are connected to an intended behavioral signal.

  2. Useful recovery copy

    Error messages can acknowledge responsibility and show a concrete next action.

  3. Restrained motion

    The review asks what an animation contributes before keeping it.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Provide the loading, error, success or other moments to review.

Upstream Source File
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/interfaces-that-feel/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use interfaces-that-feel to review our report-generation flow, including waiting, failure and completion states. Read the existing copy and inspect the actual timing. Start by stating the user's likely emotional context and label assumptions that are not supported by research. Propose concise copy and a small number of motion changes, explaining what each one communicates. Preserve the task's speed and clarity. Compare the experience with reduced motion enabled and identify signals that should remain understandable without animation. Keep the recommendations scoped to these three states.

Inspect the Result

Check the actual output against these observable criteria.

  • Each copy or motion proposal has a stated purpose in the selected state.
  • Assumed emotions are distinguished from actual research findings.
  • Reduced-motion behavior preserves necessary feedback and task clarity.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
owl-listener
Repository
owl-listener/designer-skills
Skill File
SKILL.md
License
MIT
Reviewed Snapshot
2026-11-02 · 9a6930cf84a8
Editorial Source Summary
Connect interface copy and motion to the user's emotional state.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does the skill simply add animation?

No. The source asks the agent to reduce motion first and give every remaining animation a reason.

Which interface layers can change?

The source discusses copy tone, timing, easing, color temperature, spacing and animation duration.

Does it include reduced-motion review?

Yes. Testing with reduced-motion preferences is part of its recommended practice.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/interfaces-that-feel/SKILL.md