Skills
.Work. You
Rest

ui-interactions

Community

Create responsive, tactile UI interactions.

Software Engineering#ui#accessibility#animations#framer-motion#interactions#sound-feedback
AuthorGuyErreich
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Inconsistent UI feedback across interactive elements leads to a jarring user experience. This skill provides guidelines to standardize motion, focus states, and feedback sounds so users perceive responsiveness and clarity when interacting with buttons, menus, and cards.

Core Features & Use Cases

  • Motion & micro-interactions: Replace standard HTML interactive tags with Framer Motion equivalents and implement smooth spring animations for hover and tap states.
  • Generative sound feedback: Use a centralized AudioContext-based utility for hover and click sounds without pulling in external assets, ensuring consistent audible feedback across interactions.
  • Accessibility & semantics: Enforce proper semantic elements and accessible ARIA labels, ensuring keyboard navigability and screen reader compatibility for all interactive controls.

Quick Start

Apply Framer Motion for hover and tap states across interactive components and wire in the shared interaction sound utility for feedback.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-interactions
Download link: https://github.com/GuyErreich/PersonalWebsite/archive/main.zip#ui-interactions

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.