skills.rest
vTRKA
vTRKACOMMUNITY
Explore all skills by this author →
GitHub

interaction-design-patterns

Guides web UI motion and micro-interaction design with output contracts.

Updated Apr 27, 2026
Search Tags:#performance#accessibility#micro-interactions#motion design#reduced-motion#UI transitions#prototype verification
One-click install
npx skills add https://github.com/vTRKA/supervibe --skill interaction-design-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interaction-design-patterns
Source: https://github.com/vTRKA/supervibe/tree/main/skills/interaction-design-patterns
Command: npx skills add https://github.com/vTRKA/supervibe --skill interaction-design-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents motion-heavy UI from becoming inconsistent, inaccessible, or performance-risky by forcing motion decisions to follow a verified pattern workflow with required fallbacks and evidence.

Core Features & Use Cases

  • Motion decision framework for micro-interactions, transitions, loading states, and hero treatments, including when to avoid motion.
  • Reduced-motion and performance-safe implementation standards to ensure fallbacks exist before prototype delivery.
  • Advanced-effect boundary and verification expectations that require capability planning and runtime/preview proof (or BLOCKED/handoff-only output) for media and complex rendering.

Quick Start

Use the interaction-design-patterns skill to design a loading-state animation that respects reduced-motion and aligns with the approved motion tokens in your design system.

Frequently Asked Questions about interaction-design-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design micro-interactions that respect reduced-motion preferences?▼

Designing reduced-motion micro-interactions requires enforcing fallback patterns before prototype delivery. This skill selects timing and easing standards while ensuring accessibility-safe fallbacks exist for hover, active, and focus states.

What is the best way to plan UI transitions without causing performance issues?▼

Planning performant UI transitions requires selecting compositor-safe properties and verifying motion patterns before implementation. This framework applies evidence-first anti-slop gates to prevent inconsistent or performance-risky motion decisions.

How do I verify advanced motion design effects for web UI?▼

Verifying advanced web UI motion effects requires capability planning and runtime preview proof. The framework enforces boundary expectations, outputting a BLOCKED or handoff-only status if complex media rendering lacks sufficient verification evidence.

When should I avoid using motion in component and page transitions?▼

Avoiding motion in component transitions is necessary when reduced-motion fallbacks cannot be safely implemented or capability verification fails. The framework dictates when to omit motion entirely to maintain accessibility and performance standards.

Do I need design system tokens to prototype loading and feedback states?▼

Prototyping loading and feedback states requires approved motion tokens to ensure consistency. The skill aligns loading-state animations with existing design system tokens while enforcing reduced-motion compatibility and prototype capability-plan discipline.

Can I use this interaction-design-patterns skill for scroll reveal animations?▼

Using this skill for scroll reveal animations ensures performance-safe implementation through verified timing, easing, and fallback patterns. It applies evidence-first anti-slop gates to scroll reveals, loading states, and hero treatments before prototype work.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

motion-scale

Generate duration, easing, and delay tokens for UI motion systems.

Community
Advanced
MaggieAppletonMaggieAppleton
160

fixing-motion-performance

Audit UI animations and optimize transforms to reduce layout thrashing.

Community
Advanced
vTRKAvTRKA

reduced-motion-accessibility

Enforce reduced-motion fallbacks and validate with browser/runtime evidence.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate