solinkz/micro-interactions-skill

Was macht micro-interactions-skill?

Fachkenntnisse für Mikrointeraktionen für KI-Codierungsagenten – mobile Apps, Webanwendungen und responsive Websites. Über 20 Muster, Federphysik, Easing-Kurven, Barrierefreiheit, Leistung.

Übersicht

Dieses Skill-Paket bietet KI-Codierungsagenten eine umfassende Bibliothek zur Erstellung von Mikrointeraktionen. Es deckt Muster ab von einfachen Hover-Effekten bis hin zu komplexen, physikbasierten Animationen. Die Muster sind modular aufgebaut und lassen sich leicht an verschiedene UI-Frameworks anpassen.

Hauptfunktionen

• 20+ Interaktionsmuster: Schaltflächen, Karten, Ladezustände, Fortschrittsbalken, Zieh- und Ablege-Operationen, Übergänge, Popups und mehr.
• Federphysik: Realistische Bewegungen mit Federparametern (Steifigkeit, Dämpfung, Masse).
• Easing-Kurven: Breite Palette von Kurven (linear, ease-in, ease-out, ease-in-out, benutzerdefinierte kubische Bézierkurven).
• Barrierefreiheit: Unterstützung für prefers-reduced-motion, ausreichende Kontraste, Tastaturnavigation.
• Leistung: Optimierte CSS-Animationen, GPU-Beschleunigung, Vermeidung von Layout-Trashing, Einsatz von requestAnimationFrame.

Unterstützte Frameworks

• React (Framer Motion, react-spring)
• Vue (Vue Transition, Motion)
• Angular (Angular Animations)
• Svelte (Svelte Motion)
• Reine HTML/CSS/JS

Verwendung

Das Skill kann in Agenten-Workflows über folgende Plattformen integriert werden:

• Cursor
• Claude Code
• Codex
• Andere KI-Assistenten durch Bereitstellung des Markdowns

Beispiel (React mit Framer Motion)

import { motion } from 'framer-motion';

function Button() {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: 'spring', stiffness: 400, damping: 10 }}
    >
      Klick mich
    </motion.button>
  );
}

Barrierefreiheit

• Respektiere die Systemeinstellung prefers-reduced-motion.
• Stelle ausreichende Kontraste bei Animationen sicher.
• Verwende aria-live für dynamische Inhalte.
• Biete Alternativen für bewegungsbasierte Interaktionen.

Leistungstipps

• Bevorzuge CSS-Animationen gegenüber JavaScript, wenn möglich.
• Verwende transform und opacity für GPU-Beschleunigung.
• Vermeide Layout-Trashing durch Batch-Updates.
• Nutze content-visibility für nicht sichtbare Elemente.

Lizenz

MIT