# Improve UI Interaction Design

Modern interfaces often feel unclear when motion and feedback are inconsistent. This skill helps Claude, Codex, and Claude Code design accessible transitions, microinteractions, and loading states.

## Install

```bash
npx skillstore add wshobson/interaction-design
```

## Metadata

- Status: approved
- Slug: wshobson-interaction-design
- Skillstore revision: r1
- Version status: missing
- Tree hash: 96b049afee995dde06f025d430a9325381510d01bd2697f4543a9ed5927b7b03
- Author: wshobson
- GitHub username: wshobson
- License: MIT
- Repository: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/interaction-design/
- Ref: 36e07d5e13068e5be64447e8f20b427cf2cbd21a
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 75
- Public page: https://skillstore.pages.dev/skills/wshobson-interaction-design
- Manifest: https://skillstore.pages.dev/api/skills/wshobson-interaction-design/manifest

## Capabilities

- Designs button, form, navigation, toast, and gesture feedback patterns.
- Provides timing, easing, and spring guidance for UI motion.
- Shows loading states, skeleton screens, progress indicators, and success states.
- Applies reduced motion and accessibility guidance to animation decisions.
- References Framer Motion, CSS transitions, Web Animations API, and scroll animation patterns.

## Use Cases

- Polish Checkout Feedback: Add loading, success, error, and disabled states that make form submission status clear.
- Implement Motion Tokens: Create consistent timing, easing, and transition guidance for reusable interface components.
- Improve Navigation Transitions: Plan page, tab, menu, and scroll animations that preserve context during movement.

## Prompt Templates

### Add Basic Feedback

```
Improve this button interaction with clear hover, press, loading, success, and error states. Respect reduced motion preferences.
```

### Design Form Motion

```
Review this form flow and propose interaction patterns for validation, character limits, submission progress, and error recovery.
```

### Create Transition Guidelines

```
Define motion rules for modals, menus, tabs, page transitions, and notifications. Include timing, easing, accessibility, and performance guidance.
```

### Audit Motion System

```
Audit the current interaction design for inconsistent motion, unclear feedback, performance risks, and accessibility gaps. Prioritize fixes by user impact.
```

## Limitations

- It provides guidance and examples, not a full design system generator.
- It does not test animation performance on real devices by itself.
- It assumes the project already has a frontend framework or styling approach.
- It does not replace product research or usability testing.

## Best Practices

- Use motion to explain state changes, not to decorate every action.
- Prefer transform and opacity for smooth animations and lower layout cost.
- Respect reduced motion preferences for every meaningful animation.

## Anti Patterns

- Animating width, height, top, or left for frequent UI movement.
- Using long transitions that delay user actions or hide feedback.
- Adding motion without clear accessibility, performance, or product purpose.

## Security Audit

- Audited at: 2026-07-07T07:36:36.855\+00:00
- Summary: All static findings were adjudicated as false positives caused by Markdown code fences, JSX template literals, CSS examples, browser UI examples, and documentation links. No evidence found of prompt injection, malicious intent, credential access, data exfiltration, or executable installer behavior in the reviewed files.

## Stats

- Views: 326
- Downloads: 37
- Favorites: 1
- Popularity score: 0