Skill

/interaction-design

Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.

One skill from claude-skills.

shell

$ npx -y skills add secondsky/claude-skills --skill interaction-design --agent claude-code

Installs just this skill. Get the whole plugin for auto-invocation.

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/interaction-design

Context preview

The summary Claude sees to decide when to auto-load this skill.

Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.

Stats

Stars194

Forks29

LanguageTypeScript

LicenseMIT

Ships with claude-skills

SKILL.md

interaction-design.SKILL.md

---
name: interaction-design
description: Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.
license: MIT
---

# Interaction Design

Create intuitive user experiences through thoughtful feedback and interaction patterns.

## Interaction Patterns

| Pattern | Duration | Use Case |
|---------|----------|----------|
| Microinteraction | 100-200ms | Button press, toggle |
| Transition | 200-400ms | Page change, modal |
| Entrance | 300-500ms | List items appearing |

## Loading States

```css
/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
```

```jsx
function LoadingState({ isLoading, children }) {
  if (isLoading) {