Animationen für die Website: Auswahl und Erstellung
Dieser Skill hilft dabei, eine Animation für eine Website auszuwählen und zu erstellen, basierend auf 30 Rezepten. Die Dateien im Ordner:
- placements.md: 8 Bereiche auf der Website und welche Animationen zu jedem Bereich passen.
- recipes.md: Detaillierte Bauanleitung für jede der 30 Animationen.
Schritt 1: Nach dem Einsatzort fragen
Wenn der Skill geladen wird, frage zuerst diese Frage in der Sprache des Benutzers, mit der nummerierten Liste. Beginne nicht mit dem Schreiben von Code, bevor es eine Antwort gibt.
"In welchem Bereich der Website möchtest du die Animation einfügen?"
- Hero-Bereich einer Landingpage
- Scroll-Übergang oder Bildschirmwechsel
- Karten und Feature-Raster
- Formulare, Eingabefelder und Einmalcode
- Buttons, Schalter und Fortschrittsanzeigen
- Navigation und Menüs
- Produkt- oder App-Präsentation (Handy-Mockup, Karussell)
- Figur oder Effekt, der dem Mauszeiger auf der gesamten Seite folgt
Wenn der Benutzer den Ort bereits in der Anfrage genannt hat, überspringe Schritt 2 und gib an, welcher Ort verstanden wurde.
Schritt 2: Nach der Art der Animation fragen
Lies placements.md und zeige nur die Optionen des gewählten Ortes in einer nummerierten Liste an. Für jede Option: Name, ein Satz in der Sprache des Benutzers, der beschreibt, was zu sehen ist, und der Schwierigkeitsgrad. Bitte den Benutzer, eine Nummer zu wählen oder eine Kombination von zweien zu beschreiben.
Wenn der Benutzer unsicher ist, empfehle eine Option und begründe sie mit einem Satz basierend auf bekanntem Wissen: Art des Unternehmens, Zielgruppe und wie viel Komplexität er bereit ist zu warten.
Schritt 3: Drei kurze Fragen vor der Erstellung
Stelle alle drei Fragen in einer Nachricht:
- Auf welcher Basis wird entwickelt: Einfaches HTML/CSS/JS, React, Next.js, Webflow, WordPress oder etwas anderes?
- Was ist der Inhalt: Überschrift, Text, Bilder, Markenfarben, Logo. Wenn nicht vorhanden, verwende Platzhalter-Inhalt und markiere ihn.
- Muss die Website in allen Browsern und auf Mobilgeräten funktionieren? Eine mit "experimentell" gekennzeichnete Animation basiert auf einer API, die nur in Chrome verfügbar ist.
Schritt 4: Erstellung
- Öffne in recipes.md das ausgewählte Rezept und lies die vollständige Spezifikation.
- Erstelle eine Implementierung von Grund auf gemäß der Spezifikation und dem Inhalt des Benutzers.
- Wähle das einfachste Werkzeug, das den Effekt erzielt: CSS vor Canvas, und Canvas vor WebGL. Verwende Three.js oder R3F nur, wenn echte Tiefe, Beleuchtung oder Shader benötigt werden.
- Gib die "Einstellungs-Knöpfe" aus dem Rezept als Variablen am Anfang der Datei oder in einem kleinen Panel (z. B. lil-gui oder Leva) frei, damit man sie anpassen kann, ohne den Code zu berühren.
- Bei einem als "Nur Chrome" markierten Rezept: Erstelle einen Fallback, wie ein Bild des HTML als Textur oder eine einfache CSS-Version. Überprüfe die Unterstützung zur Laufzeit, nicht anhand des User-Agents.
Schritt 5: Überprüfung vor der Ausgabe
Gehe die Liste durch und berichte dem Benutzer, was geprüft wurde und was nicht:
- prefers-reduced-motion: In dieser Einstellung wird die Animation gestoppt oder durch eine statische Version ersetzt.
- Performance: Strebe 60fps auf einem normalen Computer an. Stoppe die Schleife, wenn das Element nicht sichtbar ist (IntersectionObserver) und wenn der Tab ausgeblendet ist. Beschränke devicePixelRatio auf 2.
- Mobilgeräte: Berührung anstelle von Hover und eine leichtere oder statische Version auf schwachen Geräten.
- Barrierefreiheit: Der Text bleibt echtes HTML, zugänglich für Screenreader und Suchmaschinen. Ein Effekt, der Inhalt verdeckt, blockiert nicht das Lesen.
- Wenn ich den Code nicht im Browser ausgeführt habe, schreibe das explizit.