# Build Responsive UI Micro-interactions

Abrupt interface changes make buttons, notifications, and panels harder to follow. This skill guides functional CSS and React animations with reduced-motion support and visual checks.

## Install

```bash
npx skillstore add iart-ai/micro-interaction
```

## Metadata

- Status: approved
- Slug: iart-ai-micro-interaction
- Version: 0.1.0
- Author version: 0.1.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: 0e63c70fbf05e8ec33aef7432ee494db68054fbb5607a9abf130d8ddbe7502cb
- Author: iart-ai
- GitHub username: iart-ai
- Repository: https://github.com/iart-ai/web-animation-skills/tree/b6dba3eb759726845a44163ff0bad70dd9e7fbb6/skills/micro-interaction
- Ref: c993c6abcbffafea2683d7748b53b3dfaf438415
- 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
- Quality score: 75
- Public page: https://skillstore.pages.dev/skills/iart-ai-micro-interaction
- Manifest: https://skillstore.pages.dev/api/skills/iart-ai-micro-interaction/manifest

## Capabilities

- Guide hover, press, and focus feedback with CSS transitions and Motion gesture props.
- Provide enter and exit patterns for toasts, drawers, and panels using AnimatePresence or modern CSS.
- Explain layout transitions, shared-element animation, and drag-to-reorder lists in React.
- Provide CSS recipes for toggles, loading indicators, popovers, and animated custom properties.
- Show reduced-motion guards with CSS media queries and Motion accessibility APIs.
- Describe standalone HTML demos with deterministic states and local Playwright screenshot verification.

## Use Cases

- Polish Interactive Product Controls: Add consistent press feedback, animated toggles, and loading transitions to existing product interfaces.
- Prototype Interface Motion: Create standalone HTML interaction demos with clear idle, active, and open states for visual review.
- Standardize Component Transitions: Define reusable timing, exit behavior, focus feedback, and reduced-motion patterns for shared components.

## Prompt Templates

### Beginner: Add Button Feedback

```
Add CSS hover, press, and keyboard focus feedback to my button. Keep feedback fast and respect reduced-motion preferences.
```

### Intermediate: Animate a Drawer

```
Create a standalone HTML drawer demo using modern CSS. Include open and closed states, reduced-motion support, and a fallback for unsupported browsers.
```

### Advanced: Build a Toast Stack

```
Animate my React toast stack with Motion. Use stable keys, AnimatePresence, and layout transitions so dismissed toasts exit while remaining items reposition smoothly.
```

### Expert: Verify Shared-element Motion

```
Build a React gallery with shared-element thumbnail transitions. Include reduced-motion behavior and deterministic preview states. Use local screenshots to inspect settled states and distortion.
```

## Limitations

- React animation examples require React and Motion; CDN-based standalone demos need network access.
- Modern CSS features require browser compatibility checks and fallbacks for unsupported browsers.
- Referenced screenshot helper scripts are not included in the supplied files.
- Examples are instructional snippets, not complete production components or an automated accessibility test suite.

## Best Practices

- Prefer transform and opacity for frequent motion, and keep most interaction transitions within 100 to 250 milliseconds.
- Preserve keyboard focus feedback and provide reduced-motion alternatives for spatial animation.
- Verify meaningful states with local screenshots, and check exit timing, layout distortion, and browser fallbacks.

## Anti Patterns

- Do not add long decorative motion that delays routine interaction feedback.
- Do not remove elements before exit animations finish or use unstable keys for animated lists.
- Do not assume modern CSS support or ignore reduced-motion preferences.

## Security Audit

- Audited at: 2026-11-06T15:33:15.777\+00:00
- Summary: All 55 static findings are false positives involving documentation syntax, JavaScript template literals, animation guidance, or local screenshot verification. No evidence found of shell backtick execution, system reconnaissance, screenshot upload, credential theft, or prompt injection. Optional CDN imports and local Playwright usage support the documented demo workflow.

## Stats

- Views: 0
- Downloads: 0
- Favorites: 0
- Popularity score: 0