interfaces-that-feel
Apply an emotional resonance lens to a UI that is technically correct but flat, prescribing changes at the copy, motion, and interaction layer. Use when a design tests fine but lands cold. For the polish-perception argument, use aesthetic-usability (ui-design).
- Installs
- 1.5K
- Last 24h
- +23
- Trending rank
- #5290
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/designer-skills --skill interfaces-that-feel- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads interfaces-that-feel automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Interfaces That Feel
You evaluate interfaces through one question: does this feel like it was made by a human who thought about how you'd feel using it?
Technical correctness is the floor. The ceiling is emotional legibility — a product that knows you're a person.
What You Do
You translate design intentions into felt experience. You start with the state the person is in (not the task they're performing), find vocabulary for that feeling in the physical world, then map it to behavioral properties in the interface.
The Translation Process
1. Name the felt state — What is the person actually experiencing when they arrive at this moment? Waiting anxiously. Recovering from an error. Celebrating a small win. Being overwhelmed by options.
2. Find the physical analogue — What in the physical world has that quality? Soft surfaces absorb impact. A held breath before exhaling. The slow release of a door. That's the behavioral vocabulary.
3. Extract the behavioral property — From the physical analogue: weight, resistance, speed, recovery arc, rhythm.
4. Apply to the interface — Which layer carries it? Easing curve, delay, copy tone, color temperature, spacing, animation duration.
Emotional Timing Principles
- Information weight: heavy news arrives slowly; good news can be instant
- Recovery space: after an error, give the user 300–600ms before the next prompt — don't rush the recovery
- System error shame: never make the user feel responsible for the system's failure; copy must own it
- Celebration arc: micro-wins deserve acknowledgment; don't absorb them silently
- Loading as mood: the loading state is not neutral — it sets expectation; match it to what's coming
Copy Voice by State
| State | Voice |
|---|---|
| Loading | Present and calm — "Getting your data" not "Loading..." |
| Empty | Invitational — tell them what belongs here |
| Error (user) | Clear, directive, blame-free — one specific next step |
| Error (system) | Own it, apologize briefly, offer a path forward |
| Success | Warm and brief — acknowledge, don't overdo it |
| Onboarding | Contextual, not tutorial — what they can do, not how to use the app |
Motion as Emotional Signal
Easing communicates intent. Ease-in means weight and momentum. Ease-out means natural deceleration, like something soft landing. Linear is mechanical — avoid it for anything that touches human feeling.
Spring physics convey responsiveness. Stiffness and damping are emotional decisions: a stiff spring is snappy and confident; a loose spring is playful and forgiving.
Duration: 150–300ms for UI response. 400–600ms for transitions that carry meaning. Never animate longer than the user's patience for the task.
Review Checklist
Before and after each design pass:
- What is the person feeling when they hit this state?
- Is the interface acknowledging that feeling or ignoring it?
- Does the copy sound like a person wrote it?
- Does the motion convey intent or just fill time?
- If you stripped all color and imagery, would the emotional signal survive?
Reference Aesthetic
How We Feel, Headspace, Gentler Streak, Amie, Arc Browser — products where emotional timing, copy voice, and motion are doing the work, not decoration.
Best Practices
- Start with the felt state of the person, not the task
- Treat copy as interaction design — every word is a decision
- Reduce motion before adding it; every animation needs a reason
- Test with reduced-motion preferences enabled
- The absence of friction is not warmth — warmth is active, not passive
FAQ
What does the interfaces-that-feel skill do?
Apply an emotional resonance lens to a UI that is technically correct but flat, prescribing changes at the copy, motion, and interaction layer. Use when a design tests fine but lands cold. For the polish-perception argument, use aesthetic-usability (ui-design).
How do I install interfaces-that-feel?
Run npx skills add https://github.com/owl-listener/designer-skills --skill interfaces-that-feel in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/interfaces-that-feel/ (personal) or .claude/skills/interfaces-that-feel/ (project).
Which AI agents can use interfaces-that-feel?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is interfaces-that-feel safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains interfaces-that-feel?
It is published by owl-listener in owl-listener/designer-skills. It has 1,524 recorded installs.
More from owl-listener/designer-skills
presentation-deck
owl-listener/designer-skills
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use case-study; for the written argument use design-rationale.
typography-scale
owl-listener/designer-skills
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use readable-measure; for judging type on an existing screen use critique-typography (visual-critique).
illustration-style
owl-listener/designer-skills
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use icon-system (design-systems).
visual-hierarchy
owl-listener/designer-skills
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use critique-visual-hierarchy (visual-critique).
color-system
owl-listener/designer-skills
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use dark-mode-design; for chart palettes use data-visualization; for multi-brand token architecture use theming-system (design-systems).
dark-mode-design
owl-listener/designer-skills
Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.