Web Skills
EN

Senior Design Engineer und Motion Designer

cg-web-animate

Seine Aufgabe ist ausdrücklich nicht, überall Animation hinzuzufügen. Sie ist, Bewegung zu schaffen, die Bedeutung trägt — und den Rest still zu lassen.

5.952 Wörter Methode

Vollständige SKILL.md lesen

1

Eine Regel über allen anderen

Vor jeder Umsetzung muss Claude benennen, was die Animation kommuniziert. Der Skill listet die sechs Gründe, die zählen: Hierarchie, räumliche Kontinuität, Feedback, Orientierung, Markenausdruck und wahrgenommene Performance. Bewegung, die keinem davon dient, wird nicht gebaut.

Every animation must have a reason to exist.

cg-web-animate · SKILL.md

2

Er wählt die einfachste Technologie, die funktioniert

Eine Entscheidungsfolge, keine Vorliebe: Löst CSS das? Löst es eine native Browser-API? Ist komplexe Choreografie wirklich nötig? Geht es um Anwendungszustand? Ist das Visual selbst ein animiertes Asset? Zu einer Bibliothek wird erst gegriffen, wenn die früheren Antworten Nein lauten.

Do not add a library for an effect that CSS or a small amount of code can safely handle.

cg-web-animate · SKILL.md

3

Motion ist ein System, kein Haufen Werte

Vier Ebenen — globale und Hero-Motion, Section-Motion, Component-Motion, Micro-Motion — mit gemeinsamen Easing-Regeln, einer Timing-Skala und Stagger. Dauern kommen aus Tokens, damit sich das ganze Interface wie eine Sache bewegt.

Design the motion system together with the interface.

cg-web-animate · SKILL.md

4

Zugänglich und schnell, sonst geht es nicht live

prefers-reduced-motion wird in CSS und JavaScript respektiert, Tastaturfokus bleibt erhalten, Flackergrenzen werden eingehalten. Nur compositor-freundliche Eigenschaften, will-change sparsam, keine Layout-Animation ohne Grund.

Animations must never block access to content.

cg-web-animate · SKILL.md

Was er sich weigert zu tun

Der Skill benennt die Animations-Defaults, an denen man generierte Arbeit erkennt, und schließt sie standardmäßig aus:

Every section fades or slides up on scroll. Every card scales on hover. Decorative parallax without narrative purpose. Multiple simultaneous entrance effects. Animations that delay access to content.

cg-web-animate · SKILL.md

Technologien, zwischen denen er wählt

Ungefähr in dieser Reihenfolge der Bevorzugung — zu den hinteren greift der Skill erst, wenn die vorderen die Aufgabe wirklich nicht lösen können.

  1. CSS
  2. Web Animations API
  3. View Transitions API
  4. Scroll-driven animations
  5. GSAP
  6. Motion
  7. Lottie
  8. Rive
  9. SVG
  10. Canvas
  11. WebGL

Frag Claude zum Beispiel

  • Add a premium hero entrance to this page.
  • Our scroll animations feel cheap. Review and fix them.
  • Build a page transition between the project list and project detail in Next.js.
  • Make these buttons feel more responsive.
Terminal-Sitzung
$ npx cg-web-skills install cg-web-animate